핵심 구성 요소 기반 적응형 템플릿 만들기 adaptive-form-templates

양식을 작성할 때 편집기에서 양식 구조, 콘텐츠 및 작업을 정의하는 필드 및 구성 요소를 추가합니다. 양식 컨테이너의 guideRootPanel에 필드 및 구성 요소를 추가합니다. 템플릿 편집기를 사용하면 작성자가 양식을 만드는 데 사용할 수 있는 기본 구조와 초기 콘텐츠가 포함된 템플릿을 만들 수 있습니다.

예를 들어 모든 양식 작성자가 등록 양식에 특정 텍스트 상자, 탐색 단추 및 제출 단추를 포함할 수 있습니다. 작성자가 다른 등록 양식과 일치하는 양식을 만드는 데 사용할 수 있는 구성 요소로 템플릿을 만들 수 있습니다. 작성자가 템플릿을 사용하여 적응형 양식을 만들면 새 양식은 템플릿에서 지정한 구조 및 구성 요소를 상속받습니다. 템플릿 편집기 를 사용하여 다음과 같은 작업을 수행할 수 있습니다.

전제 조건

환경에 적응형 Forms 핵심 구성 요소 사용: 프로그램을 만들 때 환경에 대해 적응형 Forms 핵심 구성 요소가 이미 활성화되었습니다. AEM Archetype 39 이하를 기반으로 하는 Forms 양식 환경이 있는 경우 환경에 맞는 적응형 as a Cloud Service 핵심 구성 요소를 활성화하십시오.

템플릿 작업 working-with-templates

도구 메뉴에서 Adobe Experience Manager > 도구 > 일반 > 템플릿 ​으로 이동하여 템플릿 편집기에 액세스할 수 있습니다. 여기에서 템플릿은 편집 가능한 템플릿을 사용할 수 있도록 설정된 폴더로 구성됩니다.

Experience Manager은 템플릿을 구성할 수 있는 전역 폴더를 제공합니다. 그러나 기본적으로 활성화되어 있지는 않습니다. 전역 폴더를 활성화하거나 템플릿용 폴더를 만들도록 관리자에게 요청할 수 있습니다. 폴더를 만드는 방법에 대한 자세한 내용은 템플릿 폴더를 참조하십시오.

템플릿 만들기 create-template

폴더를 만든 후 폴더를 열고 다음 단계를 수행하여 템플릿을 만듭니다.

템플릿 편집기 UI template-editor-ui

편집할 템플릿을 열면 다음 AEM Editor 구성 요소를 볼 수 있습니다.

템플릿 편집 editing-a-template

템플릿의 적절한 측면을 선택하고 편집하는 다양한 모드는 다음과 같습니다.

화면 오른쪽 상단의 미리 보기 옵션 옆에 있는 레이어 선택기를 사용할 수 있습니다.

구조 structure

템플릿 편집기에서 구조 레이어를 선택하면 템플릿과 연결된 적응형 Forms을 만드는 동안 변경할 수 없는 콘텐츠를 미리 정의하는 데 도움이 됩니다.

구조 레이어에서 구성 요소 잠금/잠금 해제 locking-unlocking-components-in-the-structure-layer

구조 레이어를 선택한 상태로 템플릿을 편집할 때 템플릿의 머리글과 바닥글을 잠금 해제할 수 있습니다. 템플릿에서 구성 요소 잠금이 해제된 경우 양식 작성자는 템플릿을 사용하는 적응형 양식에서 구성 요소를 편집할 수 있습니다. 구성 요소를 잠그면 양식 작성자가 적응형 양식에서 편집할 수 없습니다. 잠금 옵션은 구성 요소 도구 모음에서 사용할 수 있습니다.

예를 들어 템플릿에 헤더 구성 요소를 추가합니다. 구성 요소를 선택하면 구성 요소 도구 모음에 잠금 옵션이 표시됩니다. 일반적으로 머리글에는 회사 이름과 로고가 포함되며 양식 작성자가 템플릿에서 로고와 머리글을 변경하지 마십시오. 헤더 구성 요소가 잠긴 템플릿을 사용하여 만든 적응형 양식에서는 양식 작성자가 로고와 회사 이름을 변경할 수 없습니다.

초기 콘텐츠 initial-content

초기 컨텐츠 옵션을 선택하면 템플릿의 적응형 양식 컨테이너가 편집을 위한 적응형 양식처럼 열립니다. 템플릿과 연결된 적응형 Forms을 만드는 동안 변경할 수 있는 사전 정의된 콘텐츠를 만들 수 있습니다. 적응형 양식 작성과 마찬가지로 테마 선택 및 작업 제출과 같은 초기 설정을 지정할 수 있습니다.

