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. Construct Preview automatically ties up events and buttons that have the same name.

Create a Button

On the Construct Preview’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
Required	Is the field required for add/update	default: false
Is Key	Specifies if field is a key field	default: false
Direct Update	Allows direct updates when grid/form is in display mode	default: false
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, using the following fields:

Note
Either Source Data Record Field Value or Fixed Value must be specified.
Page bindings pass data values from the source page to the target page, allowing for filtered views or pre-populated forms when navigating between pages. Refer to Link to a Page and Add Page Bindings for more information.

Field Name	Description	Supported Values/Notes
Link to Page Name	Select the Page to navigate on click.	NA
Display Text	Text to display when the field is a link to another page.	Enter a display text within length constraints. maxLength: 128
Name *required*	Specify a unique binding name for the page link	Enter a name for binding. maxLength: 256
Target Column *required*	Specify the target column in the linked page	Enter target column name from your dataset. maxLength: 128
Target Page Container Name	Specifies the container name in the linked page	Select the name of the grid or form container from the page you’ve selected.
Source Data Record Field Value	Specifies the source column in the current page	Select source column name from your dataset.
Fixed Value	Specifies the source value in the current page	Specify the value or the actual record of the source column. maxLength: 255

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

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 Construct Preview’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 .