Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

UI 유형

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

1. Basic Table

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

...

2. Search Table

...

Table of Contents

...

Basic Set

기본 테이블은 Title, Table, Pagination, Event Buttons 4가지 엘리먼트로 구성되어 있다.

...

 

1. 테이블 필드, 데이터

  • Target Node Type : 타겟 노드 타입

    • Enable List Fields : 테이블 필드 Value를 선택하여 테이블 생성 > List Field Instance Slot 테이블 셋팅

  • Data Sync : 연관 데이터 자동 설정

  • Use API : API 사용 여부

    • URL

    • Parameters

...

 

2. 테이블 타이틀

 

3. 페이지네이션

  • Show Pagination

    • Pagination Position = {Top, Bottom, Both}

      Status
      colourRed
      titleNEED CHECK
      top 적용 안됨, Default값 필요(미설정 > bottom)

    • Pagination Align = {Left, Center, Right}

      Status
      colourYellow
      titleNEW
      페이지네이션에도 정렬 기능 필요(Default = right)

    • Show Total Count

Image Added

 


4. 이벤트 버튼

  • Enable List Events : 기본 5가지 버튼 중 선택하여 추가 > List Button Instance Slot 테이블 셋팅

    • Show Event Buttons

      • Event Buttons Position = {Top, Bottom, Both}

      • Event Buttons Align = {Left, Center, Right}

  • Use Extra Buttons : 추가 버튼 생성

Image AddedImage Added

 

 

Status
colourRed
titleneed check
검색바만 사용하고 싶은 경우 설정 없음

Filter와 Sorter 기능은 2가지 타입으로 선택하여 사용 가능하다.

[1] Filter and Sorter : 테이블 Column Header에서 바로 Sort/Filter 기능 사용

...

ASIS
Pagination과 Event Buttons 2가지 모두 ON일 경우, 서로 다른 라인에 배치됨

...

 

Status
colourRed
titleTBD
Pagination과 Event Buttons 2가지 모두 ON일 경우, 동일 라인에 배치하는 신규 옵션 추가

  • Status
    colourYellow
    titleNEW
    Same line align 옵션

    • [Pagination] > [Left, Center, Right] : 3가지 옵션 모두 선택 가능

    • [Event Buttons] > [Left, Center, Right] : Pagination에서 선택한 옵션 선택 불가

 

Status
colourBlue
titleEX
백오피스 예시 화면

동일 라인 Align사용

다른 라인 Align사용

Image AddedImage Added

 

 

...

Function Set

기본 테이블에 Search, Draggable, Editable, Grouping, Summary 5가지 기능을 적용할 수 있다.

 


1. 검색

  • Show Search{ON/OFF}

    • Status
      colourYellow
      titleNEW
      Use SearchBar{ON/OFF}

      • Enable Search Fields : 검색바에 사용할 조건 옵션 선택 > Search Field Instance Slot 테이블 셋팅

    • Status
      colourYellow
      titleNEW
      Use Filter/Sorter{ON/OFF}

      • Status
        colourRed
        titleTOBE
        Search Type = {Filter/Sorter, Form Filter, Both}

        • (Form Filter)사용 > Enable Search Form Fields > Search Form Field Instance Slot 테이블 셋팅

        • (Form Filter)사용 > Search Timing = {Realtime Search, Button Search}

        • (Filter/Sorter)사용 > Show Sorter

        • (Filter/Sorter)사용 > Show Filter

    • Use Search Cache : 필드 필터와 폼검색 캐시 저장 사용

Info

검색타입{Form Filter} 선택 시 화면

...

Info

검색타입{Filter/Sorter} 선택 시 화면

...

 

  • Connect SearchForm : 검색 이력 저장, 동일한 검색 매개 변수가 들어 올 경우 검색

Status
colourRed
titleasis
옵션명 변경 필요

...

NEED CHECK
Connect SearchForm{ON}설정 시

...

 

2번 Search Table MEMO

Status
colourRed
titleneed check
검색바만 사용하고 싶은 경우 설정 없음

