ICE의 BackOffice Builder를 이용하여 기능을 구현하기 위해서는 데이터 관리에서 기본적으로 필요한 CRUD(Create, Retrieve, Update, Delete)를 구현해야 한다. 이때, 대상이되는 데이터의 유형에 따라서 몇 가지 패턴으로 CRUD를 구성하면 UX의 편의성과 통일성을 제공할 수 있다.
...
테이블-모달 패턴은 백오피스에서 가장 많이 사용 되는 패턴 중 하나이다. 테이블 리스트 페이지에서 컨텐츠를 생성하고, 확인하고 수정하기 위한 모든 링크를 Modal 타입으로 만들어 보자.
Modal은 스키마의 기본 폼이나 다른 페이지를 출력할 수 있다. 이번 예제에서는 기본 폼만을 다루도록 한다.
Status
colour Green title tip
...
1. Create Table
ICE4 - BackOffice Builder에서 테이블 컴포넌트를 추가하자. ( 참고 : 셋팅 옵션 가이드 Table List )
...
2. Set Enable List Events
테이블 리스트 컴포넌트는 데이터 관리에 기본적으로 필요한 ICE에서는 스키마를 생성할 때, 기본적으로 CRUD(Create, RetrieveRead, Update, Delete )를 기본 버튼으로 + list)에 관련된 이벤트를 제공한다.
이를 사용하기 위해서 Enable List Events 영역에서 생성하고자 하는 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'으로 설정하자.
...
| Status | ||||
|---|---|---|---|---|
|
...
CRUD 버튼 링크 타입 변경하기
Status
colour Green title tip 만약
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
...
삭제 버튼의 기본 셋팅 화면은 다음과 같다. 별도의 Modal 출력은 없으며 Callback Link Type = Page로 한다.
...
삭제 버튼의 기본 상태는 Disable이며, 데이터를 선택하면 활성화 상태로 변경된다. [1]삭제 할 컨텐츠를 체크박스로 선택하고, [2][삭제]버튼을 클릭하면 클릭해보자. 삭제 알림이 출력되며 출력 되며 해당 컨텐츠가 삭제된다삭제 된 것을 확인 할 수 있다.
...
...
4. Click Event
테이블 목록 클릭 이벤트는 On Click / On Double Click 설정 영역에서 셋팅 할 수 있다.
...
다음과 같이 On Click > Page Type = 'Modal'로 설정하면, 테이블 목록을 한 번 클릭 했을 때 모달이 출력된다.
❗️”On Click”과 “On Double Click” 기능은 함께 사용 할 수 없으니 주의하자.
...
테이블 목록에서 원하는 컨텐츠를 Click하면 Detail 페이지가 Modal로 출력되는 것을 확인 할 수 있다.
...
클릭 이벤트로 출력되는 Modal 내용은 Modal도 스키마를 기반으로 기본 셋팅 된 항목들로 구성된 Detail 페이지이다.
...
Modal with
...
Link User Selected
모든 Modal에서는 스키마 기반의 기본 폼 뿐만 아니라, 다른 페이지의 폼도 사용이 가능하다.
기본 셋팅 된 Detail 페이지 외의 다른 링크 페이지를 사용하고 싶다면, 아래 그림과 같이 Page 옵션을 추가로 설정하자.
...