[AEM Forms]{class="badge positive" title="AEM Forms에 적용됩니다)."}

대화형 통신 편집기에서 동적 테이블 만들기

개요

대화형 통신 편집기에서 다이내믹 테이블을 제공합니다
작성자가 런타임 시 구조화된 데이터 소스에서 콘텐츠가 자동으로 채워지는 데이터 기반 테이블을 만들 수 있는 기능입니다.

행을 수동으로 만들어야 하는 정적 테이블과 달리 동적 테이블은 바인딩된 데이터 소스에서 반환된 레코드를 기반으로 자동으로 확장되거나 축소됩니다. 따라서 청구 명세서, 거래 내역, 제품 목록 또는 정책 일정과 같은 시나리오에 유용합니다.

이 문서에서는 데이터 바인딩을 사용하여 동적 테이블을 삽입 및 구성하고, 다중 페이지 테이블 흐름을 관리하고, 행 수를 확인하는 방법에 대해 설명합니다.

동적 표 삽입

  1. 대화형 통신 편집기​를 엽니다.
  2. 구성 요소 패널​에서 테이블 구성 요소​를
    캔버스.
  3. 대화 상자에서 열 개수초기 행​을 지정하고 헤더 행​이 포함되어 있는지 확인한 다음 [확인]을 클릭하여 테이블을 만듭니다.

동적 테이블에 데이터 바인딩

동적 테이블은 반복 가능한 데이터 소스에 바인딩하여 행을 자동으로 채웁니다.

IC 문서 찾기

데이터를 테이블에 바인딩하려면 다음을 수행합니다.

  1. 계층 패널에서 테이블 행​을(를) 선택합니다.

  2. 사이드 패널에서 데이터 바인딩​을 엽니다.

  3. 선택한 데이터 스키마가 배열 유형인지 확인합니다.

  4. 배열 데이터 스키마를 선택한 테이블 행으로 끌어다 놓아 데이터를 바인딩합니다.

페이지 흐름 활성화

동적 테이블은 단일 페이지 이상으로 확장될 수 있습니다. 표를 늘려 페이지 간에 계속 진행하려면 흐르는 콘텐츠 컨테이너에 배치하십시오.

IC 문서 찾기

페이지 흐름을 활성화하려면:

  1. 테이블의 상위 레이아웃 컨테이너​를 선택합니다.

  2. 속성 패널을 열고 콘텐츠 형식을 흐름(으)로 설정합니다.

  3. 테이블을 선택하고, 이 테이블이 유동된 콘텐츠를 지원하도록 구성되었는지 확인하십시오.

  4. 통신을 미리 보고 추가 행이 렌더링될 때 테이블이 다음 페이지로 계속되는지 확인합니다.

표 내에서 페이지 나누기 허용

IC 문서 찾기

테이블이 페이지 간에 올바르게 분할되도록 하려면 다음 작업을 수행하십시오.

  1. 캔버스에서 테이블​을(를) 선택하십시오.
  2. 속성 패널을 엽니다.
  3. 콘텐츠 내에서 페이지 나누기 허용​을 사용합니다.

활성화되면 테이블은 페이지 끝에서 자동으로 중단되고 헤더 행이 반복되는 다음 페이지에서 계속됩니다.

행 유효성 검사 구성

동적 표를 렌더링할 수 있는 행 수를 제어할 수 있습니다.

  • 최소 행 수: 테이블이 지정된 행 수 이상을 렌더링하는지 확인합니다.
  • 최대 행 수: 데이터 원본에서 렌더링되는 총 행을 제한합니다.
  • 초기 행 수: 디자인 타임 미리 보기 중에 편집기에 표시되는 행 수를 정의합니다.
NOTE
초기 행​을(를) 3-5 정도로 설정하면 런타임 데이터가 적용되기 전에 보다 사실적인 레이아웃 미리 보기가 제공됩니다.

주요 기능

  • 열 데이터 바인딩: 각 열을 데이터 모델의 필드에 바인딩합니다.

  • 유입된 콘텐츠: 표를 확장하고 페이지 간에 계속할 수 있습니다.

  • 페이지 나누기 지원: 테이블 내에서 행 수준 페이지 나누기를 활성화합니다.

  • 최소 행: 최소 행 수가 렌더링되도록 합니다.

  • 최대 행 수: 데이터 소스에서 렌더링된 총 행을 제한합니다.

  • 초기 행: 디자인 타임 미리 보기 중에 표시되는 기본 행을 정의합니다.

대화형 통신 편집기의 동적 테이블 기능을 사용하면 작성자가 사용자 지정 코드를 작성하지 않고도 데이터 기반의 유연한 테이블을 만들 수 있습니다. 작성자는 테이블을 데이터 배열에 바인딩하고, 흐르는 콘텐츠를 활성화하고, 페이지 나누기를 허용하고, 행 유효성 검사를 구성함으로써 일관된 레이아웃을 유지하면서 다양한 데이터 볼륨에 원활하게 적응하는 구조화된 통신을 생성할 수 있습니다.

recommendation-more-help
experience-manager-cloud-service-help-main-toc