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. If the right grid component for a use case is unclear, see Grid Components.
How to read settings tables
The tables below describe each configurable option as it displays in the Unqork IDE. 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).
Right Icon
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.
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.
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.
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 trigger. 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.
The browser-based workspace where Creators build, edit, review, and manage Unqork applications. Also referred to as the Unqork platform. The IDE replaces what was previously referred to as UDesigner and Classic Designer, which are considered legacy.
A Property ID is the unique field ID used by Unqork to track and link components in your module.
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.
The Unqork tool used to build individual modules by placing and configuring components on a canvas.
The VCS (version control system) Contributor role has permissions to edit modules in a branch. Set contributors during the VCS Create a Branch process.
The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.
Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.
Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings.
Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.
DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.
