Step 3: Retrieving Employee Information (Continued)

Estimated Reading Time:  4 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 also 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 use case 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 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 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, 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 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. In the On Click field, enter ruleShowTravelPolicy. This is the Property ID you'll use for your Panel component pop-up modal in the next use case lesson.

Image displaying Button component's On Click field set to ruleShowTravelPolicy.

8. Click Save & Close.
9. 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.

View and Test the Workflow-Type Application in Express View

Now that you've completed this workflow use case, view and test 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.. To do that, open your workflow and click the Preview button on the top of the Workflow Builder. Once there, interact with each field you added by entering in test values.

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

  • Are you able to enter an email value into the Employee Email and Manager Email fields? If not, review the Configure Your Email Components section. Return to you Employee Information module and ensure each Email components use the correct configuration steps.

  • Does the Show Travel Policy Button display? If not, review the Configure Your Button Component section. Return to you Employee Information module and ensure each Email components use the correct configuration steps. Remember, this component perform an action in this use case lesson.

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 Email components to your Employee Information module to intake the employee and their manager's email addresses. Then, you added a Button component that you'll use later to trigger a 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 to 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.. In the next use case lesson, you'll use additional components to edit the display and layout of your Employee Information module. You'll also configure the pop-up modal that will display the company travel policy.

Continue Your Learning

In the next lesson, you'll begin Step 4 of the Building Your First App course. In the first lesson of Step 4, you'll learn about Panel components and how to configure them in the Module Builder.