ToolbarList

Single component that is composed of the List and Toolbar components. This component will display data in a List while having a Toolbar at the top, allowing control over Button Controls.

• How to Create

1. Click ToolbarList type in New Component Popup screen, and then click Next button.

2. Enter the name for the component and the name displayed on the Screen (Symbolic String or Custom Name ). After that, select the created Business Object, and then click Next button.

3. Select the fields to be used in the screen. The displayed fields are from the selected Business Object, and System Fields are selected by default.

   

4. Select the type of Buttons to be used in the Toolbar.

   

   INFO

   At this point, the button created will only have its name defined at the Control level.
   You will need to create the associated Services separately.

• Applicable List of Component Attributes

1. Toolbar Position: This is an attribute that sets the button position of the toolbar. The default value is Top, and the selectable values are Top and Bottom.
2. Tab Pane Id: When the Screen is structured with a Tab Component and this Component is placed at the bottom, the Tab Component's Panel Id value is registered to link it with the Tab.
3. 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.
4. 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.
5. 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.
6. 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 to 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. Search Type: This attribute sets the search type for a List. The default is to click button in the TableColumn header, enter the search term, and directly perform the search. It can be changed to static, where you can place controls for search within the Toolbar area at the top of the List. With Static, you can input or select search criteria and then perform data retrieval.

3. Collapse Disabled: This attribute determines the collapsing behavior of the Component. The default value is No, meaning that the collapse functionality in the Content area is enabled. Setting it to Yes disables the collapse functionality, keeping the Content area expanded at all times.

4. Default Collapse State: This attribute, applicable when Collapse Disabled is set to No, sets the initial state of collapsing upon entering the screen. The default value is N/A, indicating that the collapse feature is enabled. Changing it to "Close" means that the screen will initially load with the collapse closed.

5. 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.

6. Use Drag and Copy: Add drag-and-copy functionality to the List.

7. Mobile Display Type: As a mobile-specific attribute, you can choose the format of the Lsit displayed on mobile devices.

8. 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 - Text Color: Set the control's text font color.
7. Style – Outline: Set the type of outline for the Component.
8. Flat Appearance: Configures the size and color of the border.
9. Style – Outline: Allows you to select 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

1. Load: The Service executed when the Component is loaded, which must be registered when configuring a List Component.

   INFO

   The characteristics of Load Service Action Design is the use of Check Action and Lambda functionalities.

   

2. After selecting Lambda, clicking on the edit icon proceeds to the next step.

   

3. Select the Lambda for Optional Required, choose /CalsComWebCommonSelectData as the Lambda, set Type to Data, Target to List Component, and save the configuration.