ICE의 BackOffice Builder를 이용하여 기능을 구현하기 위해서는 데이터 관리에서 기본적으로 필요한 CRUD(Create, Retrieve, Update, Delete)를 구현해야 한다. 이때, 대상이되는 데이터의 유형에 따라서 몇 가지 패턴으로 CRUD를 구성하면 UX의 편의성과 통일성을 제공할 수 있다.
본 문서에서는 ICE4에서 제공하는 기능들을 이용하여 구현 가능한 패턴들에 대한 구현 방안을 제공한다.
Example. Table-Modal
https://dev-admin.justten.io/admin/boTesting/pattern/tableModal
테이블-모달 패턴은 백오피스에서 가장 많이 사용 되는 패턴 중 하나이다. 테이블 리스트 페이지에서 컨텐츠를 생성하고, 확인하고 수정하기 위한 모든 링크를 Modal 타입으로 만들어 보자.
1. Create Table
ICE4 - BackOffice Builder에서 테이블 컴포넌트를 추가하자. ( 참고 : 셋팅 옵션 가이드 Table List )
TIP Basic Setting
- Target NodeType :
TEST Blog- Data Sync{ON}
TIP Create/Detail Page
테이블 리스트 또는 버튼 클릭하면, 스키마를 기반으로 기본 셋팅 된 Create/Detail 페이지가 출력된다.
2. Set Enable List Events
테이블 리스트 컴포넌트는 데이터 관리에 기본적으로 필요한 CRUD(Create, Retrieve, Update, Delete)를 기본 버튼으로 제공한다. Enable List Events 영역에서 생성하고자 하는 CRUD 버튼을 체크박스로 선택하고 저장하자.
테이블 리스트 하단에 기본 CRUD 버튼이 생성되는 것을 확인 할 수 있다.
셋팅 화면의 List Button Instancew Slot 영역이 생성한 버튼 목록으로 리스트업 되는 것을 확인 할 수 있다.
3. Set CRU Link Type
CRU 버튼 링크를 Modal로 셋팅하기 위해서는 List Button Instance Slot 영역에서 버튼을 개별 셋팅(
)해주어야 한다. [1] 을 클릭하면 하단에 상세 설정 영역이 출력된다. Options에서 [2]Link Type = 'Modal'으로 설정하자.
EX Create ButtonLink 셋팅 화면
TIP CRUD 버튼 링크 타입 변경하기
만약
Modal이 아닌 다른 타입으로 링크를 출력하고 싶다면 [Table Component > List Button Instance Slot >Link Type]을 변경하면 된다.
3-1. Create Button-Modal
테이블에서 [Create]버튼을 클릭하면 Create Form이 Modal로 출력된다.
Create Form을 모두 작성하고 [Save]버튼을 클릭해보자. 해당 내용이 저장되고 Modal이 닫히며, 테이블 목록에 생성한 데이터가 리스트업 되는 것을 확인 할 수 있다.
3-2. Read/Update Button-Modal
테이블에서 [1]조회/수정 할 컨텐츠를 체크박스로 선택하고, [2][상세조회]버튼 또는 [수정]버튼을 클릭하면 Detail 페이지를 Modal로 출력되어 조회하거나 수정 할 수 있다.
조회/수정 Modal에 있는 기본적인 Click Event는 다음과 같다.
Save : Edit and Save Contents > Refresh Modal
Delete : Delete Contents > Close Modal
Icon[X] : Close Modal
3-3. Delete Button-Modal
삭제 버튼의 기본 셋팅 화면은 다음과 같다. 별도의 Modal 출력은 없으며 Callback Link Type = Page로 한다.
[1]삭제 할 컨텐츠를 체크박스로 선택하고, [2][삭제]버튼을 클릭하면 삭제 알림이 출력되며 해당 컨텐츠가 삭제된다.
4. Click Event
테이블 목록 클릭 이벤트는 On Click / On Double Click 설정 영역에서 셋팅 할 수 있다.
Click/Double Click List-Modal
다음과 같이 On Click > Page Type = 'Modal'로 설정하면, 테이블 목록을 한 번 클릭 했을 때 모달이 출력된다.
❗️”On Click”과 “On Double Click” 기능은 함께 사용 할 수 없으니 주의하자.
테이블 목록에서 원하는 컨텐츠를 Click하면 Detail 페이지가 Modal로 출력되는 것을 확인 할 수 있다.
출력되는 Modal 내용은 스키마를 기반으로 기본 셋팅 된 항목들로 구성된 Detail 페이지이다.
Modal with User Selection Link
기본 셋팅 된 Detail 페이지 외의 다른 링크 페이지를 사용하고 싶다면, 아래 그림과 같이 Page 옵션을 추가로 설정하자.
