List

여러 Row를 가진, List 형태로 Data를 표현하는 Component이다.

• How to Create

1. New Component Popup 화면에서 List 타입을 선택하고 Next를 Click한다. (Step1)
2. Component Name과 Screen에서 표시되는 명칭(Symbolic String or Custom Name), 그리고 작성된 Business Object를 선택한 다음, Next를 Click한다.
3. List에 표출될 Business Object의 Field를 선택한다. 이때 표시되는 Field는 위에서 선택한 Business Object에 포함된 Field가 표시되며, CALS System Field는 Default로 선택되어 있다.

INFO

Note: Step2의 Layout Type 선택 단계는 Skip된다.

• 적용 가능한 Component Attribute

1. Tab Pane Id: Tab Component로 Screen이 구성되는 경우, 하단에 해당 Component가 배치되는 경우 Tab Component의 Panel Id값을 등록하여 Tab과 연결하기 위하여 사용된다..
2. Use Checkbox: List의 각 Row의 좌측 끝에 Checkbox의 추가 여부를 설정한다. 복수의 Row를 선택할 수 있다.
3. Single Check: Use Checkbox에서 생성된 Checkbox를 단일 선택으로 기능을 제한하는 Radio Button으로 설정을 변경한다. 기본값은 No이며, Yes로 변경하면 List의 각 Row의 좌측 시작에 Radio Button을 가진 컬럼이 추가된다.
4. Reverse Check: Use Checkbox가 설정된 List의 Checkbox가 최초에 선택된 상태로 화면에 표출된다. 기본값은 No이며, Yes로 변경하면 List의 Checkbox가 선택된 상태로 표출된다.
5. Use Summary: Summary Row의 사용 여부를 설정하며, 사용으로 설정한 후 Summary 정보가 표출되는 Control에 대하여 Attribute의 추가적인 Configuration이 필요하다.

INFO

Note: Control에서 설정해야 하는 추가 속성 (Summary: prefix, suffix, function, label)

1. Use Stripped Table: List의 Striped Style(1 Row씩 띄어서 색칠하는 것)의 사용 여부를 선택한다. 기본값은 No이며, Yes로 변경하면 Row의 Background Color가 Striped Style로 표출된다.
2. 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에서 확인이 가능하다.
3. Use Drag and Copy: List에 Drag and Copy 기능을 추가한다.
4. Mobile Display Type: 모바일 전용 속성으로, 모바일에서 표출되는 List의 형태를 선택할 수 있다.
5. Page Navigation: 조회한 Data를 표출하는 Pagination Type을 설정한다. 기본값은 Scroll Navigation이며 Scroll down으로 추가 Data를 조회하여 List에 표출한다. 다른 방식인 Button Navigation을 선택하면 List의 하단에 사용자가 원하는 Page로 바로 이동할 수 있는 Pagination방식으로 변경되어 표출된다.

INFO

Note: Loading 유형에 따라 추가 속성을 설정할 수 있다. (Scroll – Page Size/ Button – Page Size Items, Default Page Size, Use Go To Page).

1. Personalization: 개인화 설정으로 Control과 순서를 사용자 별로 표출할 수 있다.
2. Display Row Number: List에 표시되는 각 Row에 순번을 표기한다. BO에서 정리된 정렬 조건 또는 Component에서 제공되는 정렬 조건에 따라 순번을 표출한다.
3. Display Full Size Fixed: Screen에 Component가 Screen의 화면에 Full-Sized로 표출된다.
4. Style - Size: Component의 크기를 설정하며 픽셀 또는 퍼센트 단위로 설정한다.
5. Style - Background Color: Component의 배경색을 설정한다.
6. 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

• 사용 가능한 Control

1. Button: Click 또는 터치 시 발생되는 Event로 등록된 Action을 호출할 수 있다.
2. Hidden: Control을 Application 실행 시는 보이지 않게 숨길 수 있다.
3. Lookup: 검색을 하기 위한 Popup 창을 호출하고, 호출된 Popup 창에서 검색 조건을 입력하고 검색을 실행한다.
4. Text: Input Text Form Control이다.
5. Select: Option을 선택할 수 있는 드롭다운 List, Select Control이며, Common Code로 등록한 Group Code를 설정하여 Select Control의 option 값으로 사용한다.
6. Editor: 단순한 문서 File을 편집하기 위한 Control이다.
7. Password: 패스워드 또는 민감한 정보의 표출 또는 입력을 Masking하여 처리하는 Control이다.
8. ImageUpload: Image Upload Control이다.
9. Textarea: Text에 비해 Control의 크기를 늘릴 수 있으며, 다중 Row의 텍스트를 입력할 수 있다.
10. Radio: Radio Button, Common Code로 등록한 Group Code를 설정하여 Radio Button의 항목들을 표출한다.
11. CheckBox: Checkbox Control이다.
12. DatePicker: 날짜를 입력하는 Control이며, 사용자가 쉽게 날짜를 선택할 수 있도록 한다.
13. DateTimePicker: 날짜와 시간을 입력하는 Control이며, 사용자가 쉽게 날짜와 시간을 선택할 수 있도록 한다.
14. Label: 출력 전용 Control이다. 고정된 값 또는 BO의 Field 값을 표시할 수 있다.
15. Dynamic: 동적 Control로 Component가 호출되어 화면에서 생성될 때, Service의 Action(Component-Interface, Control-Interface 등)에서 metaData로 Control Type을 설정하여 동적으로 생성 및 사용된다.
16. ZipCodeKR: 주소를 검색, 설정할 수 있으며, Component에서 주소 검색 후 우편번호, 주소, 상세주소 등을 Mapping할 수 있다.