ICE의 BackOffice Builder를 이용하여 기능을 구현하기 위해서는 데이터 관리에서 기본적으로 필요한 CRUD(Create, Retrieve, Update, Delete)를 구현해야 한다. 이때, 대상이되는 데이터의 유형에 따라서 몇 가지 패턴으로 CRUD를 구성하면 UX의 편의성과 통일성을 제공할 수 있다.

본 문서에서는 ICE4에서 제공하는 기능들을 이용하여 구현 가능한 패턴들에 대한 구현 방안을 제공한다.

1 Example. Table-Modal
- 1.1 1. Create Table
- 1.2 2. Set Enable List Events
- 1.3 3. Set CRU Link Type
  - 1.3.1 3-1. Create Button-Modal
  - 1.3.2 3-2. Read/Update Button-Modal
  - 1.3.3 3-3. Delete Button-Modal
- 1.4 4. Click Event
  - 1.4.1 Click/Double Click List-Modal
  - 1.4.2 Modal with Link User Selected

Example. Table-Modal

https://dev-admin.justten.io/admin/boTesting/pattern/tableModal

테이블-모달 패턴은 백오피스에서 가장 많이 사용 되는 패턴 중 하나이다. 테이블 리스트 페이지에서 컨텐츠를 생성하고, 확인하고 수정하기 위한 모든 링크를 Modal 타입으로 만들어 보자.

tip 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

ICE에서는 스키마를 생성할 때, 기본적으로 CRUD(Create, Read, Update, Delete + list)에 관련된 이벤트를 제공한다.
이를 사용하기 위해서 Enable List Events 영역에서 생성하고자 하는 CRUD 버튼을 체크박스로 선택하고 저장하자.

테이블 리스트 하단에 기본 CRUD 버튼이 생성되는 것을 확인 할 수 있다.

셋팅 화면의 List Button Instancew Slot 영역에서도 생성한 버튼 목록으로 리스트업 되는 것을 확인 할 수 있다.

Read, Update, Delete 버튼을 사용하기 위해서는 테이블 목록에서 컨텐츠 선택이 우선적으로 진행되어야한다. 데이터 선택 필드 옵션을 Radio 또는 Checkbox로 설정하자.

테이블에 데이터 선택 필드가 추가 된 것을 확인 할 수 있다.

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]을 변경하면 된다.

builder에서 생성된 버튼의 셋팅 버튼 클릭
^[1] 을 클릭하면 상세 설정 영역이 출력된다. 위와 같이 Options에서 ^[2]Link Type = 'Modal'으로 설정하자.

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로 한다.

삭제 버튼의 기본 상태는 Disable이며, 데이터를 선택하면 활성화 상태로 변경된다. ^[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 Link User Selected

모든 Modal에서는 스키마 기반의 기본 폼 뿐만 아니라, 다른 페이지의 폼도 사용이 가능하다.

기본 셋팅 된 Detail 페이지 외의 다른 링크 페이지를 사용하고 싶다면, 아래 그림과 같이 Page 옵션을 추가로 설정하자.

ICE4 PRODUCT

How-To