Step 12: Creating a Dashboard to Display Submitted Travel Requests

Estimated Reading Time:  12 minutes

Introduction

In the previous use case, you sent employees approved or denied email messages based on the manager's review. The final step of your application is to create a manager review dashboard. This dashboard will display all travel requests reviewed by the manager role, organized by approved or denied status. The dashboard will also use a Chart and KPI component to display a summary of the 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. using interactive widgets.

The dashboard module you'll create won't exist in the flow of your workflow-type application. Instead of using a Task node to create this dashboard module, you'll create a stand-alone module at the application level.

You can preview an example of this completed use case step here: https://training.unqork.io/#/form/6480e19f6b6743aa0d61a4b1/edit.

Learning Objectives

In this use case lesson, you'll learn how to create a dashboard module that displays all travel requests submitted by the manager role.

What You Need

To complete this step of your application, you need

Open Your Workflow-Type Application and Create a Module

Start by opening the workflow-type application you previously created in the Workflow Builder. Then, create a new module that exists outside of your workflow.

1. From the Workspaces page, locate your Workspace by selecting (Search magnifying glass) and entering Creator Workshop Workspace [your name].
2. In your Workspace, select View App on your application tile. Your application title will be [initials] + “Creator Workshop App” + [date you created the application].
3. From the menu to the left of the Application page, select  Modules.
4. Click + Create New.
5. In the Module Name* field, enter Creator Workshop: Step 12: Manager Dashboard.
6. From the Module Type* drop-down, select FE.
7. Click Create.

Bring Workflow Data Into Your Dashboard Module

Configuring the Plug-In Component

Because this module isn't connected to your workflow, you can use a Plug-In component to make 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. call to get the necessary information. In this use case, you'll use your workflow ID and any necessary fields as your Plug-In component's inputs.

You can find the workflow ID in the Workflow Builder's browser URL after /workflow/. For example, if the URL of a workflow is https://training.unqork.io/workflow/6480c1b8991ac5b474aaee6c, the workflow ID for that workflow is 6480c1b8991ac5b474aaee6c.

Image showing workflow ID in the broswer URL.

To configure your Plug-In component:

1. In the Module Builder, drag and drop a Plug-In component onto the Module Builder 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 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 plugListSubmissions.
3. In the Internal Services drop-down, select List Submissions for Dashboard.
4. In the Inputs table, enter the following values:

Property ID

Mapping

'[Your Workflow ID]'

workflowId

'employeeFullName,managerFullName,employeeEstimatedCost,managerBudget,requestStatus'

fields

TIP  To find the workflow ID of your workflow, open your Creator Workshop workflow-type application. Then, copy the workflow ID from the Workflow Builder's browser URL and paste it into the Inputs table's Enter inputs components and actions you want the component to perform. Property ID column. Ensure you put single-quotation marks around your workflow ID.

Image showing the Plug-In component configuration for listing employee travel request submissions on the Manager Dashboard module.

5. Click Save.

Configuring the Initializer Component

Your Plug-In is now set up to get the 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. to display in your dashboard. Because your Plug-In's Trigger Type is set to Manual by default, it needs an Initializer to trigger the 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. call.

1. Drag and drop an Radio Button component icon Initializer component onto the Module Builder canvas, placing it above your plugListSubmissions 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 initPlugSubmissions.
3. From the Trigger Type drop-down, select New Submission.

NOTE  Use this trigger type when no submission ID exists in the URL of a page. Since this is a standalone module not connected to your workflow, there isn't an existing submission ID. So, it must be triggered as a new submission.

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

Property ID

Type

Value

plugListSubmissions

trigger

GO

Image showing the Initializer component configuration for triggering the plugListSubmissions Plug-In component.

NOTE  Initializers triggering other components only require configuring the Outputs table. So, the Inputs Enter inputs components and actions you want the component to perform. table is left blank.

5. Click Save & Close.

View the Submission Data in a Dashboard

Your plugListSubmissions Plug-In component now brings all of the finalized travel requests into your module. The next step is to use a ViewGrid component to organize and display all the employee request submission data for the manager role to see.

