Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 23 Next »

UI 유형

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

1. Basic List

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

2. Search Form

검색 기능이 있는 테이블로 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. Table : NodeType

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

2. Buttons

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

  • Create : 테이블 필드에 데이터를 등록

  • Read : 테이블에 등록 된 데이터를 상세 조회

  • Update : 변경 내용을 저장하고 업데이트

  • Delete : 테이블에 등록 된 데이터를 삭제

  • List : 상위 목록 페이지로 돌아가는 기능

3. Extra Buttons

NEED CHECK 테이블 내에 사용 할 버튼이 필요하다면, Extra Buttons을 ON으로 설정한다.

①번 추가하기 아이콘을 클릭하면, 하단에 버튼 추가 영역이 출력된다.

②번 버튼 컴포넌트를 선택하면, 하단에 버튼 옵션 설정 영역이 출력된다.

  • Column Label : 테이블 열에 필드명

  • Label : 버튼명 텍스트

  • Data Sync : 연관 데이터 설정 여부를 토글버튼으로 선택

③번 버튼 옵션 설정을 진행한 뒤, ④번 저장 버튼을 클릭한다. (버튼 목록/설정 참고 : Buttons)

⑤번과 같이 Extra Button이 신규 생성되어 목록에 추가 되었다.

3. Search

검색 기능을 설정하고 싶다면, Show Search를 ON으로 설정한다. ①~③번 옵션이 아래와 같이 출력된다.

  • Search Type : 테이블 필드 필터형과 검색 폼, 2가지 타입 선택 가능

  • Search Cache : 검색 이력을 Cache에 저장하는 기능

  • Search Fields : Search Bar에 들어갈 필터 옵션 설정

검색 타입을 Form으로 선택할 경우, 아래와 같이 ④~⑥번 옵션이 추가로 나타난다.

  • Search Form Fields : 폼 형태로 출력 할 필드를 선택

  • Realtime Search : 검색폼 설정과 동시에 테이블에 검색 결과가 실시간으로 출력

  • Search Form Button : 검색폼 설정 이후 [검색] 버튼을 통해서 검색 결과를 출력 삭제예정?

4. Grouping

List Field Instance Slot 영역에서 테이블 필드별로 그룹핑 기능을 설정 할 수 있다.

만약, 아래 그림과 같이 가입일, 탈퇴일, 휴면전환일 3개의 필드를 그룹핑 하고자 할 경우, 필드 각각의 설정((blue star))을 클릭하여 총 3번 그룹핑 설정을 진행해야 한다.

①번 가입일 설정을 클릭하고, 아래 상세 영역에서 Grouping 옵션을 ON으로 설정한다.

가입일, 탈퇴일, 휴면전환일 3개의 필드를 각각 Grouping{ON}하고 “Date Information“이라는 동일 Group Label로 설정하면 다음과 같이 그룹핑 테이블이 만들어 진다.

5. Summary

Options

1. Title

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

2. Size

Setting

Result

3. Border

Setting

Result

  1. Event Button

  2. Sort

  3. Search: Bar, Form

  4. Pagination

  5. Filter: Select, Checkbox

  6. Table: Title, Show Summary, Click Event, Table Button, Toggle, Mouse Over Menu

  7. Icon: Edit, Delete, Status, setting, upload, download, media, etc

  8. summary graph (up/down)

  9. Label

  10. Tag

  11. Link

  12. Custom View


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

  • No labels