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

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

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

표 만들기 create-a-table

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

헤더 및 본문 셀 정보 about-header-and-body-cells

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

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

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

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

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

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

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

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

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

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

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

표의 설명을 추가하여 화면 판독기에서 해석하고 읽을 수 있도록 정보를 구성하는 방법을 설명할 수 있습니다. 설명을 추가하려면:

표 스타일 구성 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 파일의 데이터로 채울 다음 은행 거래 요약 테이블을 예로 들어 보겠습니다.

이 예제에서 요소 이름 속성은 다음과 같습니다.

다음 형식의 데이터를 포함하는 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 위치로 가리켜야 합니다. 예를 들어 적응형 양식이 http://localhost:4502/myForms/bankTransaction.html 데이터 XML 파일은 C:/myTransactions/bankSummary.xml, 다음 URL에서 데이터가 있는 테이블을 볼 수 있습니다.

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

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

XFA 양식 템플릿을 기반으로 적응형 양식을 만든 경우 AEM 컨텐츠 파인더의 데이터 모델 탭에서 XFA 요소를 사용할 수 있습니다. 테이블을 포함한 이러한 XFA 요소를 적응형 양식에 드래그하여 놓을 수 있습니다.

XFA 테이블 요소는 표 구성 요소에 매핑되고 적응형 양식에서 즉시 작동합니다. XDP 테이블의 모든 속성 및 기능은 적응형 양식으로 이동할 때 유지되며 네이티브 적응형 양식 테이블을 사용하는 것처럼 이 테이블에서 모든 작업을 수행할 수 있습니다. 예를 들어 XDP 테이블의 행이 반복 가능으로 표시된 경우 적응형 양식에서 드롭될 때도 반복됩니다.

또한 XDP 하위 양식을 끌어 놓아 테이블에 새 행을 추가할 수 있습니다. 그러나 중첩된 하위 폼을 삭제하는 것은 작동하지 않습니다.

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

주요 고려 사항 key-considerations