How to: Create a Dashboard Using the Grid Component

Estimated Reading Time:  5 minutes

Overview

Using the Grid component, you can collect, organize, and display data to 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. in a dashboard. The data you display can be added manually or imported into your Grid component.

In this how-to guide, you'll create a dashboard that displays imported values. You'll configure a Grid component with the component fields to display your data. You'll import values from another Unqork application using an internal 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. to populate your Grid component.

What You'll Learn

In this article, you'll learn how to create a dashboard using the Grid component.

Set Up Your Dashboard Module

Start by setting up a module application where you'll add your Grid component.

What You Need

To create a new module application, you need:

Accessing Vega

Currently, the Vega Table component is only available in the Vega runtime engine. To use the Vega runtime in your module:

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, it's set to Runtime v1.0.0 Open Dropmenu icon.
5. From the version drop-down, select Runtime v2.0.0 Open Dropmenu icon.

Configuring the Dashboard Grid

Configuring the Grid Component Fields

Your Dashboard Grid displays submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. from an employee travel request workflow application. In the travel request application, employees submit travel requests, which are then reviewed by their managers. The dashboard you create imports all reviewed employee travel requests. This data includes the employee and manager names, the request status (approved or denied), the estimated cost, and the manager's budget. In order to display this data in your Grid, start your configuration by creating the appropriate component column fields.

1. Drag and drop three  Text Field components 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. 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

employeeFullName

Employee's Full Name

managerFullName

Manager's Full Name

requestStatus

Status

3. Save & Close each component as you add it.
4. Drag and drop two  Number components onto your canvas, placing them below your  Text Field components.
5. 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

employeeEstimatedCost

Est. Cost ($)

managerBudget

EOY Budget ($)

6. Save & Close each component as you add it.

Configuring the Grid Component

Now that you've added the Grid component fields, you can configure your Grid component and nest the component fields inside it.

1. Drag and drop a Grid Component Icon Table component onto your canvas, placing it below your  Number components.
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 Insurance Claim Summary.
4. Set the Read Only View toggle to Toggle On Icon (ON).
5. Click Save & Close.
6. Drag and drop the employeeFullName, managerFullName, and requestStatus  Text Field components inside the gridInsurance Grid Component Icon Table component.

7. Drag and drop the employeeEstimatedCost and managerBudget  Number components inside the gridInsurance Grid Component Icon Table component, placing them between the managerFullName and requestStatus  Text Field components.

8. Click Save & Close.

Configure the Grid Data

Next, import and display submission data from another Unqork application in your Grid component.

Configuring the Plug-In ComponentImage displaying the plugGetListSubmissions configuration that imports submission data into the dashboard module from another Unqork application.

To import the submission data into your module, use a Plug-In component.

1. Drag and drop a Plugin Component Icon Plug-In component onto your canvas, placing it above the gridInsurance Grid Component Icon Table 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 Canvas Label Text fields, enter plugListSubmissions.
3. From the Internal Services drop-down, select List Submissions for Dashboard.
4. In the Inputs Enter inputs components and actions you want the component to perform. table, enter the following:

Property ID

Mapping

'6499ba6dc0438d444e8a8e35'

workflowId

'employeeFullName,managerFullName,employeeEstimatedCostUSD,managerBudget,requestStatus'

fields
5. In the Outputs Enter outputs components and actions you want the component to perform. table, enter the following:

Property ID

Mapping

Option

gridListSubmissions

 

fill

TIP  When you use a Plug-In component to import and display data in a Grid component, enter fill in the Option column of the Outputs table. The fill setting fills the imported data into the matching fields nested in the Grid.

6. Click Save & Close.

Configuring the Initializer Component

Add an Initializer component to trigger your Plug-In component when the page loads.

Image displaying the initPlugListSubmissions configuration triggering the plugListSubmissions Plug-In component.
1. Drag and drop an Radio Button component icon Initializer component onto your canvas, placing it above the plugListSubmissions Plugin Component Icon Plug-In 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 Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . fields, enter initPlugListSubmissions.
3. From the Trigger Type drop-down, select New Submission.
4. In the Outputs table Enter outputs components and actions you want the component to perform., enter the following: 

Property ID

Type

Value

plugListSubmissions

trigger

GO
5. Click Save & Close.
6. Save your module.

Here's how your completed module looks in the Module Builder:

Image showing the completed module application configuration.

Your module application now imports values from another Unqork application and displays them in a dashboard. 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. 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.. Here's how your module displays with imported submission data:

Image showing the completed dashboard module in Express View Preview.