콘텐츠로 이동

Entities table

Entities table 위젯

Entities table 위젯은 엔티티(HMI 장치, 자산, 고객 등 모든 엔티티 유형) 목록을 최신 속성 값, 텔레메트리, 엔티티 필드와 함께 보여 줍니다. 실시간 갱신, 열 정렬, 페이지 나누기, 전체 텍스트 검색, 열 구성을 지원해 시스템 개요, 자산 관리, HMI 장치 모니터링 대시보드에 알맞습니다.

  1. 대시보드를 수정 모드로 엽니다. 위쪽 툴바의 위젯 추가를 클릭하거나, 빈 대시보드 가운데의 위젯 추가 아이콘을 클릭합니다.
  2. 위젯 번들 선택 대화상자에서 Tables를 찾아 클릭합니다.
  3. Entities table 위젯을 선택합니다.
  4. 데이터 소스, 열, 모양을 설정한 다음 추가를 클릭합니다.

위젯 설정 대화상자에는 기본 탭과 고급 탭이 있습니다. 기본 탭은 설정을 데이터 소스, 열, 카드 모양, 액션으로 나눕니다.

표에 쓸 엔티티 데이터의 소스를 선택합니다.

  • 장치 — HMI 장치 하나의 데이터를 표시합니다.
  • 개체 별명 — 엔티티 별칭에 맞는 모든 엔티티의 데이터를 표시합니다. 여러 HMI 장치, 자산 등 다른 엔티티 유형을 한 번에 모니터링할 때 씁니다.

열마다 데이터 키 하나를 연결합니다. 데이터 키는 엔티티 필드(예: name, type), 속성, 텔레메트리 키입니다. 열마다 다음을 설정합니다.

필드설명
키데이터 키 이름(예: temperature, active, name).
라벨열 머리글 글자. 기본값은 키 이름입니다.
단위값 뒤에 표시하는 단위 접미사(선택 사항, 예: °C, %).
소수점숫자 값의 소수 자릿수.

열 추가를 클릭해 열을 추가합니다. 열 행 오른쪽의 핸들을 끌어 순서를 바꿉니다.

열 행의 톱니바퀴 아이콘을 클릭하면 데이터 키 구성 대화상자가 열립니다. 탭은 일반과 고급 두 가지입니다.

일반 탭:

설정설명
키표시할 데이터 키.
라벨열 머리글 라벨.
단위단위 접미사.
소수점숫자 값의 소수 자릿수.
집합키에 적용할 집계: 없음, 최소, 최대, 평균, 합계, 숫자. 없음이면 최신 값을 표시합니다.
데이터 후처리 기능 사용표시 전에 원시 값에 적용하는 JavaScript 변환.

고급 탭:

설정설명
사용자 지정 헤더 제목표에 표시되는 열 머리글 글자를 바꿉니다.
열 너비(px 또는 %)픽셀이나 백분율로 정하는 고정 너비(예: 120px, 20%). 기본값 0px는 자동 너비입니다.
기본 열 표시 여부표시 — 항상 보입니다. 숨김 — 기본으로 표시하지 않습니다. 모바일 모드에서 숨김 — 데스크톱에서는 보이고 모바일에서는 숨깁니다.
‘표시할 열’에서 열 선택사용자가 표시할 열 패널에서 이 열을 켜고 끌 수 있는지 정합니다. 끄면 사용자가 이 열을 숨길 수 없습니다.
Include column in export이 열을 CSV/Excel 내보내기 결과에 포함할지 정합니다.
정렬 비활성화이 열로 정렬하지 못하게 합니다. 내용이 복잡하거나 숫자가 아닌 열에 유용합니다.
셀 스타일 함수 사용셀마다 스타일을 정하는 JavaScript 함수. 시그니처: f(value, entity, ctx). CSS 스타일 객체(예: { color: 'red', fontWeight: 'bold' })를 돌려줘야 합니다.
셀 내용 함수 사용셀 내용을 직접 그리는 JavaScript 함수. 시그니처: f(value, entity, ctx). 형식화한 값이나 HTML 문자열을 돌려줍니다. 데이터를 내보낼 때도 같은 로직을 적용하려면 Use cell content function on export를 켭니다.

페이지네이션 설정은 위젯 설정 대화상자의 고급 탭에 있습니다.

설정설명
페이지네이션 표시표 아래에 페이지 이동 컨트롤을 표시합니다. 기본으로 켜져 있습니다.
페이지 단계 설정페이지 크기 드롭다운에서 고를 수 있는 페이지 크기(예: 10, 25, 50).
기본 페이지 크기처음 불러올 때 페이지마다 보이는 행 수.
설정설명
Card 제목위젯 헤더에 표시되는 제목 글자.
카드 아이콘제목 옆에 표시하는 아이콘(선택 사항).
카드 버튼 표시툴바 버튼: 검색 — 엔티티 전체 텍스트 필터, 표시할 열 — 열을 켜고 끄는 패널, Data export — CSV/XLS 내보내기, 전체화면 — 전체 화면 보기.
글자 색위젯 안의 모든 글자에 적용하는 색.
배경 색위젯 카드 배경색.

