ViewGrid Component

Estimated Reading Time: 9 minutes

Overview

Unqork applications often use dashboards, and configuring a ViewGrid component is the simplest way to create a basic dashboard display. As with all things Unqork, ViewGrids offer flexibility. ViewGrids let you to view and manage submission data, work queues, and large data sets. Tailor your Viewgrid to include any number of columns, buttons, and filters to best suit your needs. These features 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 easily navigate and manage the data in the ViewGrid.

You can find the ViewGrid component under the Display & Layout group to the left of the Module Builder.

What You'll Learn

After completing this article, you’ll know when to use a ViewGrid component, how to configure its settings, and how to use it in an Unqork application.

About the Configuration Window

General

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	A Property Name is the unique field ID used by Unqork to track and link components in your module. The Property Name is how the software identifies your component. Using Property Names 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. (application programming interface) calls. Property Names must use camel case (stylized as camelCase) without spaces or punctuation. Property IDs must use camel case (stylized as camelCase) without spaces or punctuation.
ViewGrid Tab	Select this tab to see the configuration settings of the ViewGrid component.
Permissions Tab	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.
Cancel	Click this button to undo any unsaved configuration changes and return to the canvas.
Save	Click this button to save all settings as configured and return to the canvas.

Customization Settings

(click to expand image)

Setting	Description
Show Title	Display the label of the ViewGrid component above the dashboard.
Show Filters	Display a search box below each column header. End-users can use this search box to type a few letters or an entire word to narrow down the results in the dashboard. NOTE The ViewGrid component does not support filtering numeric columns
Grid Height	Control the grid height (in pixels). Grid height must be between 250 and 426 pixels. The grid height is set to 426 pixels by default. Leave this field blank to keep the default setting.
Page Size	Control the number of records to display on each page. The ViewGrid shows 10 records by default. Leave this field blank to keep the default setting.
Source Has Pagination	Format the pagination in your ViewGrid. Select this checkbox if pagination is enabled in the original data source component.
Paginator Source	Use the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of a Plug-in component as the original data source.
Select Row Output	Use the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of a component to store the unique identifier of select rows. Create this value in the Select Row ID Property field.
Select Row ID Property	Use a key from your data source as a unique identifier for the selected row in the ViewGrid table.
Enable Selection of Multiple Items	Allow end-users to select more than one row at a time.
Show Row Selection	Create a checkbox for each row of your ViewGrid. The row highlights blue when your end-users select a box.
Restrict Multiple Selection With Cmd/Ctrl	Pressing and holding the Shift key allows end-users to select rows. Pressing and holding Ctrl (Windows/Linux) or Cmd (Mac OS) allows end-users to select any rows on the page.
Action	Create a buttonClick event for each row of your ViewGrid. Enter a name to display in all rows. The Action label is Submit by default. You can also connect your ViewGrid to a Decisions component to trigger the action. TIP Enter null to remove the action button completely.
Event	Enter a value to output to the console data when the end-user clicks your Action button.
No Data Text	Enter a message that displays when there's no data to display.
Data Source URL	Enter or paste the URL of your data source web page if your data is stored externally instead of in another component.
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.

Data Table Settings

(click to expand image)

Input Table

Setting	Description
ID	Provide your component with an input reference. For example, the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of another component in the module.
Required	End-user must enter a value in the field of this input component before the component displays.

Outputs Table

Setting	Description
ID	The component where the ViewGrid is sending the data. Enter the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module.(s) of the destination component(s). The Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. entered must match the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. used in the output component.
Mapping	Specifies the field ID from the input that the output component is set to.

Setting

Description

The component where the ViewGrid is sending the data. Enter the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module.(s) of the destination component(s). The Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. entered must match the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. used in the output component.

Mapping

Specifies the field ID from the input that the output component is set to.

Display Settings

(click to expand image)

Display Table

Setting	Description
ID	The field ID of an element that exists in your input to display in the grid.
Formula	Adjust the data in the row. For example, use MomentJS A JavaScript date library that lets you parse, validate, manipulate, and reformat dates. to reformat a stored Date Input value from mm/dd/yyyy to dd-mm-yy. NOTE Do not use this setting to perform calculations or manipulate data.
Heading	Display a heading 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 for each Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. entered in the ID fields.
Type	Determine the format in which your data displays in your ViewGrid. Select string, number, or date using the drop-down menu.
CSS	Apply an optional custom style sheet.
Button	Turn the ID name from the Display table into a button. This button applies to each row in your ViewGrid under the selected column. Use a You can also use a Decisions component to trigger the button.

Additional Display Settings

Setting	Description
Hidden	Hide the ViewGrid in Express View. Your ViewGrid still shows in the Module Builder.
Enable Infinite Scrolling	Allow end-users to scroll through the ViewGrid table without pagination.
Sort by Columns	Allow end-users to sort the columns of your ViewGrid. Click the column header once to sort in ascending order (A to Z). Click the column again to sort in descending order (Z to A).
Always Display Sort Buttons	Add an arrow icon next to the column name. The arrow icon points up (ascending order, A to Z) or down (descending order, Z to A) depending on your sort order. A column displays in ascending order by default when it's clicked. NOTE This feature is only for visual purposes. As long as you select Sort Columns, your end-users can sort columns by clicking on the header.
Field Tags	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.
Comment	Enter comments about your component and its configuration. Use this setting to keep your teammates in the loop.

Adding a ViewGrid Component

Now, explore a dashboard that displays some basic submission data from a module. This dashboard doesn't require action buttons. The data used in this configuration is dynamic, so it updates as end-users submit or edit submissions.

To simplify this configuration, you'll use the following source module: https://training.unqork.io/#/form/648c6514991ac5b474b73b2f/edit. This module is a front-end module where end-users can submit basic information, like name, date of birth, and email address. You'll use a Plug-In to retrieve this information to display on a dashboard.

NOTE These instructions assume that you have an open module saved with a title.

What You Need

For this configuration, you'll need the following components:

1 Hidden component
1 Plug-In component
1 ViewGrid component
1 Initializer component

Configure the Hidden Component

First, configure a Hidden component to store the module ID of the source module. You'll need copy the module ID of the source module's as follows: https://training.unqork.io/#/form/648c6514991ac5b474b73b2f/edit.

In the Module Builder, drag and drop a

Hidden component onto your canvas.

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

In the Default Value field, enter 648c6514991ac5b474b73b2f. This is the source module's module ID.

Click Save & Close.

Configure the Plug-In Component

Now, add Plug-In component to retrieve the submission data from the source module to display in your dashboard.

Drag and drop a Plugin Component Icon

Plug-In component onto your canvas, placing it below your

Hidden component.

From the Internal Services drop-down, select List Submissions for Dashboard. The /fbu/uapi/system/GetSubmissions URL automatically displays in the Data Source URL field.

In the Inputs table enter the following:

Property ID	Mapping
moduleId	moduleId
'firstName,middleName,lastName,email,dateOfBirth'	fields

NOTE The first row references the module ID stored in the moduleId Hidden component. The second row identifies which source module fields to pull into the dashboard. The firstName, middleName, lastName, email, and dateOfBirth fields display in the dashboard for this use case. The values entered in the Mapping column (moduleId and fields) are native values in Unqork.