1. Drag and drop a Dropdown Component Icon ViewGrid component onto the Module Builder canvas, placing it below the plugListSubmissions Plug-In component.
2. In the Label Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. and Property Name A Property ID is the unique field ID used by Unqork to track and link components in your module. fields, enter vgSubmissions.
3. In the Action field, enter null. This removes the ViewGrid's default action button. You won't be needing it.
4. In the Inputs Enter inputs components and actions you want the component to perform. table, enter the following: 

ID

Required

plugListSubmissions

(No)

Image showing the ViewGrid Inputs table with id set to plugListSubmissions.

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

ID

Mapping

exportId

_id

Image showing the ViewGrid Outputs table with id set to exportId and mapping set to _id.

NOTE  Using the exportId exports each submission, line by line, based on their unique submission ID. The _id mapping is how these submissions are stored in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

6. In the Display table, enter the following:

ID

Formula

Heading

employeeFullName

 

Employee

managerFullName

 

Manager

employeeEstimatedCost

 

Est. Cost ($)

managerBudget

 

EOY Budget ($)

requestStatus

 

Status

Image showing the ViewGrid Display table populated with submission data fields to display as columns on the ViewGrid.

NOTE  These display IDs match component Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module.s brought into this module from your workflow. The Heading column of the Display table creates headers for your ViewGrid columns and organizes the submission data into these columns.

7. Click Save.
8. Save your module.

Here's how your Module Builder looks after configuration: 

Image showing the Manager Review module in the Module Editor before the Chart and KPI Dashboard snippet is introduced.

At this point, your ViewGrid shows all the completed workflow travel request submissions. It also organizes this submission data into the columns you configured in the Display table of your ViewGrid.

Though this example use case doesn't have any submission data to display, here's how the empty dashboard looks 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.:

Image showing the dashboard module in Express View before the Chart and KPI Dashboard snippet is introduced.

Display Submission Data in a Chart

Your ViewGrid now displays all of your employee travel request 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.. Next, You'll use a Chart and KPI component to translate your submission data into a simpler and more visually appealing summary.

Add the Chart and KPI Dashboard Snippet

To display your data in a chart and KPI widget, you'll use a snippet.

To add the snippet to your Manager Review module:

1. Click the Snippets button at the top of the component tray.
2. In the  Search Snippets search tool field, enter Chart and KPI Dashboard.
3. Open the Local Snippets group drop-down.
4. Drag and drop the Chart and KPI Dashboard snippet onto the bottom of your canvas.
5. Save your module.

Organize the Chart and KPI Dashboard Snippet

Next, organize and delete components from the Chart and KPI Dashboard snippet configuration.

1. Drag and drop the panelDashboard Panel component outside of the panelKPIAndChartDashboard (KPI and Chart Dashboard (to Delete)) Panel component.
2. Delete the panelKPIAndChartDashboard (KPI and Chart Dashboard (to Delete)) Panel component.
3. Drag and drop the initPLugListSubmissions Radio Button component icon Initializer and plugListSubmissions Plug-In components inside the fgListSubmissionsForDashboard Field Group icon Field Group component.
4. Delete the vgSubmissions Dropdown Component Icon ViewGrid component.
5. Hover over the plugListSubmissions Plug-In component and click the (Settings) button from the component toolbar. The configuration window appears.
6. In the Post Trigger field, enter dwfFilterSubmissions. This connects the plugListSubmissions Plug-In to the rest of the snippet.
7. Click Save.
8. Save your module.

Here's how your module looks after adding the snippet and organizing your snippet

Image showing the Manager Review module in the Module Editor after the Chart and KPI Dashboard snippet is added and configured.

Review the Chart and KPI Dashboard Snippet Configuration

Now that you've set up the Chart and KPI Dashboard snippet, let's review what this configuration does. Expand all of the panels in your Manager Review module to help you reference each component.

1. Your plugListSubmissions Plug-In component gets 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 your workflow and outputs it to the dwfFilterSubmissions Data Workflow Icon Data Workflow component.
2. The dwfFilterSubmissions Data Workflow Icon Data Workflow component filters your employee travel request data and splits it into two Hidden component outputs. These outputs are the submissionsApproved and submissionsDenied Hidden components.

Image displaying the dwfFilterSubmissions Data Workflow component configuration.

