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. |
Property ID |
Label Text |
---|---|
employeeEmail |
Employee Email Address |
managerEmail |
Manager Email Address |
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 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 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. |
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.