Entities table 위젯에서 쓸 수 있는 액션 소스는 다음과 같습니다.

액션 소스실행 시점
동작 셀 버튼행마다 끝에 붙는 버튼.
셀 클릭 시사용자가 특정 셀을 클릭할 때.
행 클릭 시사용자가 행의 아무 곳이나 클릭할 때.
행 더블 클릭 시사용자가 행을 두 번 클릭할 때.
위젯 헤더 버튼위젯 헤더의 버튼. 엔티티 추가·삭제 같은 전체 작업에 씁니다.

동작 유형과 설정 옵션 전체 목록은 위젯 동작을 참고하세요.

예: 상태, 온도, 습도를 표시하는 HMI 장치 목록

섹션 제목: “예: 상태, 온도, 습도를 표시하는 HMI 장치 목록”

목표: 모든 HMI 장치를 이름, 유형, 연결 상태, 현재 온도·습도 값과 함께 표시합니다. Active 열에는 색 있는 원이 표시됩니다. 연결된 HMI 장치는 초록, 연결이 끊긴 HMI 장치는 빨강입니다.

사전 준비

temperature와 humidity를 텔레메트리 키로 보내는 HMI 장치를 몇 개 준비합니다. active 연결 상태는 MX On Cloud가 자동으로 제공합니다.

1단계. 위젯 추가

대시보드를 수정 모드로 엽니다. 위젯 추가를 클릭하고 Tables 번들을 선택한 다음 Entities table을 고릅니다.

2단계. 데이터 소스 설정

데이터 소스 영역에서 개체 별명을 선택합니다. 모든 HMI 장치를 표시할 별칭을 고르거나 만듭니다.

  • 별칭: All HMI Devices
  • 필터 유형: Entity list(개체 목록)
  • 유형: HMI Device(장치)

3단계. 열 설정

다음 열마다 열 추가를 클릭합니다.

키라벨단위소수점
nameName——
typeType——
activeActive—0
temperatureTemperature°C1
humidityHumidity%1

4단계. “active” 열 꾸미기

active 열 행의 톱니바퀴 아이콘을 클릭해 데이터 키 구성 대화상자를 엽니다. 고급 탭으로 바꿉니다.

“셀 스타일 함수 사용”을 켜고 다음을 입력합니다.

var color;
if (value === 'true') {
color = 'green';
} else {
color = 'red';
}
return {
color: color,
fontSize: '18px'
};

“셀 내용 함수 사용”을 켜고 다음을 입력합니다.

value = '⬤';
return value;

원시 true/false 글자 대신 큰 색 원(⬤)이 표시됩니다.

5단계. 카드 제목 설정

카드 모양 영역에서 Card 제목을 켜고 다음을 입력합니다.

My HMI Devices

글꼴 크기를 18 px로 정합니다.

6단계. 저장

추가를 클릭해 위젯을 대시보드에 놓습니다. 필요하면 크기와 위치를 조정한 다음 대시보드 툴바의 저장을 클릭합니다.

결과

Entities table에 HMI 장치 목록이 실시간으로 표시됩니다.

  • Active 열의 색 원(🟢 초록 = 활성, 🔴 빨강 = 비활성)
  • 현재 Temperature·Humidity 값. 새 텔레메트리가 들어오면 실시간으로 갱신됩니다.

일부 엔티티가 표에 없음

원인해결 방법
엔티티가 1024개를 넘는데 페이지네이션 표시가 꺼져 있음고급 탭에서 페이지네이션 표시를 다시 켭니다. 꺼져 있으면 표가 1024행에서 멈추고, 나머지가 빠졌다는 표시도 없습니다.
엔티티 별칭이 예상한 엔티티를 모두 찾지 못함대시보드에서 개체 별명을 열고 필터가 전체 집합을 돌려주는지 확인합니다.
검색 필터가 아직 적용되어 있음툴바의 검색 필드를 비웁니다. 이 필드는 현재 표시된 행을 거릅니다.

위젯을 그리는 데 오래 걸림

원인해결 방법
페이지네이션 표시가 꺼져 있음고급 탭에서 페이지네이션 표시를 다시 켭니다. 꺼져 있으면 위젯이 한 페이지 대신 최대 1024행을 한꺼번에 만듭니다.
열이 너무 많음열이 하나 늘 때마다 모든 행에 셀이 하나씩 늘어납니다. 넓은 표를 좁은 표 여러 개로 나누거나, 처음에 필요 없는 열은 기본 열 표시 여부를 숨김으로 정합니다.
엔티티 별칭이 너무 많은 엔티티로 결정됨별칭 필터를 좁혀 위젯이 구독하는 엔티티를 줄입니다.