(BCRM#G0936) 포틀릿 레이아웃 컴포넌트 사용 가이드

page no. 138182659

기능 설명

포틀릿 레이아웃은 하나의 보고서 안에 여러 보고서를 격자(그리드) 형태로 배치하여 대시보드를 만드는 컴포넌트입니다.
각 셀에 다른 AUD 보고서를 임베드하여 한 화면에서 여러 정보를 동시에 확인할 수 있습니다.

기본 용어

용어	설명
그리드	행과 열로 나뉜 격자 구조 (예: 4×4 = 4행 4열, 총 16칸)
셀	그리드의 각 칸. (셀 하나에 보고서 하나를 배치)
포틀릿	셀에 배치된 보고서를 가리키는 말.

--

주요 기능

분류	기능
그리드 구성	1×1 ~ 4×4 행/열 자유 조정, 셀 간격 조정, 행/열 추가·삭제
셀 조작	셀 병합/분할, 드래그 앤 드롭으로 위치 교체·이동, 셀 모서리 드래그로 크기 변경
보고서 배치	빈 셀의 + 버튼으로 신규 추가, 셀 메뉴의 "교체"로 다른 보고서로 변경
셀 액션	확대(전체화면), 교체(다른 보고서로), 갱신(자동 새로고침 주기), 제거
개인화	사용자별 레이아웃 저장/복원 — 같은 대시보드를 사람마다 다르게 구성 가능
모드 전환	View 모드(보기 전용) / Edit 모드(편집) 토글
자동 갱신	셀별 갱신 주기 설정 (1분 / 5분 / 10분 / 30분 / 1시간)

--

주요 옵션

그룹	옵션	기본 값	설명
Layout	Columns	4	초기 그리드 열 수 (1~4)
Layout	Rows	4	초기 그리드 행 수 (1~4)
Layout	Gap	10	셀 간격 (px)
Interaction	EditMode	true	편집 모드 활성화
Interaction	ShowToolbar	true	상단 툴바 표시
Interaction	ShowCloseButton	true	셀 제거 버튼 표시
Interaction	AutoSaveDelay	1	자동 저장 지연 (초)

※ Data 그룹 옵션(GridName, CardListName, IdField~ContentField)은 외부 DataGrid 연동용으로, 일반 사용 시에는 기본값 그대로 두면 됩니다.
--

사용 방법
1. 포틀릿 레이아웃 컴포넌트 배치
  1. AUD Designer를 엽니다.
  2. 상단 도구 패널에서 UI Bot > Container > External Component를 클릭하면 화면에 External Component가 배치됩니다.
  3. 배치된 External Component를 오른쪽 클릭하여 Context Menu를 열고 컴포넌트 선택 메뉴를 클릭합니다.
  4. 컴포넌트 선택 팝업의 목록에서 포틀릿 레이아웃을 선택합니다. 원하는 레이아웃 형태(행/열 등)로 옵션을 지정한 뒤 확인 버튼을 누르면, 배치된 External Component가 포틀릿 레이아웃 컴포넌트로 전환됩니다.
  5. AUD Designer 상단의 실행 버튼을 누르면 포틀릿 레이아웃 컴포넌트가 활성화되어 사용할 수 있습니다.
2. 포틀릿 레이아웃 컴포넌트 내 셀에 보고서 배치
  1. 빈 셀 가운데의 + 버튼을 클릭합니다.
  2. 보고서 선택 팝업이 열립니다.
  3. 좌측 트리에서 폴더를 펼쳐 원하는 보고서를 선택합니다 (상단 검색창으로 빠르게 찾을 수 있습니다).
  4. 우측 영역에서 미리보기를 확인한 뒤 우상단 선택 버튼을 클릭합니다.
  5. 셀에 선택한 보고서가 표시됩니다.
3. 그리드 크기 조정
  1. Edit 모드 상단 툴바에서 그리드 크기를 조정할 수 있습니다.
  2. 툴바 구성: 그리드 피커 · 행 추가 · 행 삭제 · 열 추가 · 열 삭제 · 셀 병합 · 셀 분할 · 초기화 · 저장 · 기본 · (우측) 전체 / 배치 / 빈칸 정보

참고 사항

주의 사항

변경 사항

변경 전 변경 후 릴리즈 번호

기능 정보	API Open	UI Open	Read Only	Not Use	Hidden	Not Recommend	해당 없음
시작 버전 정보

샘플 정보

샘플 URL :
샘플 파일

	파일	변경됨

공유된 파일이 아직 없습니다.

공간 바로가기

페이지 트리