적응형 양식의 표 tables-in-adaptive-forms

새 적응형 양식 만들기또는 AEM Sites 페이지에 적응형 양식 추가작업을 할 때 현대적이고 확장 가능한 데이터 캡처 핵심 구성 요소를 사용하는 것이 좋습니다. 이러한 구성 요소는 적응형 양식 만들기 작업이 대폭 개선되어 우수한 사용자 경험을 보장할 수 있게 되었음을 나타냅니다. 이 문서에서는 기초 구성 요소를 사용하여 적응형 양식을 작성하는 이전 접근법에 대해 설명합니다.

표를 사용하면 복잡한 데이터를 효과적이고 단순하며 체계적으로 나타낼 수 있습니다. 사용자가 정보를 쉽게 식별하고 행 및 열의 정렬된 배열로 입력을 제공하는 데 도움이 됩니다. 금융 서비스 및 정부 조직의 양식에서는 대부분 숫자를 입력하고 계산을 수행하기 위해 큰 데이터 테이블이 필요합니다.

AEM Forms은 구성 요소 브라우저의 사이드바에 적응형 양식에서 표를 만들 수 있는 표 구성 요소를 제공합니다. 이 솔루션이 제공하는 몇 가지 주요 기능은 다음과 같습니다.

표 만들기 create-a-table

표를 만들려면 구성 요소 브라우저의 적응형 양식의 사이드 킥에서 표 구성 요소를 드래그 앤 드롭하십시오. 기본적으로 테이블에는 머리글 행을 포함하여 2개의 열과 3개의 행이 있습니다.

머리글 및 본문 셀 정보 about-header-and-body-cells

머리글 셀은 텍스트 필드입니다. 헤더의 레이블을 변경하려면 머리글 셀을 마우스 오른쪽 단추로 클릭하고 편집 ​을 클릭합니다. 편집 대화 상자에서 값 필드의 레이블을 업데이트하고 확인 ​을 클릭합니다.

기본적으로 본문 셀은 텍스트 상자입니다. 본문 셀을 숫자 상자, 날짜 선택기 또는 드롭다운 목록과 같이 사이드 킥에서 사용할 수 있는 다른 적응형 양식 구성 요소로 바꿀 수 있습니다.

예를 들어 다음 표의 첫 번째 본문 행에는 텍스트 상자, 날짜 선택기 및 드롭다운 목록 구성 요소가 셀로 포함되어 있습니다.

병합할 셀을 선택하고 마우스 오른쪽 단추를 클릭한 다음 병합 ​을 선택하여 둘 이상의 본문 셀을 병합할 수 있습니다. 또한 병합된 셀을 마우스 오른쪽 단추로 클릭하고 셀 분할 ​을 선택하여 분할할 수 있습니다.

행 및 열 추가, 삭제, 이동 add-delete-move-rows-and-columns

행이나 열을 추가 및 삭제하고 테이블에서 행을 위아래로 이동할 수 있습니다.

행이나 열을 추가 또는 삭제하거나 행을 이동하려면 행이나 열의 셀을 클릭합니다. 드롭다운 메뉴가 열 맨 위와 행 왼쪽에 나타납니다. 맨 위에 있는 메뉴는 열을 추가하거나 삭제할 수 있는 옵션을 제공하는 반면, 왼쪽의 메뉴에서는 행을 추가, 삭제 또는 이동할 수 있습니다.

행의 드롭다운 메뉴에서는 행 속성, 설정 및 스타일 지정 옵션을 편집하는 편집 작업도 제공합니다.

테이블 설명 추가 add-table-description

표에 대한 설명을 추가하여 화면 판독기에서 해석하고 읽을 수 있도록 정보가 구성되는 방식을 설명할 수 있습니다. 설명을 추가하려면 다음 작업을 수행하십시오.

테이블의 열 정렬 sortcolumnstable

적응형 양식의 테이블에서 열을 기준으로 데이터를 정렬할 수 있습니다. 열의 값을 오름차순 또는 내림차순으로 정렬할 수 있습니다.

