ViewGrid Component
Estimated Reading Time: 7 minutes
Overview
The ViewGrid component creates a grid to view data pulled from other components.
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 to easily navigate and manage the data in the ViewGrid.
The ViewGrid component displays fields specified from a component listed in the Inputs table. Here, you enter your source component, such as a Hidden or Plug-in component. The Outputs table specifies which data to push into your module.
The Display table outlines what displays in your ViewGrid. The columns and action buttons for your ViewGrid take shape once you set up your Display table.
Locate the ViewGrid component under the Display and Layout group in your Module Editor component toolbar.
Here's an example of a ViewGrid in Express View:
What You'll Learn
In this article, you'll learn how to:
About the Configuration Window
General
Setting | Description |
---|---|
Label |
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. |
Property Name |
Track and link components in your module with a unique field. Property Name is also called a Property ID. The software identifies your component through its Property ID. Property IDs let you link components, creating logic-based configurations and API (application programming interface) calls. 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 Button |
Click this button to undo any unsaved configuration changes and return to the canvas. |
Save Button |
Click this button to save all settings as configured and return to the canvas. |
Configuration Settings: Group 1
Customize how your ViewGrid looks in this group, including its size and style. Take a closer look at these settings:
Setting |
Description |
---|---|
Show Title |
Display the label of the ViewGrid Component above the ViewGrid. |
Show Filters |
Display a search box below each column header. End-users use this search box to type a few letters or an entire word to narrow down the results from the ViewGrid. |
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 of a Plug-in component as the original data source. |
Select Row Output |
Use the Property ID 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 on your action button. The labeled button applies to all rows. The ViewGrid shows a Submit button by default. TIP Connect your Action to a Decision 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 if there's no data to display. This is optional. |
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 Tables
The data tables make up the heart of your ViewGrid component and require an input and an output. Customize and style your data tables if you feel creative!
Input Table
Setting |
Description |
---|---|
ID |
Provide your component with an input reference. For example, the Property ID 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 |
Component for the ViewGrid to send data to. Enter the Property ID(s) of the destination component(s). The Property ID entered must match the Property ID used in the output component. |
Mapping |
Specifies the Field ID that exists within the input that the output component is set to. |
Display Table
Setting |
Description |
---|---|
ID |
Field ID of an element that exists within your input to display in the grid. |
Formula |
Adjust the data in the row. For example, use the formula Moment.JS 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 for each Property ID 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 Decisions component to give your button a trigger. |
Configuration Settings: Group 2
More options are underneath the data tables to customize your ViewGrid. Take a closer look:
Setting |
Description |
---|---|
Hidden |
Hide the ViewGrid in Express View. Your ViewGrid still shows in the Module Editor. |
Enable Infinite Scrolling |
Allow end-users to scroll through the ViewGrid table without pages dividing the records. |
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 single source module. This dashboard is simple and doesn't require action buttons.
You need to practice building a dashboard that populates with module submissions since this is a common configuration at Unqork. This data is dynamic, meaning it updates as end-users submit or edit their submissions.
What You Need
To build this dashboard, you need:
-
1 Panel component
-
1 Initializer component
-
1 Hidden component
-
1 Plug-In component
-
1 ViewGrid component
This use case shows you how to build a dashboard. Use the source module from this example to simplify things (training.unqork.io/#/form/5eb01aa6811bf80215fd706b/edit). Or, create your own source module if you feel comfortable.
These instructions assume that you already created a new, titled module.
Configure the Panel Component
Use a Panel component as a container for the components that follow.
1. | Drag and drop a Panel component onto your Module Editor canvas. |
2. | In the Property ID field, enter panelDashboard. |
3. | Click Save. |
Configure the Initializer Component
Add an Initializer component. This Initializer component triggers the Plug-In component that follows.
1. | Drag and drop an Initializer component onto your canvas. Place the Initializer inside the Panel. |
2. | In the Property ID and Canvas Label Text fields, enter initStart. |
3. | From the Trigger Type options, select New Submission. |
4. | In the Outputs table, enter: |
Property ID | Type | Value |
---|---|---|
pluginGetSubmissions |
trigger |
GO |
5. | Click Save. |
Configure the Hidden Component
Add a Hidden component. This component stores the module ID of the source module. Use the module ID of your own source module if you already created one. Copy the module ID from the URL of your source module as follows: https://training.unqork.io/#/form/5eb01aa6811bf80215fd706b/edit.
1. | Drag and drop a Hidden component onto your canvas. Place your Hidden component below the Initializer. |
2. | In the Property ID and Canvas Label Text fields, enter moduleId. |
3. | In the Default Value field, enter 5eb01aa6811bf80215fd706b. |
NOTE If you built a different source module, enter its module ID here.
4. | Click Save. |
Configure the Plug-In Component
Add a Plug-In component. This Plug-In connects your module to the outside world. An API (application programming interface) call makes this connection. The Plug-In pulls submissions from the source module to display in your dashboard.
1. | Drag and drop a Plug-In component onto your canvas. Place your Plug-In below the moduleId Hidden component. |
2. | In the Property ID and Canvas Label Text fields, enter pluginGetSubmissions. |
3. | In the Inputs table. enter: |
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.
4. | 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. |
5. | Click Save. |
Configure the ViewGrid Component
Next, add a ViewGrid component to display your dashboard.
1. | Drag and drop a ViewGrid component onto the canvas. |
2. | In the Label field, enter View Grid. |
3. | In the Property Name field, enter gridView. |
4. | In the Action field, enter null. |
5. | In the Inputs table, enter: |
Setting |
Value |
---|---|
ID |
pluginGetSubmissions |
Required |
Yes (checked) |
6. | In the Outputs table, enter: |
Setting |
Value |
---|---|
ID |
submissionId |
Mapping |
id |
7. | In the Display table, enter: |
ID |
Formula |
Heading |
---|---|---|
firstName |
|
First Name |
middleName |
|
Middle Name |
lastName |
|
Last Name |
|
|
|
dateOfBirth |
=MOMENT(MOMENT(dateOfBirth), 'format', 'MM/DD/YY') |
Date of Birth |
NOTE The Moment.js in the Formula column formats the dateOfBirth values as MM/DD/YY.
8. | Click Save. |
Here's how your completed dashboard looks in Express View:
Changing a ViewGrid Component's Settings
Learn how to make changes to the settings of your saved component:
1. | Hover over the ViewGrid component. |
A 5-button toolbar displays above the component on hover-over.
2. | Click the ![]() |
3. | Make changes to the settings of the component as needed. |
4. | Click Save to save the new settings. |
5. | Save your module. |
Moving a ViewGrid Component
Learn how to move your component to a new position on your canvas:
1. | Hover over the ViewGrid component. |
A 5-button toolbar displays above the component on hover-over.
2. | Click and drag the ![]() |
3. | Save your module. |
Copying a ViewGrid Component
You can make a copy of your component using the Copy and Paste tools. Copy and Paste creates an exact copy of your component, matching all settings. The only noticeable difference between the two components is the Property ID. The Property ID on the new component automatically updates. Remember, every component needs a unique Property ID. Property IDs track and connect components in Unqork.
1. | Hover over the ViewGrid component. |
A 5-button toolbar displays above the component on hover-over.
2. | Click the ![]() |
3. | Click the ![]() |
4. | Update the settings of the copied component as needed. |
5. | Click Save. |
6. | Save your module. |
Removing a ViewGrid Component
Lastly, learn how to delete your ViewGrid component from your module.
1. | Hover over the ViewGrid component. |
A 5-button toolbar displays above the component on hover-over.
2. | Click the ![]() |
3. | Save your module. |