Add a Button

Overview

A Button is a column input type that allows users to click to trigger an event or navigate to another page. You can use an existing column in a view (dataset), a count, or a NULL and assign an alias so a Button can be added to the container. Buttons can display text, an icon, or a counter to indicate the number of records on the linked page. Buttons also control the display of another container or page based on page binding criteria.

You can also configure buttons that are independent of dataset fields. Refer to the Add a Button Without a Dataset Column section for configuration instructions.

Note
To trigger an event via buttons, ensure that you create the button column and the event using the same name in the same container. Cloud Construct automatically ties up events and buttons that have the same name.

Create a Button

On the Cloud Construct’s home page, edit the required WebApp. The WebApp configuration page is displayed.
Access the Grid or Form node of your required construct page.
Select the Fields node and click Add Fields. The Add or Remove Fields dialog box is displayed.
Select the required field from the Dataset and set the column’s input type to Button.
Click Save.
In the Fields node, select the Button column input type. The Details Pane is updated with the button fields.

Enter the button column properties as required using the following table:

Field Name	Description	Supported Values/Notes
Name	The field or property name	Select the name of the column from your dataset to display in grid/form
Ordinal	Specifies order of fields within a container	Any integer. default: 0
Control Status	Controls the availability of the field when switching between edit/insert mode.	* Disabled: The field won’t be available for updates, but display-only * Enabled: The field will be available and displayed for updates * Hide: The field won’t be displayed and not available for updates. default: Enabled
Control Status Field	Select the column from the same grid or form container dataset whose per-row value controls whether this field is disabled (0), enabled (1), or hidden (2).	This property offers an alternative to using a separate dataset (for example, CCD) to control the state of a field.
Is Key	Specifies if field is a key field	default: false
Required	Is the field required for add/update	default: false
Required Type	* Hard: When set to hard required, the user must populate the field before saving the record. * Soft: When set to soft required, the user can save the record with an empty field, but a validation error appears after saving, indicating that the field should be populated.	default: Hard
Default Value	Default value when adding records	A value as per the field data type to be used as a default value when adding records. maxLength: 50
Placeholder Text	Text displayed when field is empty	Any string within length constraints. maxLength: 255

Add Page Bindings

If required, add the required page bindings to define how data is passed between pages when navigating through links. Refer to Link to a Page and Add Page Bindings for more information.

Additional Configurations

If required, complete the following additional configuration as needed:

Note
These fields are applicable only to columns added to a grid container.

Field Name	Description	Supported Values/Notes
Is Hidden on Grid By Default	Controls column visibility by default	default: false
Width Flex Grow	Controls if field grows based on content	default: false
Sortable	Specifies if field is sortable	default: true
Filterable	Specifies if field is filterable	default: true
Resizable	Specifies if field is resizable	default: true
Sort Mode	Configures default column sort order	* Ascending * Descending * None default: None
Sort Priority	Priority for sort operation. Used with Sort Mode to configure the default column sort order	Any integer. default: 0
Tooltip	Displays the tooltip that will be shown when hovering over cells and the header icon.	Enter a tooltip string within length constraints. maxLength: 128
Header Icon	The icon that will be displayed in the column header replacing the button’s column name.	Use the Preview and Select Icon button to open the Select Icon dialog box and add an icon to the button. You can either search for an icon or scroll through the list to find the one you want to preview, and then click Save to apply your selection. To reset the Icon value, click Clear in the Select Icon dialog box. maxLength: 100

Configure Button as an Icon

The icon section in the Button Details pane allows you to configure icon buttons to be displayed instead of text buttons. After completing the necessary fields listed above, proceed with the following fields:

Field Name	Description	Supported Values/Notes
Icon	Use the Preview and Select Icon button to open the Select Icon dialog box and add an icon to the button. You can either search for an icon or scroll through the list to find the one you want to preview, and then click Save to apply your selection.	To reset the Icon value, click Clear in the Select Icon dialog box. maxLength: 100
Icon Only	Toggle to control whether the button displays only the icon or both the icon and the display/default value.	default: false
Dynamic Image	Toggle to control whether the icon buttons are rendered dynamically based on cell values (image names or IDs), enabling different rows to display different icons.	default: false

Click Save & Preview WebApp to preview WebApp changes.
Click Save WebApp .

Add a Button Without a Dataset Column

To add a button to a grid or form container for events that do not require a dataset column:

On the Cloud Construct’s home page, edit the required WebApp. The WebApp configuration page is displayed.
Access the Grid’s or Form’s node of your required Construct page.
Select the Fields node and click Add Button. The Create Button dialog box is displayed.
Enter a name for the button and click Save.
In the Fields node, select the newly added button input column. The Details Pane is updated with the button fields.
Enter the button column properties as required using the table above in the Create a Button section.
Click Save & Preview WebApp to preview WebApp changes.
Click Save WebApp .

Documentation Index