Step 10: Creating a Manager Review Screen

Estimated Reading Time:  18 minutes

Introduction

At this point in your application, employees with valid email addresses can enter their travel information and submit travel requests. The next step is to create an approval screen in your workflow that only manager roles can access. The managers can review and approve or deny each travel request using this screen.

You'll also want to notify employees once their travel request is submitted. You'll use a Signal node to achieve this task. Once a travel request is complete, you can use a Message node to inform the manager that they have a submission to review.

You can preview an example of this completed use case step here: https://training.unqork.io/workflow/6477aee53bfcc5f14a997ecf.

Learning Objectives

In this use case lesson, you'll learn how to create a manager approval screen in a workflow. You'll learn how to use the Signal node to notify employee roles when their travel request is submitted. You'll also learn how to use the Message node to email manager roles with a link to the manager approval screen for approval

What You Need

To complete this step of your application, you need

Open Your Workflow-Type Application

Start by opening the workflow-type application you previously created in the Workflow Builder.

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  Workflows.
4. Click on your Creator Workshop App workflow tile.

Create the Manager Swimlane

To hide the manager review screen from employees, create another swimlane that can only be accessed by manager roles.

1. In the Workflow Builder, hover over the Employee Authenticated swimlane's Extensible Markup Language (XML) is markup language that lets you define and store data in a shareable way. Header Bar.
2. Select (Add). The swimlane's Label shows as New Lane for easy reference.
1. In the Workflow Builder, hover over the New Lane Authenticated swimlane's Header Bar.
2. Select  (Edit). The Edit Lane window displays.
3. In the Label field, enter Manager.
4. In the Assign a Role field, select trainingManager.

Image showing the swimlane Edit Lane window settings for the Manager swimlane. The Label field is named Manager and the Assign a Role field is set to trainingManager.

5. Click  (exit) to close the Edit Lane window.
6. In the top right of the Workflow Builder, click the ··· (ellipsis) button.
7. Select Settings. The Workflow Settings modal A modal is a window that appears on top of the content you are currently viewing. displays.
8. Under Include in Navigation, select  All Tasks Until Lane Change. This lets 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. see all nodes before the workflow switches to a new swimlane.

Image showing the Include in Navigation setting in the Workflow Settings modal set to All Tasks Until Lane Change.

9. Click Save.

Add a Manager Review Task Node

Now that your manager swimlane is set up, configure a Task node that serves as the manager's review screen. This screen is where manager roles will approve or deny employee travel requests.

1. Drag and drop a  Task node into the Manager swimlane.
2. Select your new  Task node to open its Settings Menu.
3. Click  Edit to open the Edit User Task menu.
4. In the Label field, enter Manager Review.
5. Under Module, select Create New Module. The Module Title, Module Path, and Module Type populate with default values.
6. Click Create.
7. In the Next Button Label field, enter Submit & View Dashboard.
8. Disconnect the Employee Travel Information Task node from the Employee Submitted End node by clicking on the arrow connection. Click (Expand} and select  Delete .
9. Move the Employee Submitted End node to the Manager swimlane.
10. Connect the output port (right) of the Employee Travel Information  Task node to the input port (left) of the Manager Review  Task node
11. Connect the output port (right) of the Manager Review  Task node to the input port (left) of the Employee Submitted End node.

Image showing the Include in Navigation setting in the Workflow Settings modal set to All Tasks Until Lane Change.

12. Save... your workflow.
13. In the Save to Version History window, select Save.

Copy/Paste the Configuration Into the Manager Review Module

Your Manager Review module is what the manager role sees when they go to review and submitted travel requests. Because they review all the information the employee submits, you can copy and paste these fields directly from the other modules in your workflow. In Unqork, you can use the same Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module.s for these copied fields to automatically populate them with the values that the employee submitted.

NOTE  You won't be able to save your Manager Review module until after you delete and organize pasted components. This is because some component Property IDs (such as logic components) must be unique to function properly.

Copying/Pasting Values from the Employee Travel Information Module.

