마스터 그리드의 항목을 더블 클릭하면 별도로 구성해놓은 폼을 팝업창으로 띄워 상세 데이터를 즉각적으로 탐색하고 분석할 수 있는 마스터-디테일 (Master-Detail) 팝업 레이아웃입니다.
레이아웃 구조
적용 사례
- [유통] 주문 및 배송 관제
* Master : 주문 정보(주문번호, 주문일시, 고객명, 총 결제금액, 주문상태) 조회
* Detail : 선택한 주문의 주문 상세(개별 상품 리스트, 배송지 주소, 택배사 송장 추적 정보, CS 상담 이력) 조회 - [제조] 장비 유지보수 및 자산 관리
* Master : 설비 정보(설비명, 설비위치, 현재 가동률, 최근 점검일, 상태) 조회
* Detail : 선택한 설비의 설비 제원 및 이력(상세 사양, 부품 교체 이려그 수리 매뉴얼, 센서 데이터) 조회 - [공공] 인사 정보 및 역량 관리
* Master : 직원 명부(사번, 설명, 부서, 직급, 근태 현황, 성과 등급) 조회
* Detail : 선택한 직원의 인사 카드(상세 경력 사항, 보유 자격증 목록, 연도별 고과 점수, 교육 이수 현황, 연봉 변동 추이) 조회
레이아웃 활용 팁
상세 정보 팝업 화면 구현
팝업창으로 보여줄 화면을 별도의 폼(Form)을 추가하여 구현합니다.
- 메인 마스터와 디테일
- 좌측 패널에서 특정 요약 항목을 클릭하면, 우츨 영역의 데이터가 해당 조건에 맞춰 즉시 재구성되도록 하세요.
예) 시트1은 좌측 마스터 그리드 영역에, 시트2는 우측 요약 정보 영역에 독립적으로 구성 - 콤보박스나 필터 조건 조작할 필요 없이, 마우스 클릭으로 직관적인 데이터 탐색 동선을 최적화할 수 있습니다.
- 좌측 패널에서 특정 요약 항목을 클릭하면, 우츨 영역의 데이터가 해당 조건에 맞춰 즉시 재구성되도록 하세요.
이미지 배치를 활용한 지리적/공간적 시각화 (우측 상단)
우측 상단의 이미지 영역에는 직관적인 그래픽 이미지를 배치하여 활용하세요.
예) 대한민국 지도, 관할 구역 도면 등 소속기관별 현황이나 시설물 위치 등 지리적인 분포가 중요한 데이터를 지도 이미지 위에 배치한 레이블 컴포넌트로 출력하여 입체적이고 직관적인 데이터 분석을 지원합니다. 마스터 그리드와 디테일 그리드 연동 - LIST 폼의 마스터 그리드와 DETAIL 폼의 디테일 그리드의 데이터가 연동되게 설정하세요.
- 마스터 그리드에서 선택한 값을 변수로 설정하여 디테일 그리드의 조회조건으로 설정하면 마스터-디테일 조회 화면 구현이 가능합니다.
데이터 라벨과 그리드 연동
상세 화면에 배치된 라벨과 디테일 그리드를 연결하여 사용자가 원하는 위치에서 자유롭게 데이터가 보여지도록 설정하세요.
- 데이터 라벨에 디자인 속성을 설정하고, 디테일 그리드의 Visible 속성을 비활성화하면 사용자 관점에서 보기 편한 조회 화면이 만들어집니다.
- Chart-EX 컴포넌트를 활용한 고도화된 차트 분석 (우측 하단)
- 우측 하단 영역에는 Chart-EX(차트 컴포넌트)를 배치하여 시각화 분석의 깊이를 더해 보세요.
- 기본적인 막대/선 차트를 넘어, 히트맵(Heatmap)이나 캔들 차트(Candlestick)와 같은 고도화된 하이 차트(High Chart)를 적용하여 다차원 데이터의 밀도,
이상치 분포 또는 시계열 변동 추이를 한눈에 파악할 수 있습니다.