Table of Contents

셋팅화면

...

Create New

테이블 리스트 컴포넌트의 첫 셋팅 화면은 다음과 같다.

Target Node Type : 노드 타입을 선택하고, 데이터 연동 및 API사용 여부 설정
Table Title : 테이블명 입력 필드, 테이블명 노출 여부 설정

2. Set NodeType

노드타입을 선택하면 설정 옵션이 다음과 같이 출력된다.

3. Option Detail

각각의 옵션 상세 내용은 다음과 같다.

셋팅내용

Basic Set

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

...

NodeType을 선택하고, 테이블명을 입력한다.

1. Table Field, Data

Target Node Type : Data를 출력하기 위한 타겟 노드 타입
- Enable List Fields : 테이블 필드 Value를 선택하여 테이블 생성 > List Field Instance Slot 테이블 셋팅
선택
Data Sync : 연관 데이터 자동 설정
Use API : API 사용 여부
- URL
- Parameters

...

> List Field Instance Slot

2. Table Title

Show Title : Default{ON}
- 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 )
Title Style (
Status
colour Red
title ASIS
Custom Title Style ) (
Status
colour Red
title UI 통일
/wiki/spaces/~438538633/pages/1555333928 )

...

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{ON/OFF}

...

4. Event Buttons

Show Event Buttons : Default{ON}
- Event Buttons Position = {Top, Bottom, Both}
- Event Buttons Align = {Left, Center, Right}
- Enable List Events : 기본 5가지 버튼 중 선택하여 추가 > List Button Instance Slot 테이블 셋팅
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

...

> List Button Instance Slot

Status

colour	Red
title	ASIS

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

...

Status

colour	Red
title	TBD

Pagination과 Event Buttons 2가지 모두 ON일 경우, 동일 라인에 배치하는 신규 옵션 추후 필요!

Status

colour	Blue
title	EX

백오피스 예시 화면

...

동일 라인 Align사용

...

다른 라인 Align사용

...

Function Set

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

1. Search

Status

colour	Red
title	NEED CHECK

검색바만 사용하고 싶은 경우 설정 없음, 검색 옵션 아래와 같이 변경 필요

Show Search{ON/OFF}
- Status
  colour Yellow
  title NEW
  SearchBar{ON/OFF}
  - Enable Search Fields : 검색바에 사용할 조건 옵션 선택 > Search Field Instance Slot 테이블 셋팅
- Status
  colour Yellow
  title NEW
  Search Form Filter{ON/OFF}
  - Enable Search Form Fields > Search Form Field Instance Slot 테이블 셋팅
  - Status
    colour Red
    title TOBE
    Search Timing = {Realtime Search, Button Search}
- Status
  colour Yellow
  title NEW
  Table Header Search{ON/OFF}
  - Show Sorter{ON/OFF}
  - Show Filter{ON/OFF}
- Use Search Cache : 필드 필터와 폼검색 캐시 저장 사용

Info
검색바{ON}, 폼서치 검색{ON}

...

Info
검색바{ON}, 테이블 헤더 검색{ON}

...

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

Status

colour	Red
title	NEED CHECK

Connect SearchForm{ON}설정 시

...

> Search Field Instance Slot

> Search Form Field Instance Slot

2. Drag Sort

Draggable{ON/OFF}
- Status
  colour Yellow
  title NEW
  Use Drag icon{ON/OFF}

Image Removed

Status

colour	Red
title	NEED CHECK

드래그 테이블은 Search, Pagination 기능과 함께 사용 할 수 없는지 확인 필요

Status

colour	Purple
title	ANT DESIGN

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

...

1번 Drag sorting (현재)

...

Status

colour	Yellow
title	NEW

2번 Drag sorting with handler

...

3. Data Edit

Editable{ON/OFF}
- Status
  colour Yellow
  title NEW
  Editable Type = {Cells, Rows}

Status

colour	Purple
title	ANT DESIGN

2가지 에디팅 기능 (

Status

colour	Red
title	NEEDCHECK

현재 2번만 있음, BUT 에디팅 기능 사용 불가 )

...

1번 Editable Cells

...

2번 Editable Rows

...

4. Field Grouping

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

...

Status

colour	Red
title	TOBE

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

Status
colour Yellow
title NEW
Grouping{ON/OFF}
- Status
  colour Yellow
  title NEW
  Group Label : 필드 그룹명 텍스트 입력
- Status
  colour Yellow
  title NEW
  Select Fields : 그룹핑 할 필드 선택(다중선택)

...

Grouping table head

...

Status

colour	Blue
title	EX

5개의 테이블 필드가 있는 테이블 그룹핑

Fileds = {Name, Age, Street, Building, Door No.}

Group Lable = Field_1, Field_2, …

