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. 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
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).
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 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).
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).
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 trigger 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.
Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.
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.
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.
The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.