3. Your viewGridApproved and viewGridDenied Dropdown Component Icon ViewGrid components input and display the relevant data from your submissionsApproved and submissionsDenied Hidden components.

Image displaying the viewGridApproved ViewGrid component configuration.

Image displaying the viewGridDenied ViewGrid component configuration.

4. Your KPI and Chart components only display the status and total submissions from your submission data. To filter your submission data, the dwfKpis Data Workflow Icon Data Workflow component also inputs your plugListSubmissions Plug-In component. Then, it outputs the status and total submissions in the totalStatus and submissionsTotal Hidden components.

Image displaying the dwfKpis Data Workflow configuration.

5. Next, the kpiTotalSubmissions KPI Icon KPI component takes the value in the totalStatus Hidden component and displays it to the manager role. The chartStatuses KPI Icon Chart component takes the value in the submissionsTotal Hidden component and displays it as a bar graph for the manager role.

Once familiar with the configuration, Preview it 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.. Your dashboard will only show completed submissions, so your dashboard will show up as blank until the end of the configuration.

Configure the Manager Role Dashboard Redirect

The final step of your use case is to redirect the manager role from your workflow to the dashboard screen once they approve or deny a travel request. You can do this by configuring a different navigation type for your End node. Once the workflow path reaches the End node, you can navigate manager 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. to the dashboard module screen.

1. From the menu to the left of your Creator Workshop Application page, select  Modules.
2. Open the Manager Dashboard module.
3. 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..
4. Copy the URL in the browser window.
5. Return to your Creator Workshop Application page.
6. From the  Workflows tab, select your Creator Workshop workflow.
7. Select the Approved Travel Request End End node.
8. Click  Edit to open the Edit User Task menu.
9. Set Choose navigation type to  Use Redirect URL.
10. In the Redirect URL field, paste your Manager Dashboard Express View module URL.

11. Repeat the same steps for the Denied Travel Request End End node.
12. Save... your workflow.
13. In the Save to Version History window, select Save.

View the Dashboard Module in Express View

To accurately test your dashboard application, Preview your workflow 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.. Create and complete test employee travel request submissions to populate your dashboard. You can do this by entering test information, submitting employee travel requests, and approving or denying them on the Manager Review screen. Each time you complete the workflow process, the travel request submissions populate on your Approved or Denied dashboards on your Manager Dashboard screen.

To populate your dashboard: 

1. Open your Creator Workshop App workflow-type application.
2. Open the  Workflows tab to the left of the Application page.
3. Select your Creator Workshop workflow.
4. In the Workflow Builder, Preview your workflow in Express View.
5. Submit the employee travel request information for manager approval using a personal email address for the manager email.
6. In the manager review email, select the link to access the travel request submission in the Manager Review screen.
7. In the Manager Review screen, approve or deny the application.
8. Repeat these steps until you populate several approved or denied travel requests on your Manager Dashboard screen.

Test the Dashboard Module in Express View

When testing role-specific screens on your Express View preview, use the Role-Based Access Control (RBAC) settings to view your application how 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. would. At the top of your Express View preview, select Show to open the Express RBAC Control. In the Preview as: field, switch between the Administrator, trainingApplicant, and trainingManager roles to view and test each part of your application.

Image showing the Express RBAC Controls dropdown.

If your configuration isn't working as expected, try asking yourself the following questions: 

TIP  Having trouble with your configuration? Visit our Troubleshooting the Creator Workshop Configuration article to help identify and resolve any errors on your application.

Recap

In this use case, you created a module outside of your workflow at the application level. Using a Plug-In component, you pulled employee travel request submission data from your workflow. Using the ViewGrid component, you created a dashboard that organizes and displays the completed employee travel requests. Going a step further, you added a snippet that contains a more advanced dashboard configuration. You learned how Data Workflows and Panels could separate and organize your submission data in different ViewGrid dashboards. You also learned how Chart and KPI components can dynamically display 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. in a more interactive way.

To complete the use case, you configured your Approved Travel Request and Denied Travel Request End nodes to redirect managers to the Manager Dashboard module after submitting their approved or denied status.

Complete the Novice Configurator Learning Path

To complete the Novice Configurator Learning Path, take the Novice Configurator Exam. After passing the exam, you'll receive the Novice Configurator Certification Badge.