ToolbarList
List Component와 Toolbar Component를 하나의 Component로 구성하여, List로 Data를 표출하면서 상단의 Toolbar 영역을 가지고 있어 Button Control을 제어할 수 있다.
- How to Create
New Component Popup에서
ToolbarList타입을 선택하고 Next를 Click한다. (Step1)Component Name 및 Screen에서 표시되는 명칭(
Symbolic StringorCustom Name)을 입력하고, 작성된 Business Object를 선택한 후, Next를 Click한다.Screen에서 사용될 Field를 선택한다. 이때 표시되는 Field는 위에서 선택한 Business Object 의 Field가 표시되며, System Field는 Default로 선택되어 있다.
Toolbar에서 사용할 Button의 유형을 선택한다.
INFO
이 때 생성되는 Button은 Control의 명칭만 정의된 수준이며, 관련된 Service는 생성해야 한다.
- 적용 가능한 Component Attribute
Toolbar Position: Toolbar의 Button 위치를 설정하는 속성으로 기본값은 Top이며, 선택 가능한 값은 Top, Bottom이다.
Tab Pane Id: Tab Component로 Screen이 구성되는 경우, 하단에 해당 Component가 배치되는 경우 Tab Component의 Panel Id값을 등록하여 Tab과 연결하기 위하여 사용된다.
Use Checkbox: List의 각 Row의 좌측 끝에 Checkbox의 추가 여부를 설정한다. 복수의 Row를 선택할 수 있다.
Single Check:
Use Checkbox에서 생성된 Checkbox를 단일 선택으로 기능을 제한하는 Radio Button으로 설정을 변경한다. 기본값은No이며,Yes로 변경하면 List의 각 Row의 좌측 시작에 Radio Button을 가진 컬럼이 추가된다.Reverse Check:
Use Checkbox가 설정된 List의 Checkbox가 최초에 선택된 상태로 화면에 표출된다. 기본값은No이며,Yes로 변경하면 List의 Checkbox가 선택된 상태로 표출된다.Use Summary: Summary Row의 사용 여부를 설정하며, 사용으로 설정한 후 Summary 정보가 표출되는 Control에 대하여 Attribute의 추가적인 Configuration이 필요하다.
INFO
Control에서 설정해야 하는 추가 속성 (Summary: prefix, suffix, function, label)
Use Stripped Table: List의 Striped Style(1 Row씩 띄어서 색칠하는 것)의 사용 여부를 선택한다. 기본값은
No이며,Yes로 변경하면 Row의 Background Color가 Striped Style로 표출된다.Search Type: List 형태의 검색 유형을 설정하는 속성이다. Default는 TableColumn의 header에서 검색 Button을 누르고 검색어를 입력 후 직접 검색하는 방식이다. Static 방식으로 변경이 가능하며, Static의 경우, List 상단의 Toolbar 영역에 검색에서 사용될 Control을 배치하여 입력 또는 선택된 검색 조건으로 Data를 조회할 수 있다.
Collapse Disabled: Component의 접기 속성으로 기본 값은
No이며, Contents 영역의 접기 기능이 활성화 되어있다.Yes로 설정하는 경우, Component의 Content 영역이 상시 펼침 상태로 접기 기능이 비활성화된다.Default Collapse State: Collapse Disabled 값이
No인 경우 화면 초기 진입 상태를 설정하는 속성으로, 기본값은N/A로 Collapse 펼침 기능이 활성화 되어있다. “Close`로 변경 시 화면 초기 진입 시 Collapse가 닫힌 상태로 나타난다Inline Edit: List 내에서 Data를 추가, 수정, 삭제할 수 있도록 하는 기능이다. 기본값은
No이며,YES로 변경하면Edit으로 수행할 기능(New, Edit, Delete, Save, Cancel)을 선택할 수 있으며, 저장과 삭제를 위해서는 각각 row-inline-save, row-inline-delete Service를 등록해야 한다. 또한, TableColumn Control에서 Inline Edit 관련하여 별도 Configuration이 필요하며 자세한 내용은 Component Attribute에서 확인이 가능하다.Use Drag and Copy: List에 Drag and Copy 기능을 추가한다.
Mobile Display Type: 모바일 전용 속성으로, 모바일에서 표출되는 List의 형태를 선택할 수 있다.
Page Navigation: 조회한 Data를 표출하는 Pagination Type을 설정한다. 기본값은 Scroll Navigation이며 Scroll down으로 추가 Data를 조회하여 List에 표출한다. 다른 방식인 Button Navigation을 선택하면 List의 하단에 사용자가 원하는 Page로 바로 이동할 수 있는 Pagination방식으로 변경되어 표출된다.
INFO
Loading 유형에 따라 추가 속성을 설정할 수 있다.
(Scroll – Page Size/ Button – Page Size Items, Default Page Size, Use Go To Page)Personalization: 개인화 설정으로 Control과 순서를 사용자 별로 표출할 수 있다.
Display Row Number: List에 표시되는 각 Row에 순번을 표기한다. BO에서 정리된 정렬 조건 또는 Component에서 제공되는 정렬 조건에 따라 순번을 표출한다.
Display Full Size Fixed: Screen에 Component가 Screen의 화면에 Full-Sized로 표출된다.
Style - Size: Component의 크기를 설정하며 픽셀 또는 퍼센트 단위로 설정한다.
Style - Background Color: Component의 배경색을 설정한다.
Style – Text Color: Text의 글자 색을 설정한다.
Style – Outline: Component 아웃라인의 타입을 설정한다
Flat Appearance: Border의 Size 및 Color를 설정한다.
Style – Outline: Component 아웃라인의 타입을 선택할 수 있다.
- 사용 가능한 Service
| Name | Platform | Description |
|---|---|---|
| load | Common | Data loading 시 발생되는 Event |
| row-click | Web | List에서 row Click 시 발생되는 Event |
| row-dbclick | Web | List에서 row Double Click 시 발생되는 Event |
| row-inline-save | Web | Inline Edit 모드를 사용하는 List에서 Data를 저장하기 위하여 [Save] Button Click 시 발생되는 Event |
| row-inline-delete | Web | inline Edit 모드를 사용하는 List에서 Data를 삭제하기 위하여 [Delete] Button Click 시 발생되는 Event |
| row-touch | Mobile | List에서 row 터치 시 발생되는 Event |
| row-dbtouch | Mobile | List에서 row 두 번 터치 시 발생되는 Event |
Load: Component가 Load될 때 실행되는 Service로 List Component를 구성할 때, 반드시 등록해야 하는 Service이다.
INFO
Load Service Action Design의 특징은
Check Action과Lambda를 사용하는 것이다.
Lambda를 선택하고, 수정 icon을 click 하면, 다음 단계로 넘어간다
Optional Required의 Lambda를
/CalsComWebCommonSelectData로 선택하고, Type을Data, Target을List Component로 설정하고 저장한다.