AEM 사이트 페이지에 적응형 양식 포함 embed-an-adaptive-form-to-aem-sites-page

다음의 경우 양식이 페이지의 전체 너비를 포함하는 경우 옵션이에서 선택됨 양식 컨테이너 구성 대화 상자 및 핵심 구성 요소를 사용하는 적응형 Forms 가 사용되며 해당 사이트의 페이지에 클라이언트 라이브러리를 포함해야 합니다.

추가 Customheaderlibs 및 Customfooterlibs 클라이언트 라이브러리를 배포 파이프라인을 사용하여 AEM Sites 페이지에 추가합니다. 클라이언트 라이브러리를 추가하려면 다음을 수행하십시오.

1. AEM Cloud Service Git 저장소를 사용하고 복제합니다.

2. 플랜 텍스트 편집기에서 AEM Cloud Service Git 저장소 폴더를 엽니다. 예를 들어 Microsoft® Visual Code가 있습니다.

3. 를 엽니다. ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.html 을(를) 파일하고 다음 코드를 파일에 추가합니다.

   code language-none
   //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>

4. 를 엽니다. ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.html 을(를) 파일하고 다음 코드를 파일에 추가합니다.

   code language-none
   //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>

5. 를 엽니다. ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.html 을(를) 파일하고 다음 코드를 파일에 추가합니다.

   code language-none
   //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>

6. 를 엽니다. ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.html 을(를) 파일하고 다음 코드를 파일에 추가합니다.

   code language-none
   //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>

7. 배포 파이프라인을 실행하여 AEM as a Cloud Service 환경에 클라이언트 라이브러리를 배포합니다.

활성화하려면 적응형 Forms - 포함(v2) 템플릿 정책의 구성 요소에서 다음 단계를 수행합니다.

1. 편집할 AEM Sites 페이지 또는 경험 조각을 엽니다. 편집할 페이지를 열려면 페이지를 선택한 다음 편집.
2. 사이트 또는 경험 조각 페이지의 템플릿을 엽니다. 템플릿을 열려면 페이지 정보 > 템플릿 편집 ​으로 이동합니다. 템플릿 편집기에서 해당 템플릿이 열립니다.
3. 구조 보기의 메뉴 막대에서 정책 아이콘을 클릭합니다. 다음에서 허용된 구성 요소 목록 및 선택 적응형 Forms - 포함(v2) 확인란 [AEM Archetype 프로젝트 이름] - 적응형 양식.
4. 완료 ​를 클릭합니다.