버전 | 문서 링크 |
---|---|
AEM 6.5 | 여기 클릭 |
AEM as a Cloud Service | 이 문서 |
AEM Forms을 사용하면 AEM Sites 페이지에 양식을 원활하게 추가할 수 있습니다. 이를 통해 방문자는 현재 페이지를 떠나지 않고 편리하게 양식을 작성하고 제출할 수 있습니다. 이렇게 하면 방문자는 양식과 상호 작용하면서 웹 사이트의 다른 요소에 지속적으로 관심을 가질 수 있습니다.
AEM 페이지 편집기 를 사용하여 여러 양식을 신속하게 만들고 AEM Sites 페이지에 추가할 수 있습니다. 콘텐츠 작성자는 AEM 페이지 편집기를 사용하여 동적 동작, 유효성 검사, 데이터 통합, 기록 문서 생성 및 비즈니스 프로세스 자동화를 비롯한 적응형 양식 구성 요소의 기능을 사용하여 Sites 페이지 내에서 매끄러운 데이터 캡처 경험을 만들 수 있습니다. 또한 버전 관리, 타겟팅, 번역 및 다중 사이트 관리자와 같은 AEM Sites 페이지의 다양한 기능을 사용할 수 있습니다.
AEM Forms Cloud Service은 적응형 양식 컨테이너 및 적응형 Forms - 임베디드 구성 요소 를 제공합니다. 적응형 양식 컨테이너를 사용하여 AEM Sites 페이지 또는 경험 조각에서 양식을 만들 수 있습니다. 반면 적응형 Forms - 임베드 구성 요소를 사용하면 기존 적응형 양식을 추가하거나 적응형 Forms 편집기를 사용하여 양식을 만들 수 있습니다.
과거에 사이트에 대한 적응형 Forms 기초 구성 요소 또는 일반 HTML 기반 양식을 만든 경우, Adobe은 적응형 Forms 핵심 구성 요소를 사용하여 AEM Sites 페이지 또는 경험 조각에서 적응형 양식을 만들 것을 권장합니다. 이를 통해 버전 관리, 타겟팅, 번역 및 다중 사이트 관리자와 같은 AEM Sites 페이지의 다양한 기능을 사용할 수 있으므로 적응형 Forms에 대한 전반적인 양식 생성 및 관리 경험이 향상됩니다. 다음 기능 중 일부를 살펴보겠습니다.
또한 AEM 페이지 편집기의 적응형 Forms 는 적응형 Forms 핵심 구성 요소. 이러한 핵심 구성 요소는 다음과 동일한 방식으로 구성 요소를 스타일링하고 맞춤화하는 보다 표준적이고 쉬운 방법을 제공합니다. AEM Sites WCM 구성 요소.
다음 옵션을 활용하여 이 기능을 최대한 활용할 수 있습니다.
사용자 지정 적응형 양식을 만들어 AEM Sites 페이지에 추가: 적응형 양식 컨테이너 구성 요소를 사용하여 처음부터 새로운 양식을 제작할 수 있으며, 요구 사항 및 디자인 환경 설정에 맞게 특별히 맞춤화할 수 있습니다.
사용자 정의 적응형 양식을 만들어 경험 조각에 추가: AEM Experience Fragments에 양식을 추가하여 도달 범위를 확장함으로써 여러 페이지 또는 사이트에서 원활하게 재사용할 수 있습니다.
적응형 양식을 경험 조각으로 변환: AEM Sites 페이지에 추가된 적응형 양식을 여러 AEM Sites 페이지에서 양식을 재사용하기 위한 경험 조각으로 변환합니다.
승인된 템플릿을 기반으로 양식을 만들어 AEM Sites 페이지에 추가합니다. 사전 승인된 템플릿을 사용하여 조직의 브랜딩 지침 및 디자인 표준에 맞는 적응형 Forms을 신속하게 만들 수 있습니다. 옵션은 적응형 Forms 편집기 또는 적응형 Forms - 임베드 구성 요소로 생성된 적응형 Forms에 대해서만 사용할 수 있습니다.
AEM Sites 페이지에 기존 양식 추가: 이미 만든 양식을 웹 사이트에 쉽게 통합하여 방문자가 직접 상호 작용할 수 있도록 할 수 있습니다. 옵션은 적응형 Forms 편집기 또는 적응형 Forms - 임베드 구성 요소로 생성된 적응형 Forms에 대해서만 사용할 수 있습니다.
AEM Sites 페이지 또는 경험 조각에 여러 양식 추가: AEM Sites 페이지에 여러 적응형 Forms을 만들거나 추가하여 사용자의 환경 설정 및 요구 사항에 따라 다양한 선택 사항을 제공할 수 있습니다. 처음부터 새로 만든 양식과 기존 양식을 조합할 수 있습니다. 다음을 사용할 수 있습니다. 적응형 양식 컨테이너 AEM Sites 페이지에 적응형 Forms을 추가하기 위한 구성 요소를 여러 번 추가했습니다. 다음을 사용할 수 있습니다. 적응형 Forms - 포함 구성 요소를 AEM Sites 페이지에서 여러 번 만듭니다. 폼은 프레임의 전체 너비를 포함합니다. 옵션이 선택되어 있습니다. 만일의 경우에 폼은 프레임의 전체 너비를 포함합니다. 옵션이 선택되어 있지 않습니다. AEM Sites 페이지는 iframe 없이 하나의 적응형 양식만 존재하도록 지원합니다. 를 사용하여 더 많은 적응형 Forms을 추가하려면 적응형 Forms - 포함 구성 요소, 선택 폼은 프레임의 전체 너비를 포함합니다. 옵션을 선택합니다.
적응형 양식 컨테이너를 사용하여 양식을 만들거나 추가하는 경우 AEM Sites 번역 흐름을 통해 양식을 번역하고 현지화를 수행합니다. 각 언어별로 사이트 페이지와 해당 양식의 별도 사본(언어 사본)을 생성하고, 콘텐츠 작성자가 상위 페이지의 양식에서 규칙을 수정하는 경우 양식의 모든 언어 사본에 대해 동일한 변경을 수행해야 합니다. 또한 적응형 양식 컨테이너를 사용하여 버전 관리, 타기팅, 번역 및 다중 사이트 관리자와 같은 AEM Sites 페이지의 다양한 기능을 사용할 수 있습니다.
적응형 양식 임베디드 구성 요소를 사용하여 양식을 만들거나 추가하는 경우 AEM Forms 번역 흐름을 통해 양식을 번역하고 현지화를 수행합니다. 이 경우 Sites 페이지의 모든 언어 사본에서 단일 양식을 관리하고 참조하십시오. 적응형 양식 임베디드 구성 요소는 버전 관리, 타겟팅, 번역 및 다중 사이트 관리자 등 AEM Sites 페이지의 다양한 기능에 대한 액세스 권한을 제공하지 않습니다.
적응형 양식 만들기를 시작하기 전에 적응형 Forms 핵심 구성 요소를 활성화하고 적응형 Forms 클라이언트 라이브러리를 AEM Sites 페이지에 추가합니다.
AEM Forms as a Cloud Service 환경에 맞는 적응형 양식 핵심 구성 요소가 활성화되어 있는지 확인합니다.
적응형 양식 컨테이너 구성 요소의 전체 기능을 활성화하려면 배포 파이프라인을 사용하여 AEM Sites 페이지에 Customheaderlibs 및 Customfooterlibs 클라이언트 라이브러리를 추가합니다. 라이브러리를 추가하려면:
AEM Cloud Service Git 저장소를 사용하고 복제합니다.
플랜 텍스트 편집기에서 AEM Cloud Service Git 저장소 폴더를 엽니다. 예: Microsoft Visual 코드.
를 엽니다. ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.html
을(를) 파일하고 다음 코드를 파일에 추가합니다.
//Customheaderlibs.html
<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
<sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
</sly>
를 엽니다. ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.html
을(를) 파일하고 다음 코드를 파일에 추가합니다.
//customfooterlibs.html
<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
<sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
</sly>
를 엽니다. ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.html
을(를) 파일하고 다음 코드를 파일에 추가합니다.
//Customheaderlibs.html
<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
<sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
</sly>
를 엽니다. ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.html
을(를) 파일하고 다음 코드를 파일에 추가합니다.
//customfooterlibs.html
<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
<sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
</sly>
배포 파이프라인을 실행하여 AEM as a Cloud Service 환경에 클라이언트 라이브러리를 배포합니다.
템플릿의 정책에서 적응형 양식 컨테이너 구성 요소를 활성화하려면 다음 절차를 수행해야 합니다.
AEM Sites 페이지 또는 경험 조각에서 직접 요구 사항 및 디자인 환경 설정에 맞게 맞춤화하여 처음부터 새로운 양식을 만들 수 있습니다. 일회성 양식의 경우 AEM Sites 페이지로 직접 작성하는 것이 좋지만 경험 조각은 웹 사이트의 여러 페이지에서 재사용해야 하는 양식에 이상적입니다.
AEM 페이지 편집기에서 적응형 양식 컨테이너 구성 요소를 사용하여 사용자 정의 양식을 만들 수 있습니다. 구성 요소를 사용하여 양식 구성 요소를 드래그 앤 드롭하여 양식을 만들 수 있습니다. 양식 구성 요소는 핵심 구성 요소를 기반으로 합니다. 조직의 요구 사항에 따라 손쉽게 사용자 정의할 수 있습니다.
Sites 페이지에서 적응형 양식을 만들려면:
다음, 제출 액션 설정 및 고급 속성입니다.
양식을 AEM 경험 조각에 추가하여 양식의 범위를 확장하고 여러 페이지 또는 사이트에서 원활하게 재사용할 수 있습니다. 예를 들어 경험 조각 내에 뉴스레터 신청 양식을 포함할 수 있습니다. 이렇게 하면 웹 사이트의 여러 페이지에서 조각을 편리하게 재사용할 수 있으므로 양식을 반복적으로 다시 만들 필요가 없습니다. 경험 조각 내에서 뉴스레터 등록 양식에 대해 수행된 모든 업데이트 또는 수정 사항은 활용되는 모든 페이지에 자동으로 전파됩니다. 이로써 프로세스를 간소화하고 원활한 사용자 경험을 제공하는 동시에 웹 사이트 양식 관리를 간소화합니다.
경험 조각에서 적응형 양식을 만들려면:
다음, 제출 액션 설정 및 고급 속성입니다.
Sites 페이지 편집기의 기존 적응형 양식을 경험 조각으로 변환하여 여러 페이지 또는 사이트에서 양식을 재사용할 수 있습니다.
AEM Sites 페이지의 적응형 양식을 경험 조각으로 변환하려면 다음 작업을 수행하십시오.
편집 모드로 적응형 양식(적응형 Forms 컨테이너 구성 요소)이 포함된 AEM Sites 페이지를 엽니다.
콘텐츠 트리를 열고 다음을 선택합니다. 적응형 Forms 컨테이너 적응형 양식을 호스팅합니다. AEM Sites 페이지는 여러 적응형 Forms을 호스팅할 수 있습니다. 따라서 올바른 적응형 Forms 컨테이너를 신중하게 선택하십시오.
메뉴 모음에서 경험 조각 변형 아이콘으로 변환합니다.
적응형 양식 컨테이너를 새 경험 조각으로 변환하거나 기존 경험 조각에 추가할 수 있는 대화 상자가 나타납니다
경험 조각 변형으로 변환 대화 상자에서 다음 옵션에 대한 값을 설정합니다.
제출 액션을 사용하면 적응형 양식을 통해 캡처되는 데이터의 대상을 선택할 수 있습니다. 사용자가 적응형 양식에서 제출 단추를 클릭하면 트리거됩니다. 적응형 양식에는 즉시 사용 가능한 제출 액션이 포함됩니다. 기본 제출 액션을 확장하여 자신만의 사용자 지정 제출 액션을 만들 수도 있습니다. 양식에 대해 제출 액션을 구성하려면 다음 작업을 수행하십시오.
양식 데이터 모델을 사용하면 양식을 데이터 소스에 연결하여 사용자 작업에 따라 데이터를 보내고 받을 수 있습니다. 양식을 JSON 스키마에 연결하여 미리 정의된 형식으로 제출된 데이터를 받을 수도 있습니다. 요구 사항에 따라 양식을 JSON 스키마 또는 양식 데이터 모델에 연결합니다.
양식에 대해 JSON 스키마 또는 양식 데이터 모델을 구성하려면 다음 작업을 수행하십시오.
적응형 양식이 포함된 AEM 페이지 편집기 또는 경험 조각을 엽니다.
콘텐츠 트리를 열고 다음을 선택합니다. 적응형 Forms 컨테이너 적응형 양식을 호스팅합니다. AEM Sites 페이지는 여러 적응형 Forms을 호스팅할 수 있습니다. 따라서 올바른 적응형 Forms 컨테이너를 신중하게 선택하십시오.
적응형 양식 컨테이너 속성을 클릭합니다 아이콘. 데이터 모델을 구성하는 적응형 양식 컨테이너 대화 상자가 열립니다.
요구 사항에 따라 JSON 스키마 또는 양식 데이터 모델을 선택하고 구성합니다. 제출 액션에 대한 자세한 내용은 적응형 양식 제출 액션.
완료를 클릭합니다.
미리 채우기 서비스를 사용하여 기존 데이터를 사용하는 적응형 양식의 필드를 자동으로 채울 수 있습니다. 사용자가 양식을 열면 해당 필드의 값이 미리 채워집니다. 다음과 같은 작업을 수행할 수 있습니다.
양식 데이터 모델 미리 채우기 서비스를 사용하여 AEM Sites 페이지 또는 경험 조각에서 적응형 양식의 필드를 미리 채우거나 양식 데이터 모델 또는 사용자 지정 미리 채우기 서비스를 사용할 수 있습니다. 양식 데이터 모델 미리 채우기 서비스에서는 구성된 양식 데이터 모델의 서비스 가져오기 데이터를 검색합니다. 적응형 양식에 대해 양식 데이터 모델 미리 채우기 서비스를 사용하려면
양식을 제출할 때 사용자를 다른 웹 페이지나 메시지로 리디렉션할 수 있습니다. 사용자를 리디렉션하거나 감사 메시지를 구성하려면:
적응형 양식이 포함된 AEM 페이지 편집기 또는 경험 조각을 엽니다.
콘텐츠 트리를 열고 다음을 선택합니다. 적응형 Forms 컨테이너 적응형 양식을 호스팅합니다. AEM Sites 페이지는 여러 적응형 Forms을 호스팅할 수 있습니다. 따라서 올바른 적응형 Forms 컨테이너를 신중하게 선택하십시오.
를 엽니다. 제출 탭.