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 - Embed(v2) 구성 요소를 활성화하려면 다음 단계를 수행하십시오.

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