...

• Show Title : 테이블명 사용 여부를 설정하는 토글 버튼

  • Title : 테이블명 입력 인풋 박스

    Status
    colour Green title MEMO

    Show Title{ON} & Title 미입력 : 노드타입명 출력

    • Title Style : 타이틀 스타일 ON > 스타일 셋팅 박스 출력( https://ionsdp.atlassian.net/wiki/spaces/~438538633/pages/1555333928/Set+Button#Button-Style )

...

• Show Pagination

  • Pagination Position = {Top, Bottom, Both}

    Status
    colour Red title NEED CHECK

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

  • Pagination Align = {Left, Center, Right}

    Status
    colour Yellow title NEW

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

  • Show Total Count

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 : 추가 버튼 생성

  • Extra Button Table

    • 사용ON > Add Form : Component, Column Label, Label, Data Sync

      • 컴포넌트 선택 > 버튼 Option 셋팅 박스 출력 https://ionsdp.atlassian.net/wiki/spaces/~438538633/pages/1555333928/Set+Button#Setting-Screen

...

...

• Status
  colour Yellow title NEW

  Same line align 옵션

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

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

...

• Show Search{ON/OFF}

  • Status
    colour Yellow title NEW

    Use SearchBar{ON/OFF}

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

  • Status
    colour Yellow title NEW

    Use Filter/Sorter{ON/OFF}

    • Status
      colour Red title TOBE

      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 : 필드 필터와 폼검색 캐시 저장 사용

...

• Show Search{ON/OFF}

  • Status
    colour Yellow title new

    Use Search Bar{ON/OFF}

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

  • Status
    colour Yellow title new

    Use Filter/Sorter{ON/OFF}

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

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

      • Status
        colour Yellow title new

        Search Timing = {Realtime Search, Button Search}

Status
colour Red title tobe

[Search Type] (

Status
colour Red title asis

*Search Type = {Filter, Form} )

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

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

...

1번 Drag sorting (현재)	Status colour Yellow title NEW 2번 Drag sorting with handler

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

List Order Edit Function
A타입 : 드래그로 다중칸 이동 가능	B타입 : 한칸씩만 이동 가능

...

3. 에디팅

• Editable{ON/OFF}

  • Status
    colour Yellow title NEW

    Editable Type = {Cells, Rows}

...

1번 Editable Cells	2번 Editable Rows

...

• Status
  colour Yellow title NEW

  Grouping{ON/OFF}

  • Status
    colour Yellow title NEW

    Group Label : 필드 그룹명 텍스트 입력

  • Status
    colour Yellow title NEW

    Select Fields : 그룹핑 할 필드 선택(다중선택)

...

...

5. Custom ?

0. 기능 확인 불가

Status
colour Red title NEED CHECK

...

• 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

Create

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

1. Table : NodeType

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

...

2. Buttons

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

...

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

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

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

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

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

3. Extra Buttons

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

...

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

...

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

• Label : 버튼명 텍스트

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

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

...

⑤번과 같이 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 : 검색폼 설정 이후 [검색] 버튼을 통해서 검색 결과를 출력

  Status
  colour Red title 삭제예정?

4. Grouping

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

...

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

...

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

...

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

...

5. Summary

Image Removed

Options

1. Title

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

Image RemovedImage Removed

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

...