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 article, 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

• 1 Initializer component.

• 1 Plug-In component.

• 1 ViewGrid component.

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.

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:

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

4.

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

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 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:

5.

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

6.

In the Display table, enter the following:

7.

Click Save.

8.

Save your module.

Here's how your Module Builder looks after configuration: 

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

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  Initializer and plugListSubmissions Plug-In components inside the fgListSubmissionsForDashboard Field Group component.

4.

Delete the vgSubmissions 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: 

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

2.

The dwfFilterSubmissions 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.

3.

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

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 component also inputs your plugListSubmissions Plug-In component. Then, it outputs the status and total submissions in the totalStatus and submissionsTotal Hidden components.

5.

Next, the kpiTotalSubmissions KPI component takes the value in the totalStatus Hidden component and displays it to the manager role. The chartStatuses 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.

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

• After approving or denying an application, are you brought to the Manager Dashboard screen? If not, review the End node configuration in the Configure the Manager Role Dashboard Redirect section.

• Are your completed test workflow submissions displaying on your Manager Dashboard screen? If not, review the configuration steps in the Bring Workflow Data Into Your Dashboard Module and View the Submission Data in a Dashboard sections.

• Is the submission data not displaying correctly in the Approved or Denied ViewGrids, or the Chart or KPI?  If not, review the snippet configuration steps in the Review the Chart and KPI Dashboard Snippet Configuration section. Also, review the Plug-In and Initializer configuration in the Bring Workflow Data Into Your Dashboard Module section.

  TIP  The configuration values you enter (Property IDs A Property ID is the unique field ID used by Unqork to track and link components in your module., Inputs Enter inputs components and actions you want the component to perform. and Outputs table Enter outputs components and actions you want the component to perform. Mapping, JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data., and so on) are often case sensitive. Ensure your inputs match the configuration instructions and example builds.

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 Program

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