정렬은 다음을 포함하는 테이블 열에 적용할 수 있습니다.

테이블 열에 정렬을 적용하려면 테이블 열 셀에 숫자 상자, 숫자 스텝퍼, 날짜 입력 필드, 날짜 선택기, 텍스트 또는 텍스트 상자 구성 요소가 포함되어야 합니다.

정렬을 활성화하려면

표의 열 너비 설정 set-column-width

다음 단계를 실행하여 테이블에 대한 열 너비를 설정합니다.

표 스타일 구성 configure

페이지 도구 모음의 스타일 모드를 사용하여 표의 스타일을 정의할 수 있습니다. 스타일 모드로 전환하고 표 스타일을 편집하려면 다음 단계를 수행하십시오

동적으로 행 추가 또는 삭제 add-or-delete-a-row-dynamically

테이블은 런타임 시 동적으로 행을 추가하거나 삭제할 수 있는 기본 지원을 제공합니다.

런타임 시 행을 추가하거나 삭제할 수 있는 + 및 - 단추가 표시됩니다.

테이블의 표현식 expressions-in-a-table

적응형 양식의 테이블을 사용하면 JavaScript에서 표현식을 작성하여 표나 행 표시 또는 숨기기, 모든 숫자를 추가 및 셀의 합계 표시, 셀을 활성화 또는 비활성화, 사용자 입력의 유효성 검사 등과 같은 동작을 유도할 수 있습니다. 이러한 표현식은 적응형 양식 스크립팅 모델 API를 사용합니다.

테이블 및 행은 표현식에서 반환된 값에 따라 가시성을 제어하기 위해 가시성 표현식만 지원하지만 셀은 다음 표현식을 지원합니다.

테이블 또는 행에 대한 가시성 표현식은 해당 구성 요소 편집 대화 상자의 패널 속성 탭에서 정의할 수 있습니다. 셀의 표현식은 구성 요소 편집 대화 상자의 스크립트 탭에서 정의할 수 있습니다.

적응형 양식 클래스, 이벤트, 개체 및 공용 API의 전체 목록에 대해서는 적응형 양식에 대한 JavaScript 라이브러리 API 참조를 참조하십시오.

모바일 레이아웃 mobile-layouts

적응형 양식의 표는 유동적이고 반응형 레이아웃으로 인해 일치하지 않는 경험 모바일 장치를 제공합니다. AEM Forms에서는 표에 대해 왼쪽의 머리글과 축소 가능한 열의 두 가지 유형의 모바일 레이아웃을 제공합니다.

테이블에 대한 구성 요소 편집 대화 상자의 스타일 탭에서 테이블에 대한 모바일 레이아웃을 구성할 수 있습니다.

왼쪽 머리글 headers-on-left

왼쪽 레이아웃의 머리글에서 표의 머리글은 왼쪽에 배치되고 한 셀만 머리글에 나타납니다. 이 레이아웃의 각 행은 개별 섹션으로 표시됩니다. 다음 이미지는 데스크탑의 테이블을 모바일 디바이스의 테이블과 비교합니다.

왼쪽 레이아웃에 헤더가 있는 테이블의 데스크탑 보기

왼쪽의

왼쪽 레이아웃에 헤더가 있는 테이블의 모바일 보기

축소 가능한 열 레이아웃 collapsible-columns-layout

축소 가능 열 레이아웃에서 표의 열은 장치 크기에 따라 한 개 또는 두 개의 열을 표시하도록 축소되는 반면 다른 열은 축소됩니다. 축소/확장 아이콘을 클릭하여 테이블의 다른 열을 볼 수 있습니다.

다음 이미지는 축소된 열과 확장된 열이 있는 장치에서 표가 어떻게 보이는지 비교합니다.

모바일 장치에 표시되는 열이 두 개만 있는 테이블의 축소된 열

모바일 장치에서 표의 확장된 열

테이블의 데이터 병합 merge-data-in-a-table

