Step 6: Editing Swimlanes and Copy/Pasting a Module

Estimated Reading Time:  5 minutes

Introduction

Up to this point, your workflow application consists of one Task node that contains the completed Employee Information module. Part of the employee information your module collects is email addresses from the employee and manager. While the Email component has some built-in validation, it only applies to the format of email addresses. If 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. enter an email address that is the correct format but isn't a company email address, the validation won't catch it. In this use case, you'll add additional validation to ensure end-users enter email addresses that include the @unqork.com company domain. To do this, you'll continue working on your workflow application, configure swimlanes, and copy and past a verification module into another Task node.

You can preview an example of this completed use case step here: https://training.unqork.io/#/workflow/646534fd4bb77e5fa1cfd951/edit.

Learning Objectives

In this use case article, you'll learn how to copy and paste a validation module definition and configure swimlane settings.

What You Need

To complete this step of your application, you need:

Open Your Workflow Application

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

1. Open your Workspace. You can find 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. Select your Creator Workshop App workflow tile.

Configure the Authenticated Swimlane

Before adding the new Task node to your workflow application, you must configure your Workflow swimlanes. Workflow swimlanes determine what part of your process is visible to 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.. As you read in the Swimlane Management article, there are two types of swimlanes: Authenticated and Automated. You can edit the roles and permissions for your Authenticated swimlanes to control what users can see and interact with the processes in them. Because employee 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. will access your Employee Information Task node, you need to customize the name, roles, and permissions for the Authenticated swimlane.

1. In the Workflow Builder, hover over the Authenticated swimlane's Header Bar.
2. Select  (Edit). The Edit Lane window displays.
3. In the Label field, enter Employee.
4. In the Assign a Role field, select trainingApplicant.

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

5. Click  (exit) to return 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 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 the Email Validation Task Node

Now that your swimlanes are set up, you'll add your Email Validation Task node. As you learned, Automated swimlanes handle all background processes, such as script or service-type tasks. These tasks have no end-user interaction. Since validation occurs behind the scenes, you'll create it in the Automated swimlane.

1. Drag and drop a  Task node into the Automated 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 Email Validation.
5. Under Module, select Create New Module. The Module Title and Module Path  populate with default values.
6. In the Module Type drop-down field, select FE Front-End.

NOTE  Using FE Front-End module type allows you to test this module in a simpler way. You'll more about this in the Test Your Email Validation Module in Express View section of this article.

7. Click Create.
8. Disconnect the Employee Information  Task node from the End node by clicking on the arrow connection and pressing Delete (Return) on your keyboard.
9. Connect the output port (right) of the Employee Information  Task node to the input port (right) of the Email Validation  Task node.
10. Connect the output port (right) of the Email Validation  Task node to the input port (right) of the End node.

Image showing the workflow process. The Start node connected to the Employee Information Task connected to the Email Validation Task connected to the End node.

11. Save... your workflow.
12. In the Save to Version History window, click Save.

Create the Email Verification Module

The Email Validation module you just created in your Email Validation Task node is currently blank. Instead of configuring a new module, you can copy and paste another Unqork module into it. Start by copying the Email Validation module definition to validate employee email addresses and ensure they include the @unqork.com company email domain. Then, paste the module definition into your new Email Validation Task module. You'll review each part of this module configuration in detail in the Step 7 use case article.

1. Use the following URL to access the Employee Email Validation module: https://training.unqork.io/#/form/64653851291cb4f5dcf5e0fc/edit. This module contains preconfigured Radio Button component icon Initializer, Decisions Component icon Decisions, and Hidden components.
2. In the Module Builder, click the ··· (ellipsis) button.
3. 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..
4. In your Workflow Builder, select the Email Validation   Task node to open its Settings Menu.
5. Click (Expand) to expand the node Settings Menu.
6. Click  Open to open the Email Validation module in the Module Builder.
7. In the Module Builder, click the ··· (ellipsis) button.
8. 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.

9. 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..
10. Click Paste.

Compare the components and component settings you just pasted in your Email Verification module with the Employee Email Verification module you copied.

If the copy/paste was successful, complete the following steps:

1. Save your module.
2. Return to your workflow.
3. Save... your workflow.
4. In the Save to Version History window, select Save.

Test Your Email Validation Module in Express View

Before moving on to the next article, Preview your workflow and test your results in Express View. As a reminder, you can do this by inspecting the page in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. Once you fill in the fields, run the Angular Command The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission to see 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..

If the module works as expected, it will automatically intake your employee's email address entry, compare it to the @unqork.com company domain, and then return a valid or invalid response.

Because your Email Validation Task node runs as an Automated swimlane process, you won't see the module data in Express View or 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 test your Email Validation module: 

1. Open your workflow.
2. In the Workflow Builder, move the Email Validation  Task  node from the Automated swimlane to the Employee swimlane.

3. Save... your workflow.
4. In the Save to Version History window, select Save.
5. Preview your workflow in Express View.
6. Inspect the application in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. and run the Angular Command The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission.

From here, try filling in the Employee Email field with and without email addresses that end with the @unqork.com domain. Once you complete the workflow process, the employeeEmailValidation Hidden component in the Email Validation module holds the "Valid" or "Invalid" validation result of your entry.

For example, if 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. enters an @gmail.com domain, the employeeEmailValidation key/value pair will read employeeEmailValidation: "Invalid".

Image showing the workflow process. The Start node connected to the Employee Information Task connected to the Email Validation Task connected to the End node.

NOTE  Before you go on to the next article, remember to move your Email Validation  Task  node from the Employee swimlane back to the Automated swimlane. Then, Save... your workflow.

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 article, you configured your Authenticated swimlane to the trainingApplicant role for employee 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.. You then added a Task node to your Automated lane and copy/pasted an Email Validation module definition your Email Validation Task node's module. This module validates the email address entered by the end-user in the Employee Email Address field. If the employee email domain is @unqork.com, the "Valid" response is held in the employeeEmailValidation Hidden component in the Email Validation module. If the employee email domain isn't @unqork.com, the "Invalid" response is held there instead.

In the next use case article, you'll continue your workflow configuration by splitting your workflow path in two different directions using the Exclusive Gateway node. For end-users who's emails were "Valid", you'll configure a pathway that continues the employee travel request process. For "Invalid" emails, an email is sent to notify the end-user and the workflow ends.

Continue Your Learning

In the next article, you'll begin Step 7 of the Building Your First App learning module. In the first article of Step 7, you'll learn about Initializer components and how to configure them in the Module Builder.