Block = Building, Door No
Address = Street, Block
Other = Age, Address

...

Status

colour	Blue
title	ex

그룹핑 셋팅 제안 UI

...

그룹핑 ON 초기 화면

...

2. 그룹핑 1회 진행 이후 화면

...

5. Data Sum (Summary)

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

...

Info
데이터 합계 기능{ON}, 적용 필드{공급가, 판매가, 할인가}

...

UI Set : Options

...

1. Size

Status

colour	Red
title	NEED CHECK

라지 사이즈가 없으면 삭제(

Status

colour	Purple
title	ANT

: size )

...

2. Show Empty Data First

...

3. Table Data Select : Radio, Checkbox

Status

colour	Red
title	NEED CHECK

라디오, 체크박스 기능을 선택형으로 변경 필요

Info
테이블 데이터 선택{Radio}

...

Info
테이블 데이터 선택{Check}

Image Removed

4. Show MoreLink

moreLinkUrl 입력필드

...

5. Table Style

Status

colour	Red
title	TOBE

테이블 보더/헤더/콜룸 스타일 그룹핑 필요

Bordered : Default{ON}
Fixed Header : Default{ON}
- Height : Default = “600”
Fixed Columns : Default{ON}

※ 확인불가

1. show Info Icon{ON/OFF}

Status

colour	Red
title	need check

삭제 예정 확인 필요

>> “new”는 Field선택해서 텍스트 앞쪽에 아이콘 표시하는 기능으로 변경

Status
colour Yellow
title new
: 신규 등록 컨텐츠 존재시 신규 아이콘 표시
Status
colour Yellow
title File
: 파일첨부가 되어있는 컨텐츠에 아이콘 표시

2. Custom{ON/OFF}

Status

colour	Red
title	need check

삭제 예정 확인 필요

Top Field
Top Button API
Bottom Button Title
Bottom Button URL
Bottom Button API
Add Event Columns{Manage, Remove, Both}
Property Key
Property Field
Limit
Form Type
Show Search Time

...

4. List Scroll, List Search Form 등등(총6개)

Status

colour	Red
title	need check

...

Status

colour	Red
title	NEED CHECK

...

List Scroll Height{ON/OFF} :

Status

colour	Red
title	NEED CHECK

Vertical 스크롤 사용여부?? or 높이값 입력 필요????

...

List Search Form Field Size 입력필드

...

List Search Form Field Gutter 입력필드

...

List Default PageSize 입력필드

...

List Show PageSize Changer{ON/OFF}

5. Personalized Columns : 용도 확인 필요

Status

colour	Red
title	need check

테이블 필드 Show, 계정별 권한 부여하는 기능, 사용법 확인 필요 >

Status

colour	Green
title	link

프로젝트에서 권한 부여

...

6. Custom Card Style : 기능 실행X, 확인불가

Card Style (
Status
colour Red
title ASIS
Custom Card Style ) (
Status
colour Red
title UI 통일
/wiki/spaces/~438538633/pages/1555333928 )

...

Slot Set

1. List Field Instance Slot

: 1-2. 테이블 필드, 데이터

2. List Button Instance Slot

: 1-4. 이벤트 버튼

3. Search Field Instance Slot

: 2-1. 검색과 필터 > 검색바

4. Search Form Field Instance Slot

: 2-1. 검색과 필터 > 필터/쏠팅

...

설정
Table Title : 테이블명 입력

2. Set NodeType

노드타입을 선택하면 다음과 같은 설정 옵션이 출력된다.

3. Option Detail

각각의 옵션 상세 내용은 다음과 같다.

Version	Old Version 54	New Version 55
Changes made by	DXP Angela	DXP Angela
Saved on	Mar 31, 2021	Mar 31, 2021

Page Comparison

Versions Compared

Key

셋팅화면

Create New

2. Set NodeType

3. Option Detail

셋팅내용

Basic Set

1. Table Field, Data

> List Field Instance Slot

2. Table Title

3. Pagination

4. Event Buttons

> List Button Instance Slot

Function Set

1. Search

> Search Field Instance Slot

> Search Form Field Instance Slot

2. Drag Sort

3. Data Edit

4. Field Grouping

5. Data Sum (Summary)

UI Set : Options

1. Size

2. Show Empty Data First

3. Table Data Select : Radio, Checkbox

4. Show MoreLink

5. Table Style

※ 확인불가

1. show Info Icon{ON/OFF}

2. Custom{ON/OFF}

4. List Scroll, List Search Form 등등(총6개)

5. Personalized Columns : 용도 확인 필요

6. Custom Card Style : 기능 실행X, 확인불가

Slot Set

1. List Field Instance Slot

2. List Button Instance Slot

3. Search Field Instance Slot

4. Search Form Field Instance Slot

2. Set NodeType

3. Option Detail