Data Grid Component

UDesigner

Classic Designer

Overview

The Data Grid component is a Centauri Runtime (v1.0) display and layout tool designed to organize components into columns and rows. Adding a component to a Data Grid component uses the added component's Label Text to create a new column in Express View. Then, it displays the component's field in a row matching that column. Creators can also configure the Data Grid component so end-users can add additional rows containing these components.

The Data Grid component is useful for configurations where end-users need to enter multiple datasets in an organized format. For example, let's say you're a financial planner. You need to collect your end-user's account name, type, and balance. Use a Data Grid component to display one or more fields so you can capture these values.

You'll find the Data Grid component in the Display & Layout group to the left of the Module Builder.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

Display Settings

Field Text

Setting	Description
Label Text	Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Setting

Description

Label Text

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Default State Options

Setting	Description
Hide Field	Displays or hides the field from view. Setting Hide Field toggle (ON) hides it in Express View. Setting the toggle back to (OFF) displays the field. The component will always remain visible in the Module Builder. By default, Hide Field is set to (OFF).

Setting

Description

Hide Field

Displays or hides the field from view. Setting Hide Field toggle (ON) hides it in Express View. Setting the toggle back to (OFF) displays the field. The component will always remain visible in the Module Builder.

By default, Hide Field is set to (OFF).

Formatting

Setting	Description
Striped	Set to (ON) to alternate table row colors. By default, this setting is set to (OFF).
Bordered	Set to (ON) to display borders around the edges and each row of the table. By default, this setting is set to (OFF).
Multiple Values	Set to (ON) to let the end-user make multiple sections in the table. By default, this setting is set to (OFF).
Hover	Set to (ON) to display row highlights when hovering over an individual row. By default, this setting is set to (OFF).
Condensed	Set to (ON) to remove extra spacing between rows. The effect you see depends on the custom CSS styles applied to the application. By default, this setting is set to (OFF).
Table View	Set to (ON) to display values in the submission. Set to (OFF) when you do not want the valuesdisplayed. By default, this setting is set to (ON).
Add Another Text	Set the label value for the Add New Row button.
Remove Row Text	Set the label value for the Remove Row button.

Input Behavior

Setting	Description
Input Behavior	Controls how end-users interact with the component. Choose from the following options: Enable User Input: Allow end-users to view and enter data in this field. Disable User Input: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a prohibited symbol. Read Only - Legacy: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None.

Setting

Description

Input Behavior

Controls how end-users interact with the component. Choose from the following options:

Enable User Input: Allow end-users to view and enter data in this field.
Disable User Input: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a prohibited symbol.
Read Only - Legacy: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None.

Data Settings

Data Storage

