Freeform Grid Component

The Freeform Grid component lets end-users add, edit, and delete rows of data. Creators position components freely in each row using a grid-based cell layout, unlike the Uniform Grid where placement is constrained to fixed columns.

How to read settings tables
The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

General Settings

Setting	Field	Type	Default	Description
Property ID	`key`	Text input	`freeformGrid`	A unique ID for this component instance.

Display Settings

Field Text

Setting	Field	Type	Default	Description
Label Text	`label`	Text input	`Freeform Grid`	The title displayed above the grid.

Contextual Help

Setting	Field	Type	Default	Description
Tooltip	`tooltip`	Text input	—	A short hint that displays when a cursor is positioned over the tooltip icon.
Helper Text	`helperText`	Text input	—	A single line of guidance text that always displays below the grid title.

Default State Options

Setting	Field	Type	Default	Description
Hide Label	`hidden`	Toggle	OFF	When set to ON, this setting hides the grid title. The title remains visible in the Module Builder.
Hide Field	`hideComponentLabel`	Toggle	OFF	Hides the component from end-users but always displays in the Module Builder.

Formatting

Setting	Field	Type	Default	Description
Customize Button Styling	`customizeButtonStyling`	Toggle	OFF	When set to ON, this setting lets Creators customize the Add Row, Update Row, Cancel Row, and Delete Row button styles.

Add Row Button
Setting
Field
Type
Default
Description
Button Label Text
createNewLabel
Text input
Create New
The label displayed on the Add Row button.
Button Style
createThemeButton
Drop-down
—
The color style of the Add Row button. Options include: Primary, Secondary, Success, Danger, Warning, or Info.
Custom CSS Class
createCustomClass
Text input
—
A custom CSS class for styling the Add Row button.
Left Icon
createLeftIcon
Text input
—
The full icon class string for an icon displayed to the left of the button label (for example, fas fa-plus).
createRightIcon
Text input
—
The full icon class string for an icon displayed to the right of the button label (for example, fas fa-plus).

Setting	Field	Type	Default	Description
Button Label Text	`createNewLabel`	Text input	`Create New`	The label displayed on the Add Row button.
Button Style	`createThemeButton`	Drop-down	—	The color style of the Add Row button. Options include: Primary, Secondary, Success, Danger, Warning, or Info.
Custom CSS Class	`createCustomClass`	Text input	—	A custom CSS class for styling the Add Row button.
Left Icon	`createLeftIcon`	Text input	—	The full icon class string for an icon displayed to the left of the button label (for example, `fas fa-plus`).
	`createRightIcon`	Text input	—	The full icon class string for an icon displayed to the right of the button label (for example, `fas fa-plus`).

Update Row Button
Setting
Field
Type
Default
Description
Button Label Text
saveLabel
Text input
Done
The label displayed on the Update Row button.
Button Style
saveThemeButton
Drop-down
—
The color style of the Update Row button. Options include: Primary, Secondary, Success, Danger, Warning, or Info.
Custom CSS Class
saveCustomClass
Text input
—
A custom CSS class for styling the Update Row button.
Left Icon
saveLeftIcon
Text input
—
The full icon class string for an icon displayed to the left of the button label (for example, fas fa-plus).
Right Icon
saveRightIcon
Text input
—
The full icon class string for an icon displayed to the right of the button label (for example, fas fa-plus).

Setting	Field	Type	Default	Description
Button Label Text	`saveLabel`	Text input	`Done`	The label displayed on the Update Row button.
Button Style	`saveThemeButton`	Drop-down	—	The color style of the Update Row button. Options include: Primary, Secondary, Success, Danger, Warning, or Info.
Custom CSS Class	`saveCustomClass`	Text input	—	A custom CSS class for styling the Update Row button.
Left Icon	`saveLeftIcon`	Text input	—	The full icon class string for an icon displayed to the left of the button label (for example, `fas fa-plus`).
Right Icon	`saveRightIcon`	Text input	—	The full icon class string for an icon displayed to the right of the button label (for example, `fas fa-plus`).

Cancel Row Button
Setting
Field
Type
Default
Description
Button Label Text
cancelLabel
Text input
Cancel
The label displayed on the Cancel Row button.
Button Style
cancelThemeButton
Drop-down
—
The color style of the Cancel Row button. Options include: Primary, Secondary, Success, Danger, Warning, or Info.
Custom CSS Class
cancelCustomClass
Text input
—
A custom CSS class for styling the Cancel Row button.
Left Icon
cancelLeftIcon
Text input
—
The full icon class string for an icon displayed to the left of the button label (for example, fas fa-plus).
Right Icon
cancelRightIcon
Text input
—
The full icon class string for an icon displayed to the right of the button label (for example, fas fa-plus).

