UI 유형

ICE4에서 만들 수 있는 테이블 리스트는 총 6가지 유형으로 구분된다.

1. Basic List

기본적인 테이블 리스트는 Title, Table, Pagination, Checkbox, Event Buttons로 구성한다.

EX Target NodeType = Content

검색 기능이 있는 테이블로 Fiter, Form 2가지 검색 타입을 제공한다.

필터 검색 : 검색바, 테이블 필드 검색 기능 제공

폼 검색 : 검색바, 폼 형태의 검색 필드 제공

3. Draggable Table

드래그 정렬 기능을 제공하는 테이블이다. Drag&Drop으로 Row데이터 위치를 변경하면, OrderNo 또한 함께 변경된다. 단, 드래그 테이블은 Search, Pagination 기능과 함께 사용 할 수 없다.

4. Editable Form

테이블 데이터를 바로 수정할 수 있도록 에디트 기능이 추가된 테이블이다.

5. Grouping Form

테이블 필드를 그룹핑 할 수 있는 테이블이다.

6. Summary Form

테이블 하단에 필드별 합계 정보를 출력해주는 테이블이다.

셋팅 옵션

BackOffice Builder의 TableList > Setting > [Option] 설정을 통해 테이블 리스트 유형과 스타일을 변경한다.

Create

기본 테이블 리스트를 생성한 뒤, 옵션 설정으로 원하는 유형을 만들 수 있다.

1. 테이블 생성하기

Target NodeType을 선택하면, 해당 노드에 셋팅되어 있는 Enable List Fields 목록이 출력된다. 테이블에 넣고자 하는 Value를 선택하여 테이블 리스트를 생성한다.

2. 버튼 추가하기

Enable List Events 목록에서 테이블 내에서 필요한 기본 버튼을 선택하여 생성한다.

Create : 테이블 필드에 데이터를 등록
Read : 테이블에 등록 된 데이터를 상세 조회
Update : 변경 내용을 저장하고 업데이트
Delete : 테이블에 등록 된 데이터를 삭제
List : 상위 목록 페이지로 돌아가는 기능

만약, 추가적으로 버튼을 생성하고 싶다면, Extra Buttons 을 ON하여 직접 만들 수 있다.

①번 추가하기 아이콘을 클릭하면 ②번 버튼 컴포넌트 설정 영역이 하단에 출력된다.

③번 버튼 컴포넌트를 선택하면 ④번 버튼 옵션 설정 영역이 하단에 출력된다. (버튼 목록/설정: Buttons)

⑤번 [저장]버튼을 클릭하면, Extra Button이 생성한 것을 확인 할 수 있다.

3. 검색기능 사용

3. 그룹핑 설정하기

4. 써머리 기능

Options

1. Title

Show Title 토글버튼을 ON으로 설정하면, Title 입력 필드가 나타나 테이블명을 작성 할 수 있다.

Setting	Result

2. Size

Setting	Result

3. Border

Setting	Result

Event Button
Sort
Search: Bar, Form
Pagination
Filter: Select, Checkbox
Table: Title, Show Summary, Click Event, Table Button, Toggle, Mouse Over Menu
Icon: Edit, Delete, Status, setting, upload, download, media, etc
summary graph (up/down)
Label
Tag
Link
Custom View

테이블 액션 참고: https://blog.naver.com/clay1987/221402213506

Table List