Setting	Description
Store Data in Database	The Store Data in Database setting affects how data persists through your application. When set to (ON), Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. Triggering a module save event using a Button component with an Action Type of Save. Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to (OFF) when you don’t want to store the values from this field in the database. When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the Enable Tracker and Track Value toggles are set to (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked.
Protected	When checked, the API call won't returns this field as part of the API call. Set to unchecked when you want the field returned as part of the call. By default, this checkbox is unchecked.

Setting

Description

Store Data in Database

The Store Data in Database setting affects how data persists through your application. When set to (ON), Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios:

Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database.
Triggering a module save event using a Button component with an Action Type of Save.
Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database.
By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission.

Set the toggle to (OFF) when you don’t want to store the values from this field in the database.

When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response.

Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the Enable Tracker and Track Value toggles are set to (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked.

Protected

When checked, the API call won't returns this field as part of the API call. Set to unchecked when you want the field returned as part of the call.

By default, this checkbox is unchecked.

Data Reference Key

With a Data Reference Key, you can use data from another component to populate your Data Grid component. You'll most often achieve this function using a Data Table component. Add your data to this component and then reference it in your Data Grid component's Settings drawer.

Think of this as a hybrid of using Values and Data Collections to populate a Radio Buttons component. You still use data stored in Unqork, but it's data from your module instead of a Data Collection.

Setting	Description
Data Reference Key	Enter the Property ID of the component whose data you're referencing.

Validation Settings

User Input

Setting	Description
Required	When set to (ON), the end-user must enter a value in the component's visible fields. When set to (OFF), the input is optional. By default, Required is set to (OFF).
Required Error Message	A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field.

Setting

Description

Required

When set to (ON), the end-user must enter a value in the component's visible fields. When set to (OFF), the input is optional.

By default, Required is set to (OFF).

Required Error Message

A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field.

Advanced Settings

Error Messages

Setting	Description
Min/Max Length	Sets the minimum or the maximum number of characters an end-user must enter for valid input.
Min/Max Length Error Message	A custom error message that displays below the input field. The error message displays when the entry doesn't meet the minimum or maximum character length rule.

Additional Styling

Setting	Description
Custom CSS Class	Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name.
Description	Quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line.

Setting

Description

Custom CSS Class

Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules.

Updated CSS styling applies to all components that reference this custom class name.

Description

Quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line.

Adding a Data Grid Component

In this example, configure a Data Grid component to ask your end-user to input personal information about their account assets.

Configure the Data Grid Component

This Data Grid component is used to organize three Text Field components so end-users can create multiple rows of fields based on their needs.

In the Module Builder, drag and drop a Data Grid component onto your canvas.
In the Property ID field, enter dataGrid.
In the Label Text field, enter Accounts.
In the Add Another Text field, enter Add Account.
Click Save Component.

Configure the Text Field components

Configure three Text Field components for your end-user to enter their account name, type, and balance. Apart from their Property IDs, all other settings are the same.

Drag and drop three Text Field components onto your canvas, placing them next to one another inside the datagrid Data Grid component.
In the Property ID and Label Text fields, enter the following:
Property ID
Label Text
1
accountName
Account Name
2
accountType
Account Type
3
accountBalance
Account Balance
Click Save Component for each Text Field component as you complete it.
Save your module.

	Property ID	Label Text
1	accountName	Account Name
2	accountType	Account Type
3	accountBalance	Account Balance

Preview your module in Express View. to see the following functionality:

Overview

You'll find the Data Grid component in the Display & Layout group to the left of the Module Builder.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

Display Settings

Setting	Description
Label	A Label indicates the purpose of the corresponding field or component. For input components, the Label tells the end-user how to interact with the field. For non-input components, the Label is not end-user facing, and only appears in the Module Builder. User-friendly Labels make your module more accessible. Keep Labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.
Property Name (Property ID)	A Property ID is the unique field ID used by Unqork to track and link components in your module. The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API calls. Property IDs must use camel case (stylized as camelCase) without spaces or punctuation.
Add Another Text	Enter text here to set the label for the Add New Row button.
Remove Row Text	Enter text here to set the label for the Remove Row button.
Data Reference Key	Enter the Property ID of the component whose data you're referencing.
Minimum Length	Sets the lowest number of rows displayed in your Data Grid component. Notice that the Add row button hides when your end-user reaches this lowest limit.
Maximum Length	Sets the highest number of rows displayed in your Data Grid component. Notice that the Add row button hides when your end-user reaches this highest limit.
Custom CSS Class	Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name.
Description	Quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line.
Striped	Set to (checked) to display alternate colors on each row of the table. By default, this checkbox is ☐ (unchecked).
Hover	Set to (checked) to display row highlights when hovering over an individual row. By default, this checkbox is ☐ (unchecked).
Bordered	Sets to (checked).to display borders around the edges and each row of the table. By default, this checkbox is ☐ (unchecked).
Condensed	Set to (checked) to remove extra spacing between rows. The effect you see depends on the custom CSS styles applied to the application. By default, this checkbox is ☐ (unchecked).
Multiple Values	Set to (checked) to let the end-user select multiple sections in the table. By default, this checkbox is ☐ (unchecked).
Hidden	Shows or hides the component from view. Checking the Hidden checkbox hides the component in Express View. Clearing the checkbox displays the component. The component will always remain visible in the Module Builder. By default, this checkbox is ☐ (unchecked).
Disabled	Checking the Disabled checkbox, prevents end-users from interacting with the element in Express View. When your end-user hovers over the field, their cursor changes to alert them to the status change. By default, this checkbox is ☐ (unchecked).
Protected	When (checked), the API call will not returns this field as part of the call. Set to unchecked when you want the field returned as part of the call. By default, this checkbox is ☐ (unchecked).
Table View	Set to (checked) to display values in the submission. Clear the checkbox when you do not want the values displayed. By default, this checkbox is (checked).
Persistent	When (checked), Unqork stores values entered into the field on submission of the module. Set to unchecked when you don't want to store the values from this field in the database. By default, this checkbox is (checked). If you never check the box, the value stores as `null`. If the box is checked, the value stores as `true`. And if you uncheck the box again after checking it, the value stores as `false`.
Required	When set to (checked), the end-user must enter a value in the component's visible fields. Set the toggle to (OFF) when an entry is optional. By default, Required is set to ☐ (unchecked).

Adding a Data Grid Component

In this example, configure a Data Grid component to ask your end-user to input personal information about their account assets.

Configure the Data Grid Component

This Data Grid component is used to organize three Text Field components so end-users can create multiple rows of fields based on their needs.

In the Module Builder, drag and drop a Data Grid component onto your canvas.
In the Label field, enter Accounts.
In the Property Name, enter datagrid.
Click Save.

Configure the Text Field components

Configure three Text Field components for your end-user to enter their account name, type, and balance. Apart from their Property ID, all other settings are the same.

Drag and drop three Text Field components onto your canvas, placing them next to one another in the datagrid Data Grid.

In the Property ID and Label Text fields, enter the following :

Property ID	Label Text
accountname	Account Name
accounttype	Account Type
accountbalance	Account Balance

Click Save & Close for each Text Field component as you complete it.
Save your module.

Preview your module in Express View. to see the following functionality:

Data Grid Component

Overview

About the Configuration Window

Display Settings

Field Text

Default State Options

Formatting

Input Behavior

Data Settings

Data Storage

Data Reference Key

Validation Settings

User Input

Advanced Settings

Error Messages

Additional Styling

Adding a Data Grid Component

Configure the Data Grid Component

Configure the Text Field components

Overview

About the Configuration Window

Display Settings

Adding a Data Grid Component

Configure the Data Grid Component

Configure the Text Field components

Resources