Grid Component
Estimated Reading Time: 13 minutes
Overview
The Grid component is a powerful tool that lets you gather, organize, and display data in your application. Using the Grid, you can retrieve data and customize how it displays. You can also use Grid operations that give end-users End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. the ability to dynamically modify the way they see your Grid data.
Like the Panel or Field Group components, the Grid component acts as a grouping or storage component for fields (other components) configured inside it. Instead of creating self-contained pages or sections, the Grid uses the component fields to create table headers. You can add any Unqork component to your Grid, but each component behaves differently depending on the view settings of your Grid component.
Common ways you can use the Grid component include:
-
Collecting, editing, and displaying data from different sources on a single screen, such as a dashboard.
-
Displaying dynamic data that end-users can manipulate using Grid Operations.
-
Applying logic (rules, calculations, procedural operations, and so on) to multiple data records simultaneously.
You can find the Grid component under the Display & Layout group to the left of the Module Builder.
What You'll Learn
After completing this
Grid Operations
Grid operations are the actions the Grid performs. These actions include filtering, appending, hiding, transposing, sorting, and so on.
Instead of running operations in the Grid component, logic components control and trigger the Grid operations.
Each Grid operation holds key/value pairs called options. For each Grid option key, enter the relevant option value to customize how your Grid operation performs. For example, the GRID.SET_FILTER Grid operation filters columns in the Grid component. The GRID.SET_FILTER Grid operation use the column option key/value pair to select the column component the Grid operation will filter. So, if the component column Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. is status, the key/value pair will be "column": "status".
NOTE Each Grid operation contains a unique set of Grid options. The first table below shows the Grid key options you can use for each Grid operation. The second table shows you which Grid option values you can enter for each Grid option key.
To control and trigger Grid operations within logic components, use a new Outputs Enter outputs components and actions you want the component to perform. Type called GRID_OPERATION. For the logic component's Outputs Value, enter the operation and options you want your Grid to perform.
Here is the basic template for entering and operation and its options:
{
"type": "OPERATION_TYPE",
"options": {
"inputs": [{"targetKey": "enter target key", "alias": "enter alias numeral"}], "targetKey": "enter Grid propertyID", "Option": "enter Option value"
}
}
NOTE The "inputs" Grid option isn't used in every Grid Operation. When not used, begin with the "targetKey" option.
Here are the Grid operations you can use to control your Grid component:
Operation Type |
Description |
Option Keys |
Example Operation |
---|---|---|---|
GRID.SET_FILTER |
Filter one or more columns in the grid. |
|
{ “type”: “GRID.SET_FILTER”, “options”: { “targetKey”: “grid”,"global": "true", “value”: “Auto”, “column”: “type”, “mode”: “toggle”, “type”: “includesString” } } |
GRID.SET_COLUMN_VISIBILITY |
Show/hide a column. |
|
{ "type": "GRID.SET_COLUMN_VISIBILITY", "options": { "targetKey": "grid", "column": "status", "value": "TOGGLE" } } |
GRID.SET_SORT |
Set the sorting status of a column. |
|
{ "type": "GRID.SET_SORT", "options": { "inputs": [ { "targetKey": "sortBy", "alias": "A" } ], "targetKey": "grid", "column": "=A", "direction": "asc" } } |
GRID.SET_TRANSPOSED |
Set the transposed state of the grid. |
value
|
{ "type": "GRID.SET_TRANSPOSED", "options": { "targetKey": "grid", "value": "TOGGLE" } } |
GRID.SET_VIEW_TYPE |
Set the view type of a grid. |
value
|
{ "type": "GRID.SET_VIEW_TYPE", "options": { "targetKey": "grid", "value": "TOGGLE" } } |
GRID.ADD_COLUMN |
Add a column to the grid. |
|
{ "type": "GRID.ADD_COLUMN", "options": { "inputs": [ { "targetKey": "columnKey", "alias": "B" } ], "targetKey": "grid", "columnDefinition": "=CONCATENATE('{\"type\":\"textfield\", \"key\": \"', B, '\"}')" } } |
GRID.REMOVE_COLUMN |
Remove a column from the grid. |
column |
{ "type": "GRID.REMOVE_COLUMN", "options": { "targetKey": "grid", "column": "status" } } |
Grid operations contain option key/value pairs you can use to manipulate your Grid. These Grid option values include the following:
Option Key | Description | Option Values | Example |
---|---|---|---|
targetKey |
Property ID of the component your Grid Operation or Option targets. |
Key/value pair of the target key propertyID. |
"options": { "targetKey": "gridComponentPropertyId" } |
alias |
A numeric variable that represents the value of the targetKey. |
Key/value pair of a numeric value. |
“options”: { "targetKey": "grid", "alias": "B" } |
inputs |
Input |
|
“options”: { "inputs": [ { "targetKey": "enter target propertyID", "alias": "enter alias numeral" } ] } |
global |
Boolean value. Set to true to filter across all data properties. |
|
“options”: { “targetKey”: “grid”, "global": "true" } |
column |
String value. Enter which column you want to target, remove, or filter by. |
Key/value pair of the column propertyID. |
“options”: { “targetKey”: “grid”, “value”: “Auto”, “column”: “type” } |
type |
Filter Type value. |
Any supported Tanstack filter type or Tanstack sort type. |
“options”: { “targetKey”: “grid”, “value”: “Auto”, “column”: “type”, “mode”: “toggle”, “type”: “includesString” } |
value |
Show/hide, transpose, Grid view, or toggle values. |
|
"options": { "targetKey": "grid", "value": "TOGGLE" } } |
direction |
Ascending or descending value for column sorting. |
|
"options": { "targetKey": "grid", "column": "=A", "direction": "asc" } } |
columnDefinition |
Any component definition value that creates a new column in the Grid component. NOTE Currently, columnDefinition only accepts Vega component definitions. |
JSON component definition of a new or existing component. |
"options": { "targetKey": "grid", "columnDefinition": "=CONCATENATE('{\"type\":\"textfield\", \"key\": \"', B, '\"}')" } |
position |
Array index value where a column is inserted. If not defined, the index value is be the last index value of the table value. |
Any array index value number starting with "0". |
"options": { "targetKey": "grid", "position": "0" } |
mode |
Grid mode value. |
|
“options”: { “targetKey”: “grid” , “mode”: “toggle” } |
About the Configuration Window
General
Setting |
Description |
---|---|
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 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. |
Notes |
Select this tab to display the component's Notes area. You can use notes to keep your teammates informed. The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component. |
|
Select this tab to manage your component's display settings. |
|
Select this tab to manage your component's data settings. |
|
Select this tab to manage your component's validation settings. |
|
Select this tab to manage your component's advanced settings. |
|
Select this tab to see the RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. (role-based access control) settings of the component. |
|
Assign components one-word labels to help organize, identify, and group the components in your application. Consider an example from the API Specification Snippet: Field Tags are applied to Hidden components in the panelRequest and panelResponse Panels. The Field Tags identify the data type of parameters included in 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. request and response. The API Docs Dashboard tool populates with information about each parameter’s data type, identified by the Field Tag. Field Tags act as a type of Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component. For example, add the Field Tag tagForDecision to multiple components in your module. Open the Inputs table of a Decisions component and reference the tagForDecision Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the tagForDecision Field Tag. Save your Field Tags by pressing Enter (Return) or adding a comma after each entry. |
|
Select this tab to open the list of supported keyboard shortcuts you can use in the component settings modal. Keyboard shortcuts include:
Additional keyboard shortcuts:
|
Cancel |
Click this button to undo any unsaved configuration changes and return to the canvas. |
Save & Close |
Click this button to save all settings as configured and return to the canvas. |
Display Panel
Label and View Mode
|
Default Display Options
|
Data Panel
Initial Values
The Initial Values table displays the fields added to the Grid component as column headers. Once you add components to your Grid in the Module Builder, the field headers appear in the Initial Values Table. After adding component fields to your Grid, you can enter and/or edit table values in each cell. You can also output values from other components (such as Plug-In components) to existing Grid fields. To customize the table columns or rows, use the Table Column and Table Row Settings.
Setting |
Description |
---|---|
Table Column Settings |
Hover over the column header and select the
From the column settings drop-down menu, select one of the following options:
|
Table Row Settings |
Hover over the column header and select the
From the row settings drop-down menu, select one of the following options:
|
|
Add a new row to all Grid column fields. NOTE Rows that contain no data in any column field do not display in Express View. |
Store Data in Database |
The Store Data in Database setting affects how data persists through your application. When set to
NOTE 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 NOTE 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. To learn more about Store Data in Database in the context of API modules, see the panelResponse Panel section of the API Specification Snippet article in our In-Product Help. TIP 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 |
Add Row on Initialization |
Adds one blank row if the Grid contains no data entries on initialization. If the Grid contains data entries, the row won't be added. |
Validation Panel
User Input
Setting |
Description |
---|---|
Required |
When set to By default, the Required toggle is set to |
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 Panel
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. Use custom CSS to maintain a consistent look and feel if the field or element is part of a template or more than one module. Updated CSS styling applies to all components that reference this custom class name. |
Adding a Grid Component
In this example, use the Grid component to display a Market Summary spreadsheet for vehicle insurance. The Grid will include the insurance carrier, type, premium amount in USD, and the market status. Then add sorting and filter Grid operations that allow end-users End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. to modify the grid view.
What You Need
Before starting this configuration, you'll need the following:
-
A Workspace.
-
An Unqork application.
-
A module with a title.
Accessing Vega
Currently, the Grid component is only available in Vega runtime engine. To migrate your Centauri module to Vega:
1. | Open your Workspace. |
2. | Select your application. |
3. | Open your application module. |
4. | At the top of the Module Builder, select the version drop-down. By default, this is set to Runtime v1.0.0 ![]() |
5. | In the version drop-down menu, select Runtime v2.0.0 ![]() |
Configure the Text Field Components
When configuring the Grid component, you must start with the fields you want for your Grid. For this example, you'll add Text Fields for your Grid fields.
1. | Drag and drop four ![]() |
Property ID |
Label Text |
---|---|
carrier |
Carrier |
type |
Type |
premium |
Premium |
status |
Status |
3. | Save & Close each component as you add it. |
Configure the Grid Component
Next, add your Grid component to use your Text Fields as table columns.
1. | Drag and drop a ![]() ![]() |
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 gridInsurance. |
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 Market Summary. |
4. | In the View Type drop-down field, select Spreadsheet. |
5. | Set the Read Only View toggle to ![]() |
6. | Click Save & Close. |
7. | Drag and drop the carrier, type, premium, and status ![]() ![]() |
8. | Hover over the gridInsurance ![]() ![]() |
9. | In the Initial Values table, enter the following values: |
|
Carrier (carrier) |
Type (type) |
Premium (premium) |
Status (status) |
---|---|---|---|---|
1 |
Unqork Auto |
Motorcycle |
$10,000 |
Not Taken Up |
2 |
State Farm |
Auto |
$20,000 |
Submitted |
3 |
Nationwide |
RV |
$50,000 |
Not Taken Up |
4 |
American Family |
Boat |
$25,000 |
Indication |
5 |
Geico |
Auto |
$25,000 |
Submitted |
6 |
Unqork Auto |
Auto |
$30,000 |
Submitted |
7 |
Nationwide |
RV |
$60,000 |
Indication |
8 |
Geico | Auto |
$12,000 |
Not Taken Up |
9 |
State Farm |
Motorcycle |
$5,000 |
Not Taken Up |
10 |
American Family |
Boat |
$30,000 |
Submitted |
10. | Click Save & Close. |
Configure the Columns Component
Add a Columns component to organize the Grid operations you'll add for your Grid.
1. | Drag and drop a ![]() ![]() |
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 colGridOperations. |
3. | Click Save & Close. |
Configure the Initializer Components
Your Initializer components will contain the Grid operations for your Grid component. For this example, you'll enter the GRID.SET_SORT and GRID.SET_FILTER operations in the Initializer Outputs tables Enter outputs components and actions you want the component to perform..
1. | Drag and drop three ![]() ![]() |
Property ID |
Canvas Label Text |
---|---|
initSort |
Set Sort By |
initFilterCarrierToggle |
Filter Carrier to Unqork Auto |
initFilterCarrier |
Filter Carrier by String |
3. | In the Outputs table of the initSort ![]() |
Property ID |
Type |
Value |
---|---|---|
grid |
GRID_OPERATION |
{ "type": "GRID.SET_SORT", "options": { "inputs": [ { "targetKey": "sortBy", "alias": "A" } ], "targetKey": "gridInsurance", "column": "=A", "direction": "asc" } } |
4. | In the Outputs table of the initFilterCarrierToggle ![]() |
Property ID |
Type |
Value |
---|---|---|
grid |
GRID_OPERATION |
{ "type": "GRID.SET_FILTER", "options": { "targetKey": "gridInsurance", "value": "Unqork Auto", "column": "carrier", "mode": "toggle", "type": "includesString" } } |
5. | In the Outputs table of the initFilterCarrier ![]() |
Property ID |
Type |
Value |
---|---|---|
grid |
GRID_OPERATION |
{ "type": "GRID.SET_FILTER", "options": { "inputs": [ { "targetKey": "filterString", "alias": "A" } ], "targetKey": "gridInsurance", "value": "=A", "column": "carrier", "mode": "replace", "type": "includesString" } } |
6. | Save & Close each component as you add and configure it. |
7. | Drag and drop your initSort ![]() ![]() |
8. | Drag and drop your initFilterCarrierToggle and initFilterCarrier ![]() ![]() |
Configure the Grid Operation Triggers
The Initializer components you added will now modify your table with the correct input from the end-user End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.. Using a Dropdown, Button, and Text Field component, end-users can correctly sort and filter the Grid. These components can also trigger your Initializers, making the Grid view dynamic on the end-user's selection.
Adding the Dropdown Component
Add a Dropdown component to determine how your initSort Initializer sorts your Grid when the end-user End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. selects a value.
1. | Drag and drop a ![]() ![]() ![]() |
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 sortBy. |
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 Sort by:. |
4. | In the Data table, enter the following values: |
Option Label |
Option Values |
---|---|
Carrier |
carrier |
Premium |
premium |
Status |
status |
5. | In the Trigger field, enter or select initSort. |
6. | Click Save & Close. |
Adding the Button Component
Add a Button component to determine how your initFilterCarrierToggle Initializer sorts your Grid when the end-user End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. clicks the button.
1. | Drag and drop a ![]() ![]() ![]() |
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 btnCarrier. |
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 Filter 'Unqork Auto' only. |
4. | Set the Action Type The action performed by the button when selected. to Event. |
5. | In the On Click field, enter or select initFilterCarrierToggle. |
6. | Click Save & Close. |
Adding the Text Field Component
Add a Text Field component to determine how your initFilterCarrier Initializer sorts your Grid when the end-user End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. enters a value.
1. | Drag and drop a ![]() ![]() ![]() |
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 colGridOperations. |
3. | Set the Hide Label toggle to ![]() |
4. | In the Trigger On Keypress field, enter or select initFilterCarrier. |
5. | Click Save & Close. |
6. | Save your module. |
Here's how the completed module looks in the Module Builder:
Preview your module in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. After configuring a module, click Preview in the Module Editor to interact with the module in Express View. Here's how your module displays:
Resources