ICE의 BackOffice Builder를 이용하여 기능을 구현하기 위해서는 데이터 관리에서 기본적으로 필요한 CRUD(Create, Retrieve, Update, Delete)를 구현해야 한다. 이때, 대상이되는 데이터의 유형에 따라서 몇 가지 패턴으로 CRUD를 구성하면 UX의 편의성과 통일성을 제공할 수 있다.
...
셋팅 화면의 List Button Instancew Slot 영역에서도 생성한 버튼 목록으로 리스트업 되는 것을 확인 할 수 있다.
...
Read, Update, Delete 버튼을 사용하기 위해서는 테이블 목록에서 컨텐츠 선택이 우선적으로 진행되어야한다. 데이터 선택 필드 옵션을 Radio 또는 Checkbox로 설정하자.
...
테이블에 데이터 선택 필드가 추가 된 것을 확인 할 수 있다.
...
...
3. Set CRU Link Type
CRU 버튼 링크를 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에서는 스키마 기반의 기본 폼 뿐만 아니라, 다른 페이지의 폼도 사용이 가능하다.
...