대화형 테이블 위젯

Prev Next

대화형 테이블 위젯 추가 및 수정

이 글에서는 다음 내용을 알아보겠습니다...

  • 인터랙티브 테이블 위젯이란 무엇인가요?
  • 인터랙티브 테이블 위젯 사용 방법
Note

Complete this tutorial if you have not yet created a table.

인터랙티브 테이블 위젯 추가하기

'상호작용형 테이블' 위젯은 앱 편집기 도구 모음의 '삽입' 드롭다운 메뉴에서 찾을 수 있습니다.

데이터 소스

인터랙티브 테이블 위젯은 다음 소스의 데이터를 시각화하는 데 사용할 수 있습니다:

  • 변수: 앱 내의 모든 변수(변수는 객체 배열이어야 함).
  • 테이블: 기존 Tulip 테이블.
  • 테이블 쿼리: 필터링된 레코드를 반환하는 Tulip 테이블 내의 쿼리.

연결된 레코드 자리 표시자/변수

데이터 소스에 따라 인터랙티브 테이블 위젯에는 연결된 자리 표시자나 변수가 포함될 수도 있습니다. 이는 단일 객체를 담는 컨테이너를 나타내며, 인터랙티브 테이블은 객체 목록을 나타냅니다. 연결된 자리 표시자나 변수가 설정된 경우, 테이블 내에서 행을 선택하면 해당 행의 데이터가 컨테이너에 로드됩니다.

필드

필드는 선택된 Tulip 테이블 또는 테이블 쿼리의 필드, 혹은 선택된 변수의 객체 키로 나타납니다.

필드를 추가하려면 체크박스를 사용하여 드롭다운 목록에서 필드를 선택하거나 ‘모두 선택’을 클릭하십시오.

Tulip은 최적의 사용자 경험과 앱 성능을 위해 단계당 20개 이하의 필드만 표시할 것을 권장합니다.

필드 순서를 변경하려면 위젯 속성에서 레이블을 클릭한 상태로 드래그하십시오. 필드의 너비를 변경하려면 앱 편집기 또는 플레이어에서 각 필드의 선을 드래그하십시오.

텍스트 줄 바꿈

대화형 테이블 셀 내의 텍스트는 줄 바꿈이 설정될 수 있습니다. 줄 바꿈이 활성화되면 긴 텍스트로 인해 추가적인 세로 공간이 생성됩니다. 줄 바꿈이 비활성화되면 텍스트가 필드 가장자리에 가까워질 때 줄임표와 함께 잘립니다.

헤더 및 레코드 텍스트의 텍스트 줄바꿈을 켜거나 끄려면 컨텍스트 패널에서 스위치를 전환하십시오.

Text Wrap.png

선택 버튼

링크된 자리 표시자/변수가 추가된 경우, 어떤 행이 선택되었는지 더 명확하게 표시하기 위해 대화형 테이블 위젯에 선택 버튼을 추가할 수 있습니다.

필터

인터랙티브 테이블 위젯에 정적 또는 동적 필터를 추가하여 인터랙티브 테이블 위젯의 데이터를 필터링할 수 있습니다. 필터는 모든 조건 또는 임의의 조건에 일치하도록 설정할 수 있으며, 정적 값, 변수, 애플리케이션 정보 및 테이블 레코드 필드와 비교할 수 있습니다.

정렬

특정 필드를 기준으로 대화형 테이블을 정렬하려면 “정렬 기준(Sort By)” 옵션을 사용하여 오름차순 또는 내림차순(데이터 유형에 따라 다름)으로 설정할 수 있습니다. 또한 테이블 위젯의 필드별로 여러 가지 정렬 방법을 추가할 수도 있습니다.

'정렬 기준' 옵션에 이미 추가된 필드는 플레이어에서도 정렬할 수 있습니다. ^ 아이콘을 클릭하면 정렬 순서를 반대로 바꿀 수 있습니다.

Performance recommendation: Do not sort by filtered fields

In order to ensure a performant app and user experience, Tulip recommends not sorting the embedded table by any fields on which the embedded interactive table is filtered.

행 번호

'인터랙티브 테이블' 위젯에 행 인덱스를 추가하여 왼쪽에 행 수를 표시할 수 있습니다. 행 수는 위젯이 현재 표시하거나 렌더링 중인 콘텐츠에 따라 달라집니다.

페이지당 행 수

여기에서 대화형 테이블 위젯의 페이지당 행 수를 조정할 수 있습니다. 행 수를 특정 수치 이상으로 늘리면 위젯에 세로 스크롤 기능이 추가됩니다.

트리거

트리거는 인터랙티브 테이블 위젯 내에서 행이 선택될 때 실행되도록 구성할 수 있습니다. 트리거를 추가하려면 위젯 속성 메뉴에서 '트리거' 레이블 옆에 있는 + 버튼을 클릭하십시오.

트리거는 ‘연결된 레코드/변수’를 설정하고 이를 트리거 본문에서 사용함으로써 선택된 행의 정보를 활용할 수 있습니다.

글꼴 크기 및 페이지 번호 글꼴 크기

테이블에 표시되는 데이터의 글꼴 크기와 페이지 번호 레이블의 크기는 위젯 속성 메뉴에서 조정할 수 있습니다.

조건부 서식

앱 편집기에서 조건부 서식을 사용하면 대화형 테이블 위젯의 서식 규칙에 대한 인수로 테이블 필드를 선택할 수 있습니다.

목록에 규칙이 20개 미만일 경우, 조건부 서식 규칙에 ‘중복’ 옵션이 표시됩니다.

image.png

여기에서 조건부 서식에 대해 자세히 알아보세요.

추가 정보

{{snippet.원하는 정보를 찾으셨나요?}}