Table of Contents |
---|
...
Setup
Create New
...
7. Custom Title Style
테이블 타이틀 스타일을 설정하는 기능이다. 스타일 설정은 3가지 타입으로 선택하여 진행할 수 있다.
(참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Style-Set-Detail)
...
리스트 형태의 테이블을 카드 스타일로 변경 할 수 있다. 스타일 설정은 3가지 타입으로 선택하여 진행할 수 있다.
(참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Style-Set-Detail)
...
Select Grouping Fields
Status
colour Green title tips
Enable Table List Fields
에서 선택한 Value 목록이 출력되며, 그룹핑은 이웃 필드끼리만 가능하다.(ex. Field 01, Field 03, Field 05, 3가지 필드를 선택할 경우, Field 01부터 Field05까지 5개 필드가 자동 선택)
...
[ |
...
List Field Instance Slot에서 필드 별 그룹핑 진행] List Field Instance Slot 테이블에 있는 설정 을 이용해 필드 1개씩 그룹핑을 개별 셋팅하는 방법도 있다. |
...
Ex. 필드 2번과 3번을 위와 같이 그룹핑 하고 싶다면 |
...
Step 1. 필드 2번 설정을 클릭 > Grouping{ON}, Group Label |
...
Step 2. 필드 3번 설정에 들어가 동일하게 Grouping{ON}, Group Label |
...
저장 |
...
5. Fixed Column Fields
Status | ||||
---|---|---|---|---|
|
...
6. Show MoreLink
테이블 상단에 [more] 버튼을 추가하여 링크로 더 많은 정보를 사용자에게 전달 할 수 있다.
MoreLink URL : 버튼에 연결시킬 URL 입력
...
...
Events Option
Events Tab의 상세 옵션 내용은 다음과 같다.
...
1. Event Buttons
이벤트 버튼 목록과 함께 테이블 데이터 선택 타입, 버튼의 위치와 정렬 설정 옵션이 출력된다.
...
Data Select Field
Status
colour Green title Tip Radio 또는 Checkbox를 선택하면, 테이블 첫번째 열에 데이터 선택 필드가 신규로 생성 되며, 2가지 타입으로 선택 가능하다생성된다. 이 옵션은 보편적으로 테이블 목록을 선택하여 진행 할 수 있는 Event Buttons(수정/삭제)을 사용할 경우 함께 설정한다.
- Radio : 라디오 버튼 타입으로 데이터 선택 필드 생성, 단일 선택만 허용할 경우 사용
- Checkbox : 체크박스 타입으로 데이터 선택 필드 생성, 다중 선택을 허용할 경우 사용
Info |
---|
Event Buttons{ON}, Data Select Field{No Use} |
...
Info |
---|
Event Buttons{ON}, Data Select Field{Radio} |
...
Info |
---|
Event Buttons{ON}, Data Select Field{Checkbox} |
...
2. Pagination
테이블 페이지네이션의 Total Count 정보 노출 여부와 페이지네이션 위치와 정렬 설정 옵션이 출력된다.
...
Option Value | Sub Option |
Pagination Position | Top Pagination Align |
Pagination Position | Bottom Pagination Align |
Pagination Position | Top Pagination Align, Bottom Pagination Align |
...
List Default PageSize
...
한 페이지에서 보여줄 테이블 목록의 Row 개수를 입력하여 Default로 지정한다.
List Default PageSize & Pagination
Status
colour Green title tip Default PageSize 수치를 기준으로 페이징 처리가 진행된다.
...
: 테이블 목록 개수 Default 설정, 이 값을 기준으로 페이징 처리 진행
List Show PageSize Changer
...
: 테이블
...
목록 개수를 실시간으로 변경하여 보는
...
옵션으로 페이징도 함께 실시간 적용
List PageSize Changer : 테이블 목록 Row 개수 변경 옵션 다중 선택(
10
,20
,50
,100
)
List Default PageSize & List PageSize Changer
Status
colour Green title Tip List Default PageSize 값입력 O → List Page Size Changer 다중선택 옵션에 Default 값이 포함되어 출력
List Default PageSize 값입력 X → List PageSize Changer의 최소 단위인
10
으로 자동 셋팅
Info |
---|
List Default PageSize(5) List Show PageSize Changer{ON}, List PageSize Changer(10, 20, 50, 100) |
...
...
Info |
---|
List Default PageSize(10) List Show PageSize Changer{ON}, List PageSize Changer(10) |
3. Use Extra Buttons
제공하는 이벤트 버튼 외에 추가로 버튼을 생성하여 사용할 수 있다. Extra Buttons{ON}으로 설정하면 하단에 Extra Button Table 영역이 출력된다. 아이콘을 클릭하고 원하는 버튼 컴포넌트를 추가할 수 있다. Extra Buttons을 사용하면, 테이블 마지막 열에 각 Row에 적용 가능한 Action 필드가 신규 생성된다.
...
Search Option
검색 Search Tab의 상세 옵션 내용은 아래와 같다.
...
1. Search Bar
Status | ||||
---|---|---|---|---|
|
...
Enable Search Form Fields : 검색폼으로 생성 할 필드 설정
Search Timing
: 검색 결과 출력 타이밍 (Status colour Yellow title new Real time
,Click Botton
)Connect Search Form : 검색 이력을 저장하여 동일한 검색 매개 변수의 경우 검색 미진행
Use Search Cache : 검색 이력 캐시 저장
Search Timing
Status
colour Green title Tip - Real Time : 필터 설정이 실시간으로 테이블 리스트에 반영
- Click Bottom : 신규 검색 버튼이 생성되며, 이 버튼을 클릭 시 필터 설정값들이 한 번에 테이블 리스트에 반영
...
...
Style Set Detail
스타일 셋팅은 3가지 방법 진행 할 수 있다. Title Style, Card Style 모두 동일한 스타일 셋팅을 사용하다.
...