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.

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.

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:

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.

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 :

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: