Data Grid Component

Overview

The Data Grid component is a Centauri Runtime (v1.0) The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. 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 Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. to create a new column in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. Then, it displays the component's field in a row matching that column. Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. can also configure the Data Grid component so end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. can add additional rows containing these components.

The Data Grid component is useful for configurations where end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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

A static image displaying the Data Grid Component's Display settings.

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).

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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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 Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. 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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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

A static image displaying the Data Grid Component's Data settings.

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. of the component whose data you're referencing.

Validation Settings

User Input

A static image displaying the Data Grid Component's Validation settings.

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

A static image displaying the Data Grid Component's Advanced settings.

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 Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. 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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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.

1. In the Module Builder, drag and drop a Data Grid component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter dataGrid.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Accounts.
4. In the Add Another Text field, enter Add Account.

A static image displaying the Data Grid component's Display settings.

5. Click Save Component.

Configure the Text Field components

Configure three Text Field components for your end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. to enter their account name, type, and balance. Apart from their Property IDs A Property ID is the unique field ID used by Unqork to track and link components in your module., all other settings are the same.

1. Drag and drop three  Text Field components onto your canvas, placing them next to one another inside the datagrid Data Grid component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter the following:
 

Property ID

Label Text

1

accountName

Account Name

2

accountType

Account Type

3

accountBalance

Account Balance

3. Click Save Component for each Text Field component as you complete it.
4. Save your module.

Preview your module in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. to see the following functionality:

A static image displaying the completed datagrid in express view.

Overview

The Data Grid component is a Centauri Runtime (v1.0) The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. 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 Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. to create a new column in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. Then, it displays the component's field in a row matching that column. Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. can also configure the Data Grid component so end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. can add additional rows containing these components.

The Data Grid component is useful for configurations where end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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

A static image displaying the Data Grid configuration window.

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.)

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 APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. calls.

Property IDs must use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (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 A Property ID is the unique field ID used by Unqork to track and link components in your module. 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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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 Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. 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 Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. styles applied to the application.

By default, this checkbox is ☐ (unchecked).

Multiple Values

Set to (checked) to let the end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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 APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. 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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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.

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

A static image displaying the Data Grid configuration window.

4. Click Save.

Configure the Text Field components

Configure three Text Field components for your end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. to enter their account name, type, and balance. Apart from their Property IDs A Property ID is the unique field ID used by Unqork to track and link components in your module., all other settings are the same.

1. Drag and drop three  Text Field components onto your canvas, placing them next to one another in the datagrid Data Grid.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter the following :

Property ID

Label Text

accountname

Account Name

accounttype

Account Type

accountbalance

Account Balance

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

Preview your module in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. to see the following functionality:

A static image displaying the Data Grid in express view.

Resources