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

Estimated Reading Time:  4 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 Info module.

Currently, the Employee Travel Info module is blank. In this use case, you'll add a snippet configuration that collects additional travel details from end-users. End-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 unit, 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 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 your workflow application you previously created in the Workflow Editor and navigate to the Employee Travel Info 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 Editor 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 Info 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 Fields.

3.

Open the Local Snippets group drop-down.

4.

Drag and drop the Employee Travel Information Fields 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 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  Initializer component triggers some components and sets default values for others.

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.

3.

The calcManagerBudget  Calculator component creates a default value for the Remaining Annual Travel Budget field.

4.

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

5.

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

6.

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

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. After configuring a module, click Preview in the Module Editor 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.

Continue your Creator Workshop journey in Beyond the Basics. In that course, you'll learn how to use additional components and APIs to build interactive dashboards. Using these dashboards, you can let manager roles approve or deny valid employee travel requests.