1. Open your Creator Workshop App workflow-type application.
2. Open the Employee Travel Information module from the Workflow Builder, or using the  Modules tab to the left of the Application page.
3. In the Module Builder, click the ··· (ellipsis) button.
4. Select Copy Module Definition. The module definition is copied to your clipboard A place on your operating system that stores recently copied content. The clipboard only stores one item at a time..
5. In your Workflow Builder, or Application page  Modules tab, open the Manager Review module.

TIP  As shown in the video below, you can also switch to other modules in your application by selecting the Image showing the drop-down arrow that displays the module select menu. (drop-down arrow) next to your module title.

6. In the Module Builder, click the ··· (ellipsis) button.
7. Select Paste Module Definition. A pop-up modal A modal is a window that appears on top of the content you are currently viewing. displays.
8. In the Module Definition field, press the Ctrl + V keys (PC) or Cmd + V keys (Mac) on your keyboard to paste the module definition from your clipboard A place on your operating system that stores recently copied content. The clipboard only stores one item at a time..
9. Click Paste.

10. Save your Manager Review module.

Copying/Pasting Values from the Employee Information Module.

1. Open your Creator Workshop App workflow-type application.
2. Open the Employee Information module from the Workflow Builder, or from the  Modules tab to the left of the Application page.
3. In the Module Builder, click the ··· (ellipsis) button.
4. Select Copy Module Definition. The module definition is copied to your clipboard A place on your operating system that stores recently copied content. The clipboard only stores one item at a time..
5. In your Workflow Builder, or Application page  Modules tab, open the Manager Review module.
6. In the Module Builder, click the ··· (ellipsis) button.
7. Select Paste Module Definition. A pop-up modal A modal is a window that appears on top of the content you are currently viewing. displays.
8. In the Module Definition field, press the Ctrl + V keys (PC) or Cmd + V keys (Mac) on your keyboard to paste the module definition from your clipboard A place on your operating system that stores recently copied content. The clipboard only stores one item at a time..
9. Click Paste. The content you pasted from your Employee Information module will appear above what you pasted from your Employee Travel Information module

10. Save your Manager Review module.

Organize the Manager Review Module

Now that you have all the content you need inside of your Manager Review module, you can organize it to display only the necessary employee travel information for the manager role.

Deleting Unnecessary Components

