적응형 양식 템플릿

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

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

  • 구조 레이어에 양식의 머리글 및 바닥글 구성 요소를 추가합니다.
  • 양식의 초기 컨텐츠를 제공합니다.
  • 테마를 지정하고 작업을 제출합니다.

템플릿 작업

Adobe Experience Manager > 도구 > 템플릿​으로 이동하여 도구 메뉴에서 템플릿 편집기에 액세스할 수 있습니다. 여기에서 템플릿은 편집 가능한 템플릿에 대해 활성화된 폴더로 구성됩니다. AEM에서는 템플릿을 구성할 글로벌 폴더를 제공합니다. 그러나 기본적으로 활성화되지 않습니다. 관리자에게 글로벌 폴더를 활성화하거나 템플릿에 대한 새 폴더를 만들도록 요청할 수 있습니다. 폴더를 만드는 방법에 대한 자세한 내용은 템플릿 폴더를 참조하십시오.

을 눌러 폴더를 열면 적응형 양식의 새 템플릿을 만들 수 있는 만들기 단추가 표시됩니다.

템플릿 만들기

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

  1. 템플릿 콘솔에서 만든 폴더 내의 만들기​를 탭합니다.

  2. 템플릿 유형 선택 섹션에서 적응형 양식 템플릿​을 선택하고 다음​을 누릅니다.

  3. 템플릿 세부 사항 섹션에서 템플릿 제목을 입력하고 만들기​를 탭합니다.

    양식 작성 시 만든 템플릿을 선택할 수 있는 시기를 확인할 수 있는 설명과 축소판을 제공할 수 있습니다.

  4. 완료​를 눌러 콘솔로 돌아가거나 열기​를 눌러 편집기에서 템플릿을 엽니다.

템플릿 편집기 UI

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

  • 페이지
    도구 모음다음 옵션을 포함합니다.

    • 사이드 패널 켜기/끄기:세로 막대를 표시하거나 숨길 수 있습니다.

    • 페이지 정보:게시/게시 취소 시간, 축소판, 클라이언트측 라이브러리, 페이지 정책 및 페이지 디자인 클라이언트측 라이브러리와 같은 정보를 지정할 수 있습니다.

    • 에뮬레이터:다양한 장치의 모양을 시뮬레이션하고 사용자 정의할 수 있습니다.

    • 레이어 선택기: 레이어를 변경할 수 있습니다.

      구조 레이어 또는 초기 내용 레이어를 선택할 수 있습니다. 구조 레이어를 사용하면 머리글과 바닥글을 추가하고 사용자 정의할 수 있습니다. 초기 컨텐츠 레이어를 사용하면 양식 컨텐츠를 사용자 정의할 수 있습니다.

    • 미리 보기:게시하면 템플릿이 어떻게 보이는지 미리 볼 수 있습니다. [레이어 선택기]와 [미리 보기]를 사용하여 편집 및 미리 보기 모드를 전환할 수 있습니다.

  • 사이드바: 컨텐트, 속성, 자산 및 구성 요소 브라우저를 제공합니다.

  • 구성 요소 도구 모음: 구성 요소를 선택하면 구성 요소를 사용자 정의할 수 있는 도구 모음이 표시됩니다.

  • 페이지:템플릿을 만들 컨텐츠를 추가하는 영역입니다.

터치 UI 편집기를 이해하려면 적응형 양식 작성 소개을 참조하십시오.

템플릿 편집

적응형 양식 템플릿은 두 개의 레이어를 사용하여 만듭니다.

  • 구조
  • 초기 컨텐츠

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

구조

템플릿 편집기에서 구조 레이어를 선택하면 적응형 양식 컨테이너 위아래에 레이아웃 컨테이너를 볼 수 있습니다. 작성자는 머리글 및 바닥글에 이러한 레이아웃 컨테이너를 사용할 수 있습니다. 머리글과 바닥글을 추가, 편집 또는 사용자 지정할 수 있습니다. 적응형 양식 컨테이너 위에 있는 레이아웃 컨테이너에서 적응형 양식 머리글 구성 요소를 드래그하여 템플릿 헤더를 사용자 정의합니다. 적응형 양식 컨테이너 아래의 레이아웃 컨테이너에 적응형 양식 바닥글 구성 요소를 드래그하여 템플릿 바닥글을 사용자 지정합니다.

구조 레이어의 레이아웃 컨테이너

그림: 구조 레이어의 레이아웃 컨테이너

바닥글 구성 요소에 대한 머리글 구성 요소 B. 레이아웃 컨테이너에 대한 A.레이아웃 컨테이너

