Uniform Grid Component

The Uniform Grid component lets end-users add, edit, and delete structured data records in a row-based grid. Each row contains the same set of child components. Use it to capture repeating data like participants, line items, or contacts.

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	`uniformGrid`	The unique identifier for this component instance.

Display Settings

Field Text

Setting	Field	Type	Default	Description
Label Text	`label`	Text input	—	The title of the grid displayed above it.

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 next to the grid title.
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	`hideComponentLabel`	Toggle	OFF	When set to ON, this setting hides the grid title. The title remains visible in the Module Builder.
Hide Field	`hidden`	Toggle	OFF	When set to ON, this setting hides the entire grid from end-users.
Disable User Input	—	Toggle	OFF	When set to ON, this setting prevents end-users from adding, editing, or deleting rows in the grid.

Formatting

Setting	Field	Type	Default	Description
Grid Height	`heightOption`	Choice chip	Auto Height	Controls the maximum height of the grid. Options include: Auto Height or Define Height by Unit.
↳ Grid Height (px)	`height`	Number input	—	The explicit grid height in pixels. Visible when Grid Height is Define Height by Unit.
Display Pattern	`displayPattern`	Choice chip	Inline	Sets how the grid displays rows to end-users. Options include: Inline (tabular columns) or Simple Loop (stacked rows).
↳ Labels	`selectedLabelView`	Radio button	Show as Column Headers	Controls how component labels display in Inline mode. Options include: Show as Column Headers, Show Inline, or Hide Label. Visible when Display Pattern is Inline.
Customize Button Styling	`customizeButtonStyling`	Toggle	OFF	When set to ON, this setting lets Creators customize the Add Row, Update Row, Edit Row, and Delete Row button styles.

Add Row Button
Setting
Field
Type
Default
Description
Button Label Text
createNewLabel
Text input
Create New
The label 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, Info, Light, Dark, or Link.
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 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, Info, Light, Dark, or Link.
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 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, Info, Light, Dark, or Link.
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.
Right Icon
saveRightIcon
Text input
—
The full icon class string for an icon displayed to the right of the button label.

Setting	Field	Type	Default	Description
Button Label Text	`saveLabel`	Text input	`Done`	The label 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, Info, Light, Dark, or Link.
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.
Right Icon	`saveRightIcon`	Text input	—	The full icon class string for an icon displayed to the right of the button label.

Edit Row Button
Setting
Field
Type
Default
Description
Button Label Text
editLabel
Text input
Edit
The label on the Edit Row button.
Button Style
editThemeButton
Drop-down
—
The color style of the Edit Row button. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, or Link.
Custom CSS Class
editCustomClass
Text input
—
A custom CSS class for styling the Edit Row button.
Left Icon
editLeftIcon
Text input
—
The full icon class string for an icon displayed to the left of the button label.
Right Icon
editRightIcon
Text input
—
The full icon class string for an icon displayed to the right of the button label.

Setting	Field	Type	Default	Description
Button Label Text	`editLabel`	Text input	`Edit`	The label on the Edit Row button.
Button Style	`editThemeButton`	Drop-down	—	The color style of the Edit Row button. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, or Link.
Custom CSS Class	`editCustomClass`	Text input	—	A custom CSS class for styling the Edit Row button.
Left Icon	`editLeftIcon`	Text input	—	The full icon class string for an icon displayed to the left of the button label.
Right Icon	`editRightIcon`	Text input	—	The full icon class string for an icon displayed to the right of the button label.

Delete Row Button
Setting
Field
Type
Default
Description
Button Label Text
deleteLabel
Text input
Delete
The label 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, Info, Light, Dark, or Link.
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.
Right Icon
deleteRightIcon
Text input
—
The full icon class string for an icon displayed to the right of the button label.

Setting	Field	Type	Default	Description
Button Label Text	`deleteLabel`	Text input	`Delete`	The label 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, Info, Light, Dark, or Link.
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.
Right Icon	`deleteRightIcon`	Text input	—	The full icon class string for an icon displayed to the right of the button label.

Actions Settings

Triggers

Triggers fire a component when a row event occurs in the grid.

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

User Affordances

Setting	Field	Type	Default	Description
↳ User Affordances	`editOption`	Radio button	Full Grid Editable	Controls how end-users interact with rows in Inline mode. Visible when Display Pattern is Inline.

Full Grid Editable (default): All rows are editable inline at all times.
Full Grid Editable via Global Edit Button: All rows become editable when the end-user clicks a global edit button.
Selected Entry Editable: Only the currently selected row is editable at a time.
Entry Editable via Edit Button: Each row has its own edit button. End-users must click a row's edit button to edit it.

Validation Settings

Setting	Field	Type	Default	Description
Invalid Error Message	`errors.standardizedGridValidation`	Text input	`Error(s) in the grid below.`	The error message displayed when the grid fails validation.

Set Number of Allowed Rows

Setting	Field	Type	Default	Description
Minimum Number of Allowed Rows	`validate.arrayMinLength`	Number input	—	The minimum number of rows required in the grid.
Min Length Error Message	`errors.arrayMinLength`	Text input	—	The error message displayed when the grid has fewer rows than the minimum.
Maximum Number of Allowed Rows	`validate.arrayMaxLength`	Number input	—	The maximum number of rows allowed in the grid.
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 applied to the grid for custom styling.

Changelog

Date	Change
—	Initial publication.