Start organizing the Manager Review module by deleting the components that don't display employee travel information. Delete the components below from the module. In the image you can see how the Manager Review module looks after deleting these components.Image showing the Manager Review module after deleting unnecessary components for the manager review.

  • ruleRoundTrip Decisions Component icon Decisions component.
  • calcEmployeeEstimatedCost  Calculator component.

  • fgDefaultValues (Calculating Default Value) Field Group icon Field Group component and all components inside it.

    • initCalcFullNames Radio Button component icon Initializer component.

    • calcFullNames  Calculator component.

  • fgCountryCodes (Calculating Country Codes) Field Group icon Field Group component and all components inside it.

    • dwfCountryCodeConverter Data Workflow Icon Data Workflow component.

    • countryCodeTwo  Hidden component.

    • plugCountryCodes Plug-In component.

    • currencyCode  Hidden component.

  • fgExchangeRates (Calculating Exchange Rates) Field Group icon Field Group component and all components inside it.

    • plugExchangeRates Plug-In component.

    • exchangeRate  Hidden component.

    • dwfFinalRate Data Workflow Icon Data Workflow component.

    • calcEmployeeConvertedEstimatedCost  Calculator component.

    • ruleChangeCurrency Decisions Component icon Decisions component.

  • colEmployeeName Columns Component Icon Columns component and all components inside it.

    • employeeFirstName (Employee's First Name)  Text Field component.

    • employeeLastName (Employee's Last Name)  Text Field component.

  • employeeEmail (Employee Email Address)  Email component.

  • btnShowTravelPolicy (Show Travel Policy) Button component Icon Button component.

  • ruleShowTravelPolicy Decisions Component icon Decisions component.

  • panelPopUp Panel component and all components inside it.

    • htmlTravelPolicy  Columns Component Icon HTML Element component.

  • colManagerName Columns Component Icon Columns component and all components inside it.

    • managerFirstName (Manager's First Name)  Text Field component.

    • managerLastName (Manager's Last Name)  Text Field component.

  • colManagerInfo Columns Component Icon Columns component and all components inside it.

    • managerEmail (Manager Email Address)  Email component.

    • managerTeamName (Manager's Team/Department Name)  Text Field component.

Save your module.

Organizing Components

Next, organize the remaining components to display employee travel request information to the manager role.

1. Drag and drop employeeType (Employee Type) Dropdown Component Icon Dropdown from colEmployeeInfoTwo Columns Component Icon Columns component into the left column of colEmployeeInfo Columns Component Icon Columns component.
2. Drag and drop colEmployeeInfo Columns Component Icon Columns component between the colContactInfo and colEmployeeAirportInfo Columns Component Icon Columns components.
3. Delete the fgEmployeeInformation (Employee Information Fields) Field Group icon Field Group component.

Image showing the Manager Review module after reorganizing components from the Employee Information Fields Field Group component.

4. Save your Manager Review module.

Configure the Panel Component

With the current configuration, the manager role can view and edit employee travel request submissions 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.. Since you want this module to only allow the manager to view the employee travel request information, you can use a Panel component to limit the manager's access.

1. Drag and drop a Panel component at the top of your Manger Review module.
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 panelReviewSubmission.
3. Set the Disable Panel toggle to (ON).
4. Drag and drop the fgEmployeeTravelInformation (Employee Travel Information Fields) Field Group icon Field Group component into the panelReviewSubmission Panel component.

5. Save your Manager Review module.

Adding Request Status Field

Next, add a Dropdown component, allowing the manager role to approve or deny the employee travel request.

1. Drag and drop a Dropdown Component Icon Dropdown component at the bottom of your module, outside of the panelReviewSubmission Panel component.

NOTE  Adding the Dropdown component outside of your Panel component allows the manager role to interact with it.

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 requestStatus.
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 Request Status.
4. To the left of the component's configuration window, select the Actions Icon Datatab.
5. In the Data Source Type table, enter the following: 

Option Label

Option Value

Approve Travel Request

Approved

Deny Travel Request

Denied

Image showing the Data Source Type table values for the requestStatus Dropdown component.

6. To the left of the component's configuration window, select the Actions Icon Validationtab.
7. Set the Required toggle to (ON).
8. Click Save & Close.
9. Drag and drop a Columns Component Icon Columns component below your requestStatus Dropdown Component Icon Dropdown component.
10. 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 colManagerApproval.
11. Under Formatting, click Three Columns Icon (Three Columns).
12. Click Save & Close.
13. Drag and drop your requestStatus Dropdown Component Icon Dropdown component into the center column of your colManagerApproval Columns Component Icon Columns component.

14. Save your module.

Configure Travel Request Notifications

Once an employee completes their travel request, use a Signal node to notify them their request has been successfully submitted. From here, the manager role reviews the completed submission 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 a Message node, you can notify the manager and bring them to the Manager Review screen to review the submitted travel request.

Configuring the Signal Node to Notify Employee Roles

1. Open your Creator Workshop App workflow-type application.
2. From the menu to the left of the Application page, select  Workflows.
3. Click on your Creator Workshop App workflow tile.
4. Drag and drop a Signal node into the Employee swimlane.
5. Select the Signal node to open its Settings Menu.
6. Click  Edit to open the Edit Signal Event menu.
7. In the Label field, enter Employee Submitted.
8. Set the Use Template toggle to (ON). The Template field displays.
9. In the Template field, enter the following text:
Copy
Thank you for submitting your travel request! It has been forwarded to your manager, {{data.managerFullName}}, for approval.

Image showing the Edit Signal Event configuration for the Employee Submitted Signal node.

10. Save... your workflow.
11. In the Save to Version History window, select Save.

Configuring the Message Node to Notify Manager Roles

Create a Message node that contains a link to the Manager Review screen of the employee's travel request submission. Because the manager role must access the travel request submission that the employee created, the Message node link must reference the unique submission ID of the employee's travel request submission. The link must also have the workflow and Manager Review  Task node path to drop the manager role in the correct stage of the workflow.

1. Drag and drop a Message node into the Manager swimlane.
2. Select the Message node to open its Settings Menu.
3. Click  Edit to open the Edit Message Event menu.
4. In the following fields, enter or select the following values:
Image showing the Edit Message Event configuration for the Manager Notification Email Message node.

Field

Value

Label

Manager Notification Email

Send via

Email

To

{{data.managerEmail}}

From Name

Employee Travel Requests

Reply To

no-reply@unqork.io

Subject

New Travel Request Submitted

Template

Hello {{data.managerFullName}},<br>

<br>

One of your direct reports on the {{data.managerTeamName}} team, {{data.employeeFullName}}, has submitted a new travel request.<br>

<br>

Please review and approve or deny it based upon the estimated cost vs. your team's remaining annual budget by clicking the following link to <a href="https://trainingx.unqork.io/?assumeRole=trainingManager#/workflow/[insert-workflow-path-here]/[insert-task-path-here]/submission/{{data.submissionId}}"> open the submitted application in your browser</a>.<br>

<br>

Thank you,<br>

<br>

The Travel Request Team

NOTE  Anything in the email template inside {{}} (double curly braces) is dynamically populated by the data 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. entered in a previous workflow screen. Enter data.propertyID in the {{}} to reference a specific component.

NOTE  The submission ID in this field is included in the accessible data in the browser. In this context, you are using the submission ID to link to the submission URL on which the employee submitted their travel request. This allows manager roles to review an employee's travel request submission.

5. In the top right of the Workflow Builder, click the ··· (ellipsis) button.
6. Select Settings. The Workflow Settings modal A modal is a window that appears on top of the content you are currently viewing. displays.
7. In the Workflow Path field, copy the workflow path value.

8. Click  (exit) to return to the Workflow Builder.
9. Select the Manager Notification Email  Message node to open its Settings Menu.
10. Click  Edit to open the Edit Message Event menu.
11. In the Template field, select the [insert-workflow-path-here] text (including the brackets) and paste your copied workflow path over it.

12. In the Template field, select the [insert-task-path-here] text (including the brackets) and enter the managerreview Path of your Manager Review  Task node on top of it.

The final submission URL for this use case is the following: 

Copy
<a href="https://trainingx.unqork.io/?assumeRole=training Manager#/workflow/creator-workshop-use-case-step-10/managerreview/submission/{{data.submissionId}}"> 
13. Save... your workflow.
14. In the Save to Version History window, select Save.

Connecting the Signal and Message Nodes to Your Workflow

To complete this use case step, connect the Signal and Message nodes to your workflow-type application.

1. In your Workflow Builder, disconnect the Employee Travel Information  Task node from the Manager Review  Task node by clicking the arrow connection. Click (Expand} and select  Delete .
2. Connect the output port (right) of the Employee Travel Information  Task node to the input port (left) of the Employee Submitted  Signal node.
3. Connect the output port (right) of the Employee Submitted  Signal node to the input port (left) of the Manager Notification Email  Message node.
4. Connect the output port (right) of the Manager Notification Email  Message node to the input port (left) of the Manager Review  Task  node.
5. Save... your workflow.
6. In the Save to Version History window, select Save.

Here's how your workflow-type application looks once completed: 

View and Test the Workflow-Type Application in Express View

Your configuration for this use case step is now complete. Test your workflow-type application 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. by entering in a valid email address for the employee role and your personal email address for the manager role.

When testing role-specific screens on your Express View preview, use the Role-Based Access Control (RBAC) settings to view your application the way 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.

Ask yourself the following questions to determine whether or not your application is working as intended: 

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 Manager swimlane in your workflow-type application for manager roles. You placed your Manager Review  Task node into this lane so that only manager roles can access it. Then, you copied and pasted the configuration from the Employee Information and Employee Travel Information modules into your Manager Review module. You deleted and organized components so that only the necessary fields display to the manager for review. Because you don't want managers to edit the employee information, you used a Panel component to make these fields view-only. Next, you added a Dropdown component for manager roles to approve or deny employee travel requests.

Once you completed your Manager Review module, you added a Signal node to notify employees after completing their travel request submissions. Then, you added a Message node to message a link to manager roles. You configured this link to take managers directly to the Manager Review screen of the employee travel request submissions.

In the next use case step, you'll finalize your workflow process by adding another Exclusive Gateway node. This node diverts your workflow into two paths based on the approval or denial of employee travel requests. Each path sends a message to employees using a Message node, informing them that their travel request has been approved or denied.