적응형 양식 머리글 구성 요소를 레이아웃 컨테이너에서 적응형 양식 컨테이너 위에 드래그하여 놓습니다. 구성 요소를 추가한 후 로고를 추가하고 제목을 지정할 수 있는 속성을 지정할 수 있습니다.

마찬가지로 적응형 양식 컨테이너 아래의 레이아웃 컨테이너에서 바닥글 구성 요소를 드래그하여 놓을 때 저작권 정보 및 회사 세부 사항을 제공할 수 있습니다.

구조 레이어에 추가된 머리글 및 바닥글

그림: 구조 레이어에 추가된 머리글 및 바닥글

구조 레이어에서 구성 요소 잠금/잠금 해제

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

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

노트

머리글 구성 요소에서 이미지 또는 로고를 개별적으로 잠금 또는 잠금 해제할 것을 권장하지 않습니다. 머리글 구성 요소의 잠금을 해제할 수 있습니다.

초기 컨텐츠

초기 컨텐츠 옵션을 선택하면 템플릿의 응용 양식 컨테이너가 편집을 위한 적응형 양식처럼 열립니다. 적응형 양식 작성과 마찬가지로 테마 선택 및 작업 제출 등의 초기 설정을 지정할 수 있습니다.

양식 작성자는 양식을 만들기 위해 이 양식을 기반으로 사용합니다. 컨텐츠 흐름 구조는 템플릿의 초기 컨텐츠 레이어에 지정됩니다. 양식 템플릿의 초기 컨텐츠 편집으로 전환하려면 페이지 도구 모음의 미리 보기 전에 캔버스 드롭다운초기 컨텐츠​​를 탭합니다.

템플릿 편집기의 초기 컨텐츠 레이어

속성을 지정하기 위해 선택된 적응형 양식 컨테이너를 표시하는 템플릿 편집기의 초기 컨텐츠 레이어.

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

사이드바를 참조하십시오.

노트

[콘텐트 저장] 또는 [StorePDF]를 [제출 작업]으로 선택하면 저장소 경로를 지정하는 옵션이 표시됩니다. 템플릿에 경로를 지정하면 이 템플릿에서 만든 모든 양식의 경로가 동일합니다. 올바른 저장소 경로를 지정하거나 양식 작성자가 업데이트하여 모든 양식의 데이터가 같은 위치에 저장되지 않도록 할 수 있습니다.

탭 및 패널을 사용하여 적응형 양식 템플릿 만들기 

예를 들어 다음 탭으로 템플릿을 만들 수 있습니다.

  • 일반 정보
  • 전문 정보

로고를 추가하고 제목을 제공하고, 구조 레이어에 바닥글을 추가했습니다. 양식 작성자가 템플릿을 사용하여 양식을 만들 때 해당 양식 작성자를 편집할 수 없도록 머리글과 바닥글을 잠급니다.

레이어를 구조에서 초기 컨텐츠로 변경하고 양식에 내용을 추가하기 시작합니다. 탭 방식의 구조를 만들려면 응용 양식 컨테이너의 guideRootPanel에 하위 패널을 추가합니다. 패널을 추가하려면:

  • 구성 요소를 여기로 드래그하십시오 옵션을 선택하면 + 단추를 눌러 패널을 추가할 수 있습니다.

  • 세로 막대의 구성 요소 브라우저에서 패널 구성 요소를 드래그하여 놓을 수 있습니다.

  • 구성 요소 도구 모음에서 guideRootPanel의 하위 패널을 추가할 수 있습니다.

[일반 정보] 및 [전문 정보] 탭을 만들려면 guideRootPanel의 하위 패널에 두 개의 패널을 추가합니다. 패널을 선택하고 cmppr을 눌러 사이드바에서 속성을 엽니다. 요소 이름을 각각 general-infoprofessional-info로 변경하고 제목을 일반 정보 및 전문 정보로 변경합니다. 사이드바에서 컨텐츠를 눌러 컨텐츠 브라우저를 엽니다. 양식 개체 탭에서 guideRootPanel을 선택합니다. 편집기에서 guideRootPanel이 선택됩니다. 구성 요소 도구 모음에서 cmppr을 탭하여 속성을 엽니다. 패널 레이아웃 필드에서 위쪽 탭​을 선택하고 완료​를 누릅니다. 탭 방식의 템플릿 구조가 적용됩니다.

탭에 콘텐트 추가

적응형 양식 템플릿에서 필드 추가

템플릿에 필드 추가