적응형 양식의 테이블을 사용하면 XML 파일의 데이터를 사용하여 런타임 시 테이블을 채울 수 있습니다. 데이터 XML 파일은 AEM Forms 서버가 실행 중인 시스템의 로컬 파일 시스템이나 CRX 저장소에 있을 수 있습니다.

XML 파일의 데이터로 채울 다음의 은행 거래 요약 테이블을 예로 들어 보겠습니다.

이 예제에서 Element name 속성은 다음과 같습니다.

다음 형식의 데이터가 포함된 XML 파일입니다.

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
 <typeSelect>0</typeSelect>
 <Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Purchase laptop</tableItem2>
      <type>0</type>
      <tableItem3>12000</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Transport expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2014-01-08</tableItem1>
      <tableItem2>Laser printer</tableItem2>
      <type>0</type>
      <tableItem3>500</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2014-12-08</tableItem1>
      <tableItem2>Credit card payment</tableItem2>
      <type>0</type>
      <tableItem3>300</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-06</tableItem1>
      <tableItem2>Interest earnings</tableItem2>
      <type>1</type>
      <tableItem3>12000</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Payment from a client</tableItem2>
      <type>1</type>
      <tableItem3>500</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Food expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
 </Row1>
 </data>
  </afUnboundData>
  <afBoundData>
    <data/>
  </afBoundData>
  <afBoundData/>
</afData>

샘플 XML에서 행의 데이터는 테이블의 행에 대한 요소 이름인 <Row1> 태그로 정의됩니다. <Row1> 태그 내에서 각 셀의 데이터는 <tableItem1>, <tableItem2>, <tableItem3> 및 <type>과(와) 같은 해당 요소 이름의 태그 내에 정의됩니다.

런타임 시 이 데이터를 테이블과 병합하려면 wcmmode가 비활성화된 절대 XML 위치에 테이블이 포함된 적응형 양식을 지정해야 합니다. 예를 들어 적응형 양식이 https://localhost:4502/myForms/bankTransaction.html ​에 있고 데이터 XML 파일이 C:/myTransactions/bankSummary.xml ​에 저장된 경우 다음 URL에서 데이터가 있는 테이블을 볼 수 있습니다.

https://localhost:4502/myForms/bankTransaction.html?dataRef=file:/// C:/myTransactions/bankSummary.xml&wcmmode=disabled

XDP 구성 요소 및 XSD 복합 유형 사용 use-xdp-components-and-xsd-complex-types

XFA 양식 템플릿을 기반으로 적응형 양식을 만든 경우 AEM Content Finder의 데이터 모델 탭에서 XFA 요소를 사용할 수 있습니다. 테이블을 포함한 이러한 XFA 요소를 적응형 양식으로 드래그 앤 드롭할 수 있습니다.

XFA 테이블 요소는 테이블 구성 요소에 매핑되고 적응형 양식에서 즉시 작동합니다. XDP 테이블의 모든 속성과 기능은 적응형 양식으로 이동할 때 유지되며, 기본 적응형 양식 테이블에서 수행하는 것처럼 모든 작업을 수행할 수 있습니다. 예를 들어 XDP 테이블의 행이 반복 가능으로 표시되면 적응형 양식에서도 행이 삭제될 때 반복됩니다.

또한 XDP 하위 양식을 드래그 앤 드롭하여 테이블에 새 행을 추가할 수 있습니다. 그러나 중첩된 하위 양식은 삭제할 수 없습니다.

또한 XSD 복합 유형 요소 그룹을 드래그 앤 드롭하여 테이블 행을 만들 수 있습니다. 요소를 삭제한 행 바로 아래에 새 행이 만들어집니다. XSD 복합 형식 요소를 사용하여 만든 셀은 XSD에 대한 바인딩 참조를 유지합니다. 요소를 셀에 끌어 놓아 본문 셀을 XSD 복합 유형 요소로 바꿀 수도 있습니다.

주요 고려 사항 key-considerations