List

It's a component that represents data in a list format with multiple rows.

• How to Create

1. After selecting List type in New Component Popup, click Next button. (Step1)
2. Enter the Component Name, the name displayed on the screen (Symbolic String or Custom Name), and then select created Business Object, then click the Next button.
3. Select the fields of the Business Object that will be displayed in the list. The displayed fields are those included in the selected Business Object, with CALS System Fields selected by default.

INFO

Note: Layout Type selection in Step2 is skipped.

• Applicable Component Attributes

1. Tab Pane Id: When the screen is composed of a Tab Component and the corresponding component is placed at the bottom, then Panel Id value of the Tab Component is registered and used to connect to the Tab.
2. Use Checkbox: Set whether to add a checkbox at the left end of each row in the row. It allows multiple rows to be selected.
3. Single Check: Change the setting from using checkboxes to using radio button for single selection by selecting Yes in the Use Checkbox option. By default, it is set to No, and changing it to Yes will add a column with radio button at the beginning of each row in the list.
4. Reverse Check: By default, the checkboxes in the list with the Use Checkbox setting are initially displayed as selected. Changing it to Yes will display the checkboxes in the list as selected by default.
5. Use Summary: Set whether to use the Summary Row. After enabling this option, additional configuration is required for the Control displaying the Summary Information.

INFO

Note: Additional properties to be configured in Control (Summary: prefix, suffix, function, label)

1. Use Stripped Table: Select whether tokn use the Striped Style (alternating row coloring) for the List. The default value is No, and changing it to Yes will display background color of rows in Striped Style.
2. Inline Edit: This is a function that allows users to add,modify, or delete data within the lis. The default value is No, and changing it to Yes allows selecting functions (New, Edit, Delete, Save, Cancel) to be performed via Edit. For saving and deleting, you need to register the row-inline-save and row-inline-delete services, respectively. Additionally, a separate configuration is required for Inline Edit in the TableColumn Control, and detailed information can be found in the Component Attribute.
3. Use Drag and Copy: Add drag-and-copy functionality to the List.
4. Mobile Display Type: As a mobile-specific attribute, you can choose the format of the Lsit displayed on mobile devices.
5. Page Navigation: Set the Pagination Type for displaying the retrieved data. The default value is Scroll Navigation, which displays additional data in the List by scrolling down. Choosing Button Navigation will change the pagination style to one where users can directly navigate to the desired page at the bottom of the list.

INFO

Note: Depending on the loading type, additional properties can be configured(Scroll – Page Size/ Button – Page Size Items, Default Page Size, Use Go To Page).

1. Personalization: You can display Control and sequence on a per-user basis through personalization settings.
2. Display Row Number: Display a sequence number for each row in the List. Show the sequence number based on the sorting criteria organized in the BO or provided by the Component.
3. Display Full Size Fixed: The component can be displayed in full-size on the screen.
4. Style - Size: Set the size of the Component, specifying it in pixels or percentage units.
5. Style - Background Color: Set the background color for the Component.
6. Style – Outline: Set the type of outline for the Component.

• Available List of Services

Name	Platform	Description
load	Common	Event that occurs when data loading
row-click	Web	Event that occurs when clicking a row in the list.
row-dbclick	Web	Event that occurs when double clicking a row in the list.
row-inline-save	Web	Event triggered when the Save Button is clicked to Save Data in a List using Inline Edit Mode
row-inline-delete	Web	Event trigerred when the Delete button is clicked to delete data in a List using Inline Edit Mode
row-touch	Mobile	Event triggered upon touching a row in the list
row-dbtouch	Mobile	Event triggered upon double touching a row in the list

• Availabe List of Controls

1. Button: Actions registered as events trigerred by clicks or touches can be invoked.
2. Hidden: Controls can be hidden when the application is executed.
3. Lookup: To initiate a search, you can call a popup window, where users input search criteria and execute the search.
4. Text: It is an Input Text Form Control.
5. Select: It is a dropdown list, a Select Control, where you can choose an option. It utilizes the Group Code registered under Common Code to set the option values for the Selecting Control.
6. Editor: It is a control used for editing simple document files.
7. Password: This a control used for masking the display or input of passwords or sensitive information.
8. ImageUpload: It is an Image Upload Control.
9. Textarea: Unlike Textcontrol , this control allows for resizing and input of multi-row text.
10. Radio: Radio Button, display the items of Radio Buttons by setting the Group Code registered under Common Code.
11. CheckBox: It is a Checkbox Control.
12. DatePicker: A control for entering dates, allowing users to easily select dates.
13. DateTimePicker: A control for entering dates and times, allowing users to easily select both.
14. Label: It is a read-only control. It can display fixed values or field values from a Business Object.
15. Dynamic: A dynamic control that is generated and used dynamically on the screen when a component is called in a Service's Action (such as Component-Interface, Control-Interface), with the Control Type set as metaData.
16. ZipCodeKR: Allows searching and setting addresses. In the Component, after searching for an address,postal codes, addresses, and detailed addresses can be mapped.