패널을 추가하고 탭으로 구성한 후 탭 내에 필드를 추가할 수 있습니다. 편집기에서 탭을 선택하면 구성 요소를 여기로 드래그하십시오 옵션이 표시됩니다. 텍스트 상자, 목록 항목 및 단추와 같은 구성 요소를 드래그하여 놓을 수 있습니다. 사이드바의 구성 요소 브라우저에서 구성 요소를 드래그하여 놓을 수 있습니다.

각 구성 요소에는 데이터 캡처 및 조작을 향상시키는 속성이 있습니다. 예를 들어 구성 요소의 필수 필드 속성을 활성화할 수 있습니다. 작성자는 고객이 필수 필드 채우기를 건너뛸 때 표시되는 메시지를 지정할 수 있습니다. 필수 필드 메시지 속성에 메시지를 지정합니다.

예제 템플릿에서 이름, 전화 번호 및 생년월일 필드가 일반 정보 탭에 추가됩니다. [전문 정보] 탭에서 현재 고용됨, 고용 유형, 교육 자격 필드가 추가됩니다.

필드를 추가한 후 제출 및 재설정과 같은 단추를 추가할 수 있습니다.

템플릿활성화

템플릿을 만들 때 초안으로 추가됩니다. 적응형 양식을 만드는 데 템플릿을 사용하려면 템플릿을 활성화합니다. 템플릿을 활성화하려면:

  1. Adobe Experience Manager > 도구 > 템플릿​으로 이동하고 템플릿을 만든 폴더를 엽니다.

  2. 만든 템플릿이 초안으로 표시됩니다.

  3. 템플릿을 선택하고 도구 모음에서 활성화​를 누릅니다.

    적응형 양식을 만들 때 템플릿을 선택하라는 메시지가 표시될 때 템플릿이 나열됩니다.

템플릿가져오기 또는 내보내기

양식은 해당 템플릿과 함께 작동합니다. 사용자 정의된 템플릿을 사용하여 만든 적응형 양식을 다운로드할 경우 해당 템플릿이 다운로드되지 않습니다. 다른 AEM Forms 인스턴스에서 양식을 가져오면 해당 템플릿 없이 양식을 가져옵니다. 양식을 가져오지만 해당 템플릿을 사용할 수 없는 경우 양식이 렌더링되지 않습니다. https://<server>:<port>/crx/packmgr/conf 노드에서 사용자 지정 템플릿을 패키지하고, 양식을 업로드하려는 AEM Forms 인스턴스에서 포팅할 수 있습니다.

템플릿을(를) 사용하여 적응형 양식 만들기

템플릿을 만들고 활성화하면 적응형 양식을 만들 때 양식 관리자에서 템플릿을 사용할 수 있습니다. 템플릿을 사용하고 적응형 양식을 만들려면 적응형 양식 만들기를 참조하십시오.

기본 템플릿의 표시 옵션 변경

적응형 양식의 사용자 정의 템플릿을 만들어 기본 구조와 초기 컨텐츠를 정의할 수 있습니다. AEM Forms은 적응형 양식에 대한 곧바로 사용 가능한 템플릿 세트도 제공합니다. 템플릿을 표시하거나 숨길 수 있습니다.

템플릿을 표시하고 숨기려면 다음 단계를 수행합니다.

  1. AEM Forms 작성자 인스턴스에 로그인하고 도구 > 작업 > 웹 콘솔​로 이동합니다.

    노트

    AEM 웹 콘솔의 URL은 https://[server]:[port]/system/console/configMgr입니다.

  2. FormsManager 구성 설정을 찾아 엽니다.

    • 적응형 양식 템플릿을 표시하거나 숨기려면 AF 및 AD 템플릿 포함 옵션을 선택하거나 선택 취소합니다.
    • AEM 6.0 Forms 또는 AEM 6.1 Forms 릴리스에 추가되었지만 현재는 더 이상 사용되지 않는 적응형 양식 템플릿을 표시하거나 숨기려면 AEM 6.0 AF 템플릿 포함 옵션을 선택하거나 선택 취소합니다. 이 옵션을 선택하면 해당 옵션을 적용하려면 Include Out of the box AF 및 AD 템플릿 구성을 활성화해야 합니다.
  3. 저장​을 클릭합니다. 기본 템플릿에 대한 표시 옵션이 변경되었습니다.

추천

  • 템플릿 편집기에서 양식의 속성을 수정할 때는 BindReference 속성을 사용하지 마십시오.

  • 중단점을 추가하려면 적응형 양식 템플릿을 작성할 때 중단점을 만듭니다.

    중단점에 대한 자세한 내용은 반응형 레이아웃을 참조하십시오.

이 페이지에서는