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
| 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:
|
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:
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
|
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 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. |
| 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. |
|
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:
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
|
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. |
| 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. |
|
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:
Resources
