ToolbarGrid

ToolbarGrid is a high-capacity data-specific component, which loads data faster compared to the List Component. It is used when displaying a large amount of data on a screen. This component combines the features of a Grid Component with a Toolbar.

[Table1. List Component attribute function differences]

Component Attribute	Grid Implementation	Description
Toolbar Position	O	Set the position of Toolbar Button(top, bottom).
Tab Pane Id	O	Set the ControlId for linking to the Tab Component.
Use CheckBox	O	Set to add a checkbox at the left end of each row.
Single Check	O	Setting to add a radio button to left end of each row.
Use Drag and Copy	O	Set the drag-and-copy functionality to the List.
Page Navigation	△	Only button-based page movement is possible
Reverse Check	X	Setting to have the checkbox initially checked when loaded in the screen.
Use Summary	X	Setting to enable the use of a Summary Row to display the sum and average if the data.
Use Stripped Table	X	Setting to enable the use of the Stripped Style in the List(altering row colors.)
Search Type	△	Only static search conditions at the top are available (Constraint of the Grid Component).
Collapse Disabled	O	Configure the component to disable the content collapsing feature.
Default Collapse State	O	When the Collapse Disabled value is set to No, it refers to the initial state configuration upon entering the screen
Inline Edit	X	Setting to enable or disable line-by-line editing of the data in the List, allowing for addition, modification, and deletion.
Mobile Display Type	X	Setting the display type for mobile devices in the List Component.
Personalization	O	Display Control and sequence on a per-user basis through personalization settings.
Display Number	O	Setting to determine whether to display sequence numbers for the data in the List.
Display Full Size Fixed	O	Configure the component to expand the grid format on the screen, even if the component size is small or the data is insufficient when representing data in list form.

[Table2. List Column Attribute Functionality Differences]

Function Name	Grid Implementation	Description
Translate	O	Setting to enable multilingual represenation of labels using Symbolic String.
UI Type	X	Setting to represent columns in forms such as Progress bar(Range UI), icon UI, Link UI, etc.
Sort	O	Display sort icons for each column and configure the sorting. Both Server and Client types can be selected, and for Client Sort, the data is sorted based on the retrieved data.
Direct Edit	X	When the mouse hovers over a cell, display an Edit icon and allow editing. Editing is handled by yhe registered direct-edit-click service. Configuration is done on a column-by-column basis.
Thousand Separator	O	Set whether to display 1000 unit in column of number type.
Currency	X	Link the currency code field to a numeric column to set the value of the currency code(currency unit).
Summary	X	When the "Use Summary" property is checked in the component settings, you can configure summary formulas and display styles for each column.
Search Condition	X	For static or default field searches, you can set operators (equal, not equal, like, etc.) based on the search conditions.
Conditional Formatting	O	Set the styles and formats for cells and rows based on column values
Use Fixed Header	X	Configure a fixed header field that is unaffected by horizontal scrolling.

                                                                                                |

• How to Create

1. Select ToolbarGrid 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.

1. Select the type of button to be used in the toolbar.

   

Note: The buttons generated have only the control names defined, and each service must be created individually.

• 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. Use Drag and Copy: Add drag-and-copy functionality to the List.
6. Collapse Disabled: Configure whether the content collapsing feature of the toolbar is enabled. The default value is NO, meaning the content collapsing feature is activated. If changed to YES, the component will always appear in the expanded state.
7. Default Collapse State: If Collapse Disabled is set to No, the initial state upon entering the screen can be configured using the Initial State property. The default value is N/A, indicating that the collapse feature is enabled. Changing it to Close will result in the collapse being closed upon initial entry.
8. Key Column: This attribute, available only in the Grid and ToolbarGrid components, is used to set the Primary Key (PK) field of the mapped Business Object (BO).
9. Use Page Total: This attribute, specific to the ToolbarGrid, is used to display the total number of pages and items with a [...] symbol at the top of the grid.
10. Personalization: You can display Control and sequence on a per-user basis through personalization settings.
11. 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.
12. Display Full Size Fixed: The component can be displayed in full-size on the screen.
13. Style - Size: Set the size of the Component, specifying it in pixels or percentage units.
14. Style – Text Color: Set the control's text font color.
15. Style - Background Color: Set the background color for the Component.
16. Style – Flat Appearance: Configures the size and color of the border.
17. 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.

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

INFO

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

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

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