Step 3: Retrieving Employee Information (Continued)

Estimated Reading Time:  2 minutes

Introduction

At this point, your employee travel request application can intake basic employee information. To complete the intake process, you'll add Email components to collect the employee email information. Because employees are requesting travel dates, you'll use this module to show the company's travel policy information. For now, you'll add a Button component to eventually display the travel information in a pop-up modal A modal is a window that appears on top of the content you are currently viewing..

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

Learning Objectives

In this lesson, you'll learn how to configure the Email and Button components to intake employee data and trigger a pop-up modal A modal is a window that appears on top of the content you are currently viewing..

What You Need

To complete this step of your application, you need:

Open Your Module

Start by opening the module you created in the previous lesson in the Module Editor.

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 is [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 Information module tile.

Configuration

Configure Your Email Components

To intake employee email information, you'll use the Email component. This component lets you validate the 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 entry to ensure it's a valid email address.

1. Drag and drop two  Email components onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields for each component, enter the following:

Property ID

Label Text

employeeEmail

Employee Email Address
managerEmail

Manager Email Address

Image displaying the Employee Email Address and Manager Email Address Email component fields in the Module Editor.

3. Save &  Close each  Email component as you add it.

Configure the Button Component

Next, add a Button component that the employee can select to see their company's travel policy in a pop-up modal A modal is a window that appears on top of the content you are currently viewing..

1. Drag and drop a Button component Icon Button component onto your canvas, placing it below your  Email components.
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 btnShowTravelPolicy.
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 Show Travel Policy.
4. Set the Button Width to Block.
5. To the left of the component's configuration window, select the Actions Icon Actionstab.
6. Set the Action Type The action performed by the button when selected. to Event.
7. Click Save & Close.
8. Save your module.

Your travel request application now intakes employee and manager information. In the next use case lesson, you'll continue building out this module to organize the layout. You'll also configure the pop-up modal A modal is a window that appears on top of the content you are currently viewing. displaying the company's travel policy.