마스터 그리드의 항목을 더블 클릭하면 별도로 구성해놓은 폼을 팝업창으로 띄워 상세 데이터를 즉각적으로 탐색하고 분석할 수 있는 마스터-디테일 (Master-Detail) 팝업 레이아웃입니다.
레이아웃 구조
적용 사례
- [유통] 주문 및 배송 관제
* Master : 주문 정보(주문번호, 주문일시, 고객명, 총 결제금액, 주문상태) 조회
* Detail : 선택한 주문의 주문 상세(개별 상품 리스트, 배송지 주소, 택배사 송장 추적 정보, CS 상담 이력) 조회 - [제조] 장비 유지보수 및 자산 관리
* Master : 설비 정보(설비명, 설비위치, 현재 가동률, 최근 점검일, 상태) 조회
* Detail : 선택한 설비의 설비 제원 및 이력(상세 사양, 부품 교체 이려그 수리 매뉴얼, 센서 데이터) 조회 - [공공] 인사 정보 및 역량 관리
* Master : 직원 명부(사번, 설명, 부서, 직급, 근태 현황, 성과 등급) 조회
* Detail : 선택한 직원의 인사 카드(상세 경력 사항, 보유 자격증 목록, 연도별 고과 점수, 교육 이수 현황, 연봉 변동 추이) 조회
레이아웃 활용 팁
상세 정보 팝업 화면 구현
팝업창으로 보여줄 화면을 별도의 폼(Form)을 추가하여 구현합니다.
- 마스터 그리드와 디테일 그리드 연동
- LIST 폼의 마스터 그리드와 DETAIL 폼의 디테일 그리드의 데이터가 연동되게 설정하세요.
- 마스터 그리드에서 선택한 값을 변수로 설정하여 디테일 그리드의 조회조건으로 설정하면 마스터-디테일 조회 화면 구현이 가능합니다.
데이터 라벨과 그리드 연동
상세 화면에 배치된 라벨과 디테일 그리드를 연결하여 사용자가 원하는 위치에서 자유롭게 데이터가 보여지도록 설정하세요.
- 데이터 라벨에 디자인 속성을 설정하고, 디테일 그리드의 Visible 속성을 비활성화하면 사용자 관점에서 보기 편한 조회 화면이 만들어집니다.
- Add-In 컴포넌트를 활용한 텍스트 데이터 시각화
- Add-In 컴포넌트를 배치하여 텍스트 데이터에 서식이 설정된 형태로 시각화할 수 있습니다.
- 일반 텍스트 형식이 아닌, HTML 태그가 설정된 값이 저장됩니다. 데이터의 길이가 길기 때문에 DB에서 해당 컬럼의 데이터 포맷을 Text로 설정하는 것을 추천합니다.
KPI 카드 구현
핵심 지표를 수직으로 쌓아 올린 형태로 사용자가 화면에 진입했을 때 가장 먼저 시선이 머무는 F-자형 시선 흐름의 시작점입니다.
전체 매출액과 관리 항목별 비중을 직관적으로 인지시키는 역할을 합니다.
- 지리적 히트맵/심볼 맵 구현
- 가장 넓은 면적을 차지하는 메인 캔버스로 위치 기반 데이터를 시각화하는 중심 축을 구현해 보세요.
- 텍스트 데이터보다 공간적 분포(지역별 매출 비중)를 즉각적으로 보여줍니다.
피벗 매트릭스 그리드
엑셀을 활용하여 행과 열의 교차 지점에 수치를 표기하는 표 형태의 레이아웃을 구성해 보세요.
- 다차원 데이터를 체계적으로 요약하여 보여줍니다.
- 동적 데이터/랭킹 리스트
- 상단 영역의 선택 결과에 따라 실시간으로 업데이트되는 동적 목록을 구성해 보세요.
- 최종적으로 사용자가 확인해야 할 세부 항목을 보여줄 수 있습니다.