page no.
- 기능 설명
- 포틀릿 레이아웃은 하나의 보고서 안에 여러 보고서를 격자(그리드) 형태로 배치하여 대시보드를 만드는 컴포넌트입니다.
각 셀에 다른 AUD 보고서를 임베드하여 한 화면에서 여러 정보를 동시에 확인할 수 있습니다. 기본 용어
용어 설명 그리드 행과 열로 나뉜 격자 구조 (예: 4×4 = 4행 4열, 총 16칸) 셀 그리드의 각 칸. (셀 하나에 보고서 하나를 배치) 포틀릿 셀에 배치된 보고서를 가리키는 말. --
주요 기능
분류 기능 그리드 구성 1×1 ~ 4×4 행/열 자유 조정, 셀 간격 조정, 행/열 추가·삭제 셀 조작 셀 병합/분할, 드래그 앤 드롭으로 위치 교체·이동, 셀 모서리 드래그로 크기 변경 보고서 배치 빈 셀의 + 버튼으로 신규 추가, 셀 메뉴의 "교체"로 다른 보고서로 변경 셀 액션 확대(전체화면), 교체(다른 보고서로), 갱신(자동 새로고침 주기), 제거 개인화 사용자별 레이아웃 저장/복원 — 같은 대시보드를 사람마다 다르게 구성 가능 모드 전환 View 모드(보기 전용) / Edit 모드(편집) 토글 자동 갱신 셀별 갱신 주기 설정 (1분 / 5분 / 10분 / 30분 / 1시간) --
- 화면 구성
포틀릿 레이아웃 컴포넌트의 전체 화면은 다음과 같이 구성됩니다.
--번호 영역 설명 ① 툴바 그리드 크기 조정, 셀 병합/분할, 개인화 저장/초기화 등 컴포넌트 전체 조작 ② 그리드 영역 셀들이 격자 형태로 배치되는 본 영역 ③ 셀 그리드의 각 칸. 보고서를 배치하는 단위 ④ 셀 메뉴 (⋮) 보고서가 배치된 셀에서 액션 메뉴(확대/교체/갱신/제거) 호출 ⑤ 드래그 셀의 크기를 리사이즈 ⑥ 개인화 배지 현재 개인화 적용 상태 표시 (개인화됨 / 기본) ⑦ 정보 표시 툴바 우측에 전체/배치/빈칸 개수 요약
- 포틀릿 레이아웃은 하나의 보고서 안에 여러 보고서를 격자(그리드) 형태로 배치하여 대시보드를 만드는 컴포넌트입니다.
- 사용 방법
- 포틀릿 레이아웃 컴포넌트 배치
- AUD Designer를 엽니다.
-- - 상단 도구 패널에서 UI Bot > Container > External Component를 클릭하면 화면에 External Component가 배치됩니다.
-- - 배치된 External Component를 오른쪽 클릭하여 Context Menu를 열고 컴포넌트 선택 메뉴를 클릭합니다.
-- 컴포넌트 선택 팝업의 목록에서 포틀릿 레이아웃을 선택합니다. 원하는 레이아웃 형태(행/열 등)로 옵션을 지정한 뒤 확인 버튼을 누르면, 배치된 External Component가 포틀릿 레이아웃 컴포넌트로 전환됩니다.
주요 옵션그룹 옵션 기본 값 설명 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 연동용으로, 일반 사용 시에는 기본값 그대로 두면 됩니다.
--- AUD Designer 상단의 실행 버튼을 누르면 포틀릿 레이아웃 컴포넌트가 활성화되어 사용할 수 있습니다.
-- - 보고서를 저장합니다. AUD Designer의 저장 기능으로 보고서를 저장해야 이후 개인화 저장 기능이 정상 동작합니다.
- AUD Designer를 엽니다.
- 그리드 크기 조정
- Edit 모드 상단 툴바에서 그리드 크기를 조정할 수 있습니다.
툴바 구성: 그리드 피커 · 행 추가 · 행 삭제 · 열 추가 · 열 삭제 · 셀 병합 · 셀 분할 · 초기화 · 저장 · 기본 · (우측) 전체 / 배치 / 빈칸 정보
도구 동작 그리드 피커 (예: 4 × 4)클릭하면 격자 미리보기가 열려 행×열을 시각적으로 선택 행 추가 / 행 삭제 행 단위로 추가하거나 마지막 행 삭제 열 추가 / 열 삭제 열 단위로 추가하거나 마지막 열 삭제 초기화 저장된 개인화를 지우고 원본 보고서의 레이아웃으로 복원 저장 현재 레이아웃을 사용자 개인화로 저장 기본 (배지) 현재 원본 레이아웃을 사용 중일 때 표시. 개인화 저장 시 "개인화됨"으로 변경 (우측 정보 표시) 전체 N칸 · 배치 N개 · 빈칸 N개— 현재 그리드 상태 요약--
- Edit 모드 상단 툴바에서 그리드 크기를 조정할 수 있습니다.
- 포틀릿 레이아웃 컴포넌트 내 셀에 보고서 배치
- 빈 셀 가운데의 + 버튼을 클릭합니다.
- 보고서 선택 팝업이 열립니다.
- 좌측 트리에서 폴더를 펼쳐 원하는 보고서를 선택합니다 (상단 검색창으로 빠르게 찾을 수 있습니다).
-- - 우측 영역에서 미리보기를 확인한 뒤 우상단 선택 버튼을 클릭합니다.
- 셀에 선택한 보고서가 표시됩니다.
- 빈 셀 가운데의 + 버튼을 클릭합니다.
- 셀 병합 / 분할
- 툴바의 셀 병합 / 셀 분할 버튼을 사용합니다.
- 병합할 셀들을 Ctrl + 클릭(또는 드래그)으로 다중 선택합니다.
- 선택한 셀이 사각형 영역을 이루면 툴바의 셀 병합 버튼이 활성화되며, 셀 병합 버튼을 클릭하면 하나의 큰 셀로 합쳐집니다.
- 병합된 셀을 선택한 후 셀 분할 버튼을 누르면 원래 셀들로 다시 나뉩니다.
※ 참고: 이미 병합된 셀은 다른 셀(또는 다른 병합된 셀)과 다시 병합할 수 없습니다. 병합된 셀의 영역을 더 키우고 싶다면 셀 크기 변경(리사이즈) 기능으로 영역을 확장하세요.
- 병합할 셀들을 Ctrl + 클릭(또는 드래그)으로 다중 선택합니다.
- 툴바의 셀 병합 / 셀 분할 버튼을 사용합니다.
- 셀 이동 / 교체 (드래그 앤 드롭)
- 셀을 마우스로 끌어 다른 위치에 놓을 수 있습니다.
- 옮기려는 셀을 마우스로 누른 채 드래그합니다.
- 원하는 위치의 셀에 놓으면 동작이 결정됩니다.
- 빈 셀에 놓은 경우: 셀이 그 위치로 이동합니다.
- 다른 보고서가 있는 셀에 놓은 경우: 두 셀의 위치가 서로 교체됩니다. 이때 교체 확인 창이 표시되며, 확인을 눌러야 적용됩니다.
- 빈 셀에 놓은 경우: 셀이 그 위치로 이동합니다.
- 옮기려는 셀을 마우스로 누른 채 드래그합니다.
- 셀을 마우스로 끌어 다른 위치에 놓을 수 있습니다.
- 셀 크기 변경 (리사이즈)
셀의 오른쪽 하단 모서리를 드래그하여 크기를 변경할 수 있습니다.
- 크기를 바꾸려는 셀의 오른쪽 하단 모서리에 마우스를 올립니다.
- 마우스를 누른 채 원하는 크기까지 드래그합니다 (드래그 중 영역이 미리보기로 표시됨).
- 마우스를 놓으면 셀이 드래그한 영역만큼 확장되어 인접 셀들과 자동으로 병합됩니다.
- 다시 분할하려면 해당 셀을 선택한 뒤 툴바의 셀 분할 버튼을 누릅니다.
- 크기를 바꾸려는 셀의 오른쪽 하단 모서리에 마우스를 올립니다.
- 셀 메뉴 (⋮ 버튼)
보고서가 배치된 셀의 우상단에 나타나는 ⋮ 버튼을 클릭하면 액션 메뉴가 표시됩니다. 빈 셀에는 ⋮ 버튼이 표시되지 않으며, 보고서를 먼저 배치(2-3)해야 사용할 수 있습니다.
메뉴 동작 확대 포틀릿을 전체화면 모달로 크게 보기 교체 다른 보고서로 교체 (보고서 선택 팝업) 갱신 자동 새로고침 주기 설정 (중지 → 1분 → 5분 → 10분 → 30분 → 1시간 순환) 제거 셀에서 보고서 제거 (셀은 빈 상태로 남음) --
- 보고서 선택 팝업
빈 셀의+ 버튼이나 셀 메뉴의 교체를 클릭하면 동일한 보고서 선택 팝업이 열립니다.
--팝업 구성
영역 설명 헤더 (상단) 팝업 제목 · 우측에 선택 버튼과 닫기(✕) 버튼 좌측 패널 검색창 + 폴더/보고서 트리 우측 패널 선택한 보고서의 미리보기 --
- 사용 방법
- 좌측 트리에서 폴더를 펼치고 원하는 보고서를 클릭합니다.
- 트리 상단의 검색창에 보고서명을 입력하면 빠르게 찾을 수 있습니다.
- 선택한 보고서의 미리보기가 우측 영역에 표시됩니다.
- 우상단 선택 버튼을 클릭하면 셀에 적용됩니다 (보고서를 선택하기 전에는 비활성화 상태).
- 닫기(✕) 버튼이나 팝업 밖을 클릭하면 적용 없이 닫힙니다.
- 참고사항
- 목록에는 본인 계정에 읽기 권한이 있는 SC 타입 보고서만 표시됩니다
- 개인화 — 나만의 레이아웃 저장
- 같은 대시보드를 사람마다 다르게 구성할 수 있습니다.
사전 조건: 개인화 저장은 보고서가 먼저 저장된 상태에서만 가능합니다. 새로 만들어 저장하지 않은 보고서에서는 개인화 저장이 동작하지 않으므로, AUD Designer에서 보고서를 먼저 저장한 후 사용하세요.- View 모드에서 하단 레이아웃 편집 클릭 → Edit 모드 진입
- 자유롭게 셀 이동, 보고서 교체, 크기 조정
- 툴바의 저장 버튼 클릭 → 자신의 레이아웃이 DB에 저장됨
- 다음 로그인 시 저장된 개인 레이아웃이 자동으로 로드됨
- 툴바의 초기화 버튼 → 기본 레이아웃(원본)으로 되돌리기
- View 모드에서 하단 레이아웃 편집 클릭 → Edit 모드 진입
- 상단 배지로 현재 상태 확인:
- ● 개인화됨 (파란 배지) — 본인의 저장된 레이아웃 사용 중
- ○ 기본 (회색 배지) — 원본 레이아웃 사용 중 (저장 이력 없음)
- 같은 대시보드를 사람마다 다르게 구성할 수 있습니다.
- View 모드 / Edit 모드
일반 사용자가 보고서를 열었을 때는 View 모드(보기 전용)로 표시됩니다. 개인화나 추가 편집이 필요할 때 Edit 모드로 전환하여 사용합니다.
모드 진입 방법 동작 View 모드 보고서를 열었을 때 기본 모드 보기 전용. 툴바와 셀 메뉴 등이 숨겨집니다. 화면 하단에 마우스를 올리면 "레이아웃 편집" 버튼이 나타납니다 Edit 모드 View 모드에서 "레이아웃 편집" 버튼 클릭 편집 가능. 툴바와 셀 메뉴가 표시되어 그리드/셀 조작이 가능합니다 --
- 포틀릿 레이아웃 컴포넌트 배치
|
|
| 기능 정보 |
|
|
|
|
|
|
|
|---|---|---|---|---|---|---|---|
| 시작 버전 정보 |
| ||||||
|
|