양식 작성자는 이 필드를 기반으로 양식을 만듭니다. 컨텐츠 흐름 구조는 템플릿의 초기 컨텐츠 레이어에 지정됩니다. 양식 템플릿의 초기 콘텐츠를 편집하는 것으로 전환하려면 페이지 도구 모음에서 미리 보기 전에 > 초기 콘텐츠 ​를 선택합니다.

초기 컨텐츠 레이어에서 작성자가 기반으로 사용하는 적응형 양식 템플릿을 만듭니다. 템플릿 작성은 양식 작성과 유사하며, 사이드바에서 사용할 수 있는 옵션을 사용합니다. 사이드바는 콘텐츠, 속성, 에셋 및 구성 요소 브라우저를 제공합니다.

레이아웃 layout

템플릿을 편집할 때 레이아웃을 정의할 수 있으며 표준 반응형 레이아웃을 사용합니다. 레이아웃은 장치 너비를 기반으로 구성 요소의 너비를 관리하여 반응형 적응형 양식 디자인을 용이하게 합니다.

자세한 내용은 문서 응답형 레이아웃 이해를 참조하십시오.

템플릿 활성화 enabling-the-template

템플릿을 만들면 초안으로 추가됩니다. 적응형 Forms 생성에 사용할 수 있도록 템플릿을 활성화합니다. 템플릿을 활성화하려면 다음 작업을 수행하십시오.

템플릿 가져오기 또는 내보내기 importing-or-exporting-a-template

양식은 템플릿으로 작동합니다. 사용자 지정된 템플릿을 사용하여 만든 적응형 양식을 다운로드할 때 템플릿이 다운로드되지 않습니다. 다른 AEM Forms 인스턴스에서 양식을 가져올 때 해당 서식 파일 없이 가져옵니다. 양식을 가져왔지만 해당 템플릿을 사용할 수 없는 경우 양식이 렌더링되지 않습니다. https://<server>:<port>/crx/packmgr의 /conf 노드에서 사용자 지정 템플릿을 패키징하고 양식을 업로드할 AEM Forms 인스턴스에 포팅할 수 있습니다. AEM Archetype을 사용하여 템플릿을 만들고 Cloud Service 인스턴스에 배포할 수도 있습니다.

양식 데이터 모델 스키마를 템플릿에 연결 associating-form-data-model-schema-in-template

작성자는 템플릿 편집기에서 양식 데이터 모델 스키마를 적응형 양식 템플릿에 연결할 수 있습니다. 이를 통해 작성자는 템플릿 편집기에서 스키마를 선택할 수 있습니다. 스키마를 템플릿에 연결하면 양식 작성자가 템플릿을 기반으로 양식을 만들 때 양식에 대해 스키마가 미리 선택됩니다. 양식 작성자가 스키마 사용을 규제하고 양식 작성자의 시간도 절약할 수 있습니다. 템플릿 편집기에서 양식 데이터 모델 스키마를 선택하려면 다음을 수행하십시오.

템플릿 정책을 사용하여 적응형 양식 구성 요소에 사용자 지정 속성 추가

사용자 정의 속성을 사용하면 양식 템플릿을 사용하여 사용자 정의 속성(키-값 쌍)을 적응형 양식 핵심 구성 요소에 연결할 수 있습니다. 사용자 지정 속성은 구성 요소의 Headless 렌디션의 속성 섹션에 반영됩니다. 사용자 정의 속성 값에 따라 조정되는 동적 양식 동작을 만들 수 있습니다. 예를 들어 개발자는 모바일, 데스크탑 또는 웹 플랫폼을 위한 Headless 양식 구성 요소의 다양한 표현을 디자인하여 다양한 디바이스에서 사용자 경험을 크게 향상시킬 수 있습니다.

적응형 양식 핵심 구성 요소 필드에 사용자 지정 속성을 추가하는 단계는 다음과 같습니다.

템플릿 편집기의 정책에 사용자 지정 그룹 이름 추가 add-a-custom-group-name

템플릿 정책을 사용하여 사용자 지정 속성 그룹을 하나 이상 추가하면 해당 핵심 구성 요소의 편집 대화 상자에 고급 탭이 표시됩니다.

핵심 구성 요소의 편집 대화 상자에서 사용자 지정 그룹 이름 선택 select-a-custom-group-name

템플릿을 사용하여 적응형 양식 만들기 creating-an-adaptive-form-using-the-template

템플릿을 만들고 활성화한 후 적응형 양식을 만들 때 Forms 관리자에서 사용할 수 있습니다. 템플릿을 사용하고 적응형 양식을 만들려면 핵심 구성 요소를 기반으로 적응형 양식 만들기를 참조하십시오.

모범 사례 best-practices

추가 참조 see-also