Status
colourRed
titleneed check
검색 옵션 변경 필요

  • Show Search{ON/OFF}

    • Status
      colourYellow
      titlenew
      Use Search Bar{ON/OFF}

      • {ON}일 경우에만 Enable Search Fields 목록 출력

    • Status
      colourYellow
      titlenew
      Use Filter/Sorter{ON/OFF}

      • {ON}일 경우에만 Search Type 옵션 출력

        • {Form Filter}일 경우에만 Enable Search Form Fields 목록 출력

        • Status
          colourYellow
          titlenew
          Search Timing = {Realtime Search, Button Search}

Status
colourRed
titletobe
[Search Type] (
Status
colourRed
titleasis
*Search Type = {Filter, Form} )

- Filter/Sorter: 테이블 내의 Column Header에서 바로 필터/쏠팅 사용 가능

- Form Filter: 테이블 상단에 Form(?) 형태로 필터 사용

...

Status
colourYellow
titlenew
[Search Timing] (
Status
colourRed
titleasis
Enable Search Form Button )

- Realtime Search : 필터 선택과 동시에 실시간으로 테이블에 결과 출력

- Button Search : 필터 설정 후 [필터적용] 버튼을 클릭할 경우 테이블에 결과 출력

...

...

2.

...

드래그 정렬

  • Draggable{ON/OFF}

    • Status
      colourYellow
      titleNEW
      Use Drag icon{ON/OFF}

...

Status
colourRed
titleneed check
드래그 테이블은 Search, Pagination 기능과 함께 사용 할 수 없다.

...

없는지 확인 필요

Status
colourPurple
titleANT DESIGN
사용자가 드래그 사용 가능 여부를 쉽게 알 수 있도록 icon이 추가된 2번 타입 추가 제안

1번 Drag sorting (현재)

Status
colour

...

Yellow
title

...

NEW
2번 Drag sorting with handler

Image AddedImage Added

또는 List Order Edit Function 옵션으로 다중칸/한칸씩 이동하는 기능 선택할 수 있도록 기능 추가

List Order Edit Function

A타입 : 드래그로 다중칸 이동 가능

B타입 : 한칸씩만 이동 가능

...

3. 에디팅

  • Editable{ON/OFF}

    • Status
      colourYellow
      titleNEW
      Editable Type = {Cells, Rows}

...

Status
colourPurple
titleAnt
https://ant.design/components/table/#components-table-demo-drag-sorting-handler

...

4. Editable Form

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

...

5. Grouping Form

테이블 필드를 그룹핑 한 테이블이다.

...

6. Summary Form

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

...

ANT DESIGN
2가지 에디팅 기능 (
Status
colourRed
titleNEEDCHECK
현재 에디팅 기능 사용 불가능 )

1번 Editable Cells

2번 Editable Rows

Image AddedImage Added

 

...


4. 그룹핑

Status
colourRed
titleASIS
List Field Instance Slot 테이블 셋팅에서 필드 1개씩 개별 셋팅

...

 

Status
colourRed
titleTOBE
그룹핑 여러개를 한번에 확인하며 진행할 수 있는 방법 필요

  • Status
    colourYellow
    titleNEW
    Grouping{ON/OFF}

    • Status
      colourYellow
      titleNEW
      Group Label : 필드 그룹명 텍스트 입력

    • Status
      colourYellow
      titleNEW
      Select Fields : 그룹핑 할 필드 선택(다중선택)

...

 

...

5. 써머리

  • Show Summary

    • Enable Summary Fields : Sum 진행 할 테이블 필드 선택

...

 

...

UI Set : Table Options

 

1. Size

2. Table Style

Bordered, Header, Colums

3. Table Style

4. Radio, Checkbox

Status
colourRed
titleNEED CHECK
라디오, 체크박스 기능을 선택형으로 변경 필요 > 라디오버튼

...

 

5. Custom ?

 

 

0. 기능 확인 불가
Status
colourRed
titleNEED CHECK

1. Info Icon

2. Action Display Type = {Button ,Droupdown}

 

 

...

 

 

...

Slot Set

  • List Field Instance Slot : 1-2. 테이블 필드, 데이터

  • List Button Instance Slot : 1-4. 이벤트 버튼

  • Search Field Instance Slot : 2-1. 검색과 필터 > 검색바

  • Search Form Field Instance Slot : 2-1. 검색과 필터 > 필터/쏠팅

 

 


...

셋팅화면

...

셋팅 옵션

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

<셋팅 화면 정리중> /wiki/spaces/~438538633/pages/1584758785

...

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

...