Setting	Field	Type	Default	Description
Button Label Text	`cancelLabel`	Text input	`Cancel`	The label displayed on the Cancel Row button.
Button Style	`cancelThemeButton`	Drop-down	—	The color style of the Cancel Row button. Options include: Primary, Secondary, Success, Danger, Warning, or Info.
Custom CSS Class	`cancelCustomClass`	Text input	—	A custom CSS class for styling the Cancel Row button.
Left Icon	`cancelLeftIcon`	Text input	—	The full icon class string for an icon displayed to the left of the button label (for example, `fas fa-plus`).
Right Icon	`cancelRightIcon`	Text input	—	The full icon class string for an icon displayed to the right of the button label (for example, `fas fa-plus`).

Delete Row Button
Setting
Field
Type
Default
Description
Button Label Text
deleteLabel
Text input
Delete
The label displayed on the Delete Row button.
Button Style
deleteThemeButton
Drop-down
Primary
The color style of the Delete Row button. Options include: Primary, Secondary, Success, Danger, Warning, or Info.
Custom CSS Class
deleteCustomClass
Text input
—
A custom CSS class for styling the Delete Row button.
Left Icon
deleteLeftIcon
Text input
—
The full icon class string for an icon displayed to the left of the button label (for example, fas fa-plus).
Right Icon
deleteRightIcon
Text input
—
The full icon class string for an icon displayed to the right of the button label (for example, fas fa-plus).

Setting	Field	Type	Default	Description
Button Label Text	`deleteLabel`	Text input	`Delete`	The label displayed on the Delete Row button.
Button Style	`deleteThemeButton`	Drop-down	Primary	The color style of the Delete Row button. Options include: Primary, Secondary, Success, Danger, Warning, or Info.
Custom CSS Class	`deleteCustomClass`	Text input	—	A custom CSS class for styling the Delete Row button.
Left Icon	`deleteLeftIcon`	Text input	—	The full icon class string for an icon displayed to the left of the button label (for example, `fas fa-plus`).
Right Icon	`deleteRightIcon`	Text input	—	The full icon class string for an icon displayed to the right of the button label (for example, `fas fa-plus`).

Summary View

Defines the column headers end-users see when viewing the grid.

Action	Description
Copy Table	Copies the current Summary View configuration to the clipboard.
Replace Table	Replaces the current Summary View configuration with a copied one.
Filter	Filters the rows displayed in the table.
Add Summary View	Adds a new row to the Summary View table.

Column	Field	Type	Description
Heading	`heading`	Text input	The text displayed as the column header.
Property ID	`id`	Property ID	The Property ID that populates the column.

Setting	Field	Type	Default	Description
Choose Summary View	`selectedSummaryView`	Radio button	Rows	Sets how end-users view data in the grid. Rows displays data as individually stacked rows. Table displays data in a data table.
Customize Detail View	`detailView`	Radio button	Accordion	Sets how end-users view and edit row details. Accordion opens the detail view as an expandable panel below the data record. Modal opens the detail view as a modal overlay. Sidebar opens the detail view as a side-panel overlay.
↳ Modal Title	`modalTitle`	Text input	`Edit Details`	The title displayed in the modal. Visible when Customize Detail View is Modal.
↳ Sidebar Title	`modalTitle`	Text input	`Edit Details`	The title displayed in the sidebar. Visible when Customize Detail View is Sidebar.

Actions Settings

Triggers

The Triggers table defines what happens when end-users interact with grid rows.

Column	Field	Type	Description
When...	`type`	Drop-down	The row event that triggers the action. Options include: Row is Added, Row is Deleted, or Row is Saved.
Property ID	`componentId`	Property ID	The Property ID of the component to when the event occurs.

Validation Settings

Setting	Field	Type	Default	Description
Invalid Grid Error	`errors.standardizedGridValidation`	Text input	`Error(s) in the grid below.`	The error message displayed when the grid fails validation.
Invalid Row Error	`rowErrorMsg`	Text input	`Error(s) found.`	The error message displayed when a grid row fails validation.

Set Number of Allowed Rows

Setting	Field	Type	Default	Description
Minimum Number of Allowed Rows	`validate.arrayMinLength`	Number input	`0`	The minimum number of rows required in the grid.
Maximum Number of Allowed Rows	`validate.arrayMaxLength`	Number input	`0`	The maximum number of rows allowed in the grid.
Min Length Error Message	`errors.arrayMinLength`	Text input	—	The error message displayed when the grid has fewer rows than the minimum.
Max Length Error Message	`errors.arrayMaxLength`	Text input	—	The error message displayed when the grid exceeds the maximum number of rows.

Advanced Settings

Additional Styling

Setting	Field	Type	Default	Description
Custom CSS Class	`customClass`	Text input	—	A custom CSS class for styling the component.

Changelog

Date	Change
—	Initial publication.