응용 Forms의 레이아웃 기능

Adobe Experience Manager 최종 사용자에게 동적 경험을 제공하는 사용하기 쉬운 적응형 Forms 을 만들 수 있습니다. 양식 레이아웃은 항목 또는 구성 요소가 적응형 양식에 표시되는 방식을 제어합니다.

레이아웃 유형

적응형 양식은 다음과 같은 유형의 레이아웃을 제공합니다.

Panel Layout 패널 내의 항목 또는 구성 요소가 장치에 표시되는 방식을 제어합니다.

Mobile Layout 모바일 장치에서 양식의 탐색을 제어합니다. 장치 너비가 768픽셀 이상인 경우 레이아웃은 모바일 레이아웃으로 간주하여 모바일 장치에 최적화됩니다.

Toolbar Layout 양식의 도구 모음이나 패널 도구 모음에서 작업 단추 배치를 제어합니다.

이러한 모든 패널 레이아웃은 /libs/fd/af/layouts 위치에 정의됩니다.

적응형 양식의 레이아웃을 변경하려면 Experience Manager에서 작성 모드를 사용하십시오.

Panel layout

양식 작성자는 루트 패널을 포함하여 적응형 양식의 각 패널에 레이아웃을 연결할 수 있습니다.

패널 레이아웃은 /libs/fd/af/layouts/panel 위치에서 사용할 수 있습니다. 패널을 탭하고 cmppr1을 선택하여 패널 속성을 확인합니다.

적응형 양식의 루트 패널에 대한 패널 레이아웃 목록

Responsive - everything on one page without navigation

이 패널 레이아웃을 사용하여 특수 탐색을 수행할 필요 없이 장치의 화면 크기에 맞게 조정되는 응답형 레이아웃을 만들 수 있습니다.

이 레이아웃을 사용하여 여러 Panel Adaptive Form 구성 요소를 패널 내에 나란히 배치할 수 있습니다.

작은 화면에 표시된 대로 반응형 레이아웃을 사용하는 양식

Wizard

이 패널 레이아웃을 사용하여 양식 내에서 안내식 탐색을 제공할 수 있습니다. 예를 들어, 사용자를 단계별로 안내하는 동안 양식에서 필수 정보를 캡처하려면 이 레이아웃을 사용합니다.

Panel Adaptive Form 구성 요소를 사용하여 패널 내에서 단계별 탐색 기능을 제공합니다. 이 레이아웃을 사용하는 경우 사용자는 현재 단계가 완료된 후에만 다음 단계로 이동합니다

window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)

마법사 레이아웃을 사용한 양식

Accordion

이 레이아웃을 사용하여 Panel Adaptive Form 구성 요소를 아코디언 스타일 탐색이 있는 패널에 배치할 수 있습니다. 이 레이아웃을 사용하여 반복 가능한 패널을 만들 수도 있습니다. 반복 가능한 패널을 사용하면 필요에 따라 패널을 동적으로 추가하거나 제거할 수 있습니다. 패널이 반복되는 최소 및 최대 횟수를 정의할 수 있습니다. 또한, 패널 항목에 제공된 정보에 따라 패널의 제목을 동적으로 결정할 수 있다.

요약 표현식을 사용하여 최소화된 패널의 제목에 최종 사용자가 제공한 값을 표시할 수 있습니다.

적응형 Forms에서 아코디언 레이아웃을 사용하는 반복 가능한 패널

Tabbed layout - tabs appear on the left

이 레이아웃을 사용하여 탭 탐색 기능이 있는 패널에 Panel Adaptive Form 구성 요소를 배치할 수 있습니다. 패널 콘텐츠의 왼쪽에 탭이 있습니다.

탭 레이아웃에서 탭이 왼쪽에 나타납니다

패널 왼쪽에 표시되는 탭

Tabbed layout - tabs appear on the top

이 레이아웃을 사용하면 탭 탐색 기능이 있는 패널에 Panel Adaptive Form 구성 요소를 배치할 수 있습니다. 탭이 패널 콘텐츠 위에 있습니다.

맨 위에 탭이 있는 적응형 Forms의 탭 레이아웃

모바일 레이아웃

모바일 레이아웃을 사용하면 상대적으로 작은 화면을 사용하는 모바일 장치에서 사용자에게 친숙한 탐색을 수행할 수 있습니다. 모바일 레이아웃은 양식 탐색에 탭 또는 마법사 스타일을 사용합니다. 모바일 레이아웃을 적용하면 전체 양식에 대해 단일 레이아웃이 제공됩니다.

이 레이아웃은 탐색 막대와 탐색 메뉴를 사용하여 탐색을 제어합니다. 탐색 모음에는 양식의 next<아이콘이 표시되고previous 탐색 단계는 표시됩니다.

모바일 레이아웃은 /libs/fd/af/layouts/mobile/ 위치에서 사용할 수 있습니다. 기본적으로 다음 모바일 레이아웃은 적응형 Forms에서 사용할 수 있습니다.

응용 Forms의 모바일 레이아웃 목록

모바일 레이아웃에서 패널에 사용할 수 있는 탐색 가능 옵션을 보려면 Add navigable items of responsive layout to mobile menu 옵션을 선택합니다. 탐색 가능한 옵션은 패널에 대해 Responsive 레이아웃을 선택하는 경우에만 표시됩니다.

모바일 레이아웃을 사용할 때 양식 메뉴를 사용하여 다양한 양식 패널에 액세스할 수 있는 경우 aem6forms_form_menu 아이콘을 탭할 수 있습니다.

Layout with panel titles in the form header

이 레이아웃은 이름에서 알 수 있듯이 탐색 메뉴 및 탐색 막대와 함께 패널 제목을 표시합니다. 이 레이아웃은 탐색을 위한 다음 및 이전 아이콘도 제공합니다.

양식 헤더에 패널 제목이 있는 모바일 레이아웃

Layout without panel titles in the form header

이름에서 알 수 있듯이 이 레이아웃은 패널 제목이 없는 탐색 메뉴 및 탐색 막대만 표시합니다. 이 레이아웃은 탐색을 위한 다음 및 이전 아이콘도 제공합니다.

양식 헤더에 패널 제목이 없는 모바일 레이아웃

이 페이지에서는