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

• 1 Task node

• 1 Panel component

• 1 Dropdown component

• 1 Columns component

• 1 Signal node

• 1 Message node

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

3.

From the menu to the left of the Application page, select  Workflows.

Create the Manager Swimlane

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

2.

Select (Add). The swimlane's Label shows as New Lane for easy reference.

2.

Select  (Edit). The Edit Lane window displays.

5.

Click  (exit) to close the Edit Lane window.

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.

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.

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.

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.

2.

Open the Employee Travel Information module from the Workflow Builder, or using the  Modules tab to the left of the Application page.

5.

In your Workflow Builder, or Application page  Modules tab, open the Manager Review module.

Copying/Pasting Values from the Employee Information Module.

2.

Open the Employee Information module from the Workflow Builder, or from the  Modules tab to the left of the Application page.

5.

In your Workflow Builder, or Application page  Modules tab, open the 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.

• ruleRoundTrip  Decisions component.

• calcEmployeeEstimatedCost  Calculator component.

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

  • initCalcFullNames  Initializer component.

  • calcFullNames  Calculator component.

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

  • dwfCountryCodeConverter  Data Workflow component.

  • countryCodeTwo  Hidden component.

  • plugCountryCodes Plug-In component.

  • currencyCode  Hidden component.

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

  • plugExchangeRates Plug-In component.

  • exchangeRate  Hidden component.

  • dwfFinalRate  Data Workflow component.

  • calcEmployeeConvertedEstimatedCost  Calculator component.

  • ruleChangeCurrency  Decisions component.

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

• ruleShowTravelPolicy  Decisions component.

• panelPopUp Panel component and all components inside it.

  • htmlTravelPolicy   HTML Element component.

• colManagerName  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 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 from colEmployeeInfoTwo Columns component into the left column of colEmployeeInfo Columns component.

2.

Drag and drop colEmployeeInfo Columns component between the colContactInfo and colEmployeeAirportInfo Columns components.

3.

Delete the fgEmployeeInformation (Employee Information Fields) Field Group component.

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.

4.

Drag and drop the fgEmployeeTravelInformation (Employee Travel Information Fields) Field Group component into the panelReviewSubmission Panel component.

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 at the bottom of your module, outside of the panelReviewSubmission Panel component.

4.

To the left of the component's configuration window, select the Datatab.

6.

To the left of the component's configuration window, select the Validationtab.

9.

Drag and drop a Columns component below your requestStatus Dropdown component.

11.

Under Formatting, click (Three Columns).

13.

Drag and drop your requestStatus Dropdown component into the center column of your colManagerApproval Columns component.

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

2.

From the menu to the left of the Application page, select  Workflows.

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.

Thank you for submitting your travel request! It has been forwarded to your manager, {{data.managerFullName}}, for approval.

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.

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.

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.

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

• Does the Signal node appear once the employee information is submitted? If not, review the Connecting the Signal and Message Nodes to Your Workflow section. Return to your workflow-type application and inspect the link between your Employee Travel Information  Task and Signal nodes. Also, review your Signal node configuration for any errors.

• Does the review email successfully reach the manager role? If not, review the Connecting the Signal and Message Nodes to Your Workflow section. Return to your workflow-type application and inspect the link between your Employee Submitted Signal node and Manager Notification Email Message node.
  Also, review the Configuring the Message Node to Notify Manager Roles section. Inspect your Manager Notification Email Message node configuration for any errors.

  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.

• Does the email link successfully bring the manager to the correct screen and the correct 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.? If not, review the Configuring the Message Node to Notify Manager Roles section. Inspect the Template field of your Manager Notification Email Message node. Ensure the workflow ID and Task node path are correct.

• Can the manager role edit the employee information fields on the screen? If not, review the Configure the Panel Component section. Inspect the configuration of your Panel component on your Manager Review module.

• Can the manager role select an approve or deny option from your drop-down? If not, review the Adding Request Status Field section. Inspect the configuration of the Dropdown component on your Manager Review module.

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.