Step 8: Adding Snippets to a Module and Calculating Travel Cost

Estimated Reading Time:  5 minutes

Introduction

Your Creator Workshop workflow application for the Building Your First App section is nearly complete. So far, your employee travel request application intakes employee information, including their email address. Then, a validation module runs and validates whether or not the employee's email address uses the @unqork.com company domain. Those that use a different, invalid domain receive an email notifying them that their travel request application is denied. Those that do use the valid domain go on to the Employee Travel Information module.

Currently, the Employee Travel Information module is blank. In this use case, you'll add a snippet configuration that collects additional travel details from 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. Your module configuration then displays information about the applicant's planned travel, such as estimated cost and travel budget.

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

Learning Objectives

In this use case lesson, you'll learn how to add  snippets to a module. You'll also learn how the Calculator and Address Search components can show travel information related to an 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.'s submissions.

Open Your Employee Travel Info Module

Start by opening the workflow-type application you previously created in the Workflow Builder and navigate to the Employee Travel Information module.

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 Modules.
4. Click on the Employee Travel Information module tile.

Add a Snippet to Your Module

Instead of configuring the module or copy/pasting a module definition, Unqork lets you use saved configurations in the form of snippets. You can add snippets directly to the Module Builder and edit the configuration as you see fit. In this use case, you'll add a snippet to your Employee Travel Info module and review its configuration.

To add the snippet to your Employee Travel Information module:

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

Review the Employee Travel Information Fields Snippet Configuration

As you can see, the Employee Travel Information Fields snippet holds components you're already familiar with, like the Email, Text Field, and Initializer components. It also contains new components, like the Calculator and Address Search components. These new components use the end-user's 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. submissions to calculate and display information about their travel request.

Here's an overview of the snippet configuration.

1. The initcalcFullNames Radio Button component icon Initializer component triggers the calcFullNames  Calculator component. It also sets the value for the managerBudget (Remaining Annual Travel Budget)  Number component.
2. The calcFullNames  Calculator component creates concatenated versions of Employee and Manager first and last names. It then displays them in single, full-name Text Fields.

Image showing the first and last name fields concatenated into one name field.

3. The empoyeeDepartureAirport and employeeArrivalAirport use the Address Search icon Address Search component and Google Places API.

Image showing the employeeDepartureAirport and employeeArrivalAirport Address Search component configuration in the Employee Travel Information module.

4. The employeeRoundTripCheck Single Checkbox component Icon Single Checkbox component triggers a rule that shows, or hides and clears the Return Date field when selected.

Image showing the Single Checkbox and ruleRoundTrip Decisions component configuration in the Employee Travel Information module.

5. The calcEmployeeEstimatedCost  Calculator component determines the estimated cost of the trip and populates the value in the Estimated Cost field.

Image showing the calcEmployeeEstimatedCost Calculator component and the Estimated Cost field configuration in the Employee Travel Information module.

View and Test the Workflow Application in Express View

Now that your use case is complete, return to your workflow application and 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.. As you learned, this is an important step for testing your application to ensure it looks and works the way you want. First, complete all of the fields on the Employee Information page. Because you know your invalid pathway works from testing it in the last use case, enter an employee email address that uses the @unqork.com domain to use the valid workflow path.

After selecting Next, you arrive on the Employee Travel Information page. Look at each field to ensure the information displays correctly. Enter airports in the Employee Departure and Arrival Airport fields, along with the Departure and Return Date. As you enter these values, your Estimated Cost and Remaining Annual Travel Budget fields adjust in real-time to show the cost and remaining travel budget.

Once your application meets your expectations, congratulations! Your Creator Workshop Building Your First App workflow application is complete.

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 lesson, you added the Employee Travel Information snippet to your Employee Travel Information module. Then, you reviewed how the configuration uses Employee Information module values and 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. input to show the estimated cost and remaining travel budget.

Continue Your Learning

This use case lesson concludes the Building Your First App course. Continue your Creator Workshop journey with Step 9 in the Beyond Basics course. In Beyond Basics, you'll learn how to use additional components and 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.s to build interactive dashboards. Using these dashboards, you can let manager roles approve or deny valid employee travel requests.