Step 4: Displaying Company Travel Policy

Estimated Reading Time:  4 minutes

Introduction

In the previous use case, you added additional employee information fields to your Employee Information module. You also added a Button component to trigger a pop-up modal A modal is a window that appears on top of the content you are currently viewing. with the company travel policy. In this use case, you'll configure what displays in the pop-up modal A modal is a window that appears on top of the content you are currently viewing. once 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. clicks the button. You'll also group and edit the layout of your module components.

NOTE  This use case only covers the appearance of the pop-up modal A modal is a window that appears on top of the content you are currently viewing.. In the next use case, you'll learn how to configure logic that allows the button to trigger the 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/646534a904acb7e9780ce2c1/edit.

Learning Objectives

In this unit, you'll learn how to configure a Panel and an HTML Element component to display a pop-up modal. You'll also learn how to use the Field Group and Columns components to edit the display and layout of your module.

What You'll Need

To complete this step of your application, you need:

• 1 Panel component

• 1 Field Group component

• 1 HTML Element component

• 5 Columns components

Open Your Module

Start by opening the module you previously created 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 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 Information module.

Configuration

Configue the Field Group Component

Before configuring the pop-up modal A modal is a window that appears on top of the content you are currently viewing., add a Field Group to group all component fields. That way, you can apply settings to all your components at once.

1.

Drag and drop a Field Group component 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. field, enter fgEmployeeInformation.

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 Employee Information Fields.

4.

Drag and drop all of the components of your Employee Information module into your Field Group component. Continue adding all new components you build to the fgEmployeeInformation Field Group.

5.

Click Save & Close.

Configure the Panel Component

Use a Panel component to display the company's travel policy as 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 Panel component onto your canvas, placing it inside your fgEmployeeInformation  Field Group component.

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 panelPopUp.

3.

Set the Interaction Type to Modal.

4.

Click Save & Close.

Configure the HTML Element Component

The Panel component now displays as a blank modal. Using the HTML Element component, you can add the travel policy content for 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. to view.

1.

Drag and drop an   HTML Element component onto your canvas, placing it inside your panelPopUp Panel component.

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 htmlTravelPolicy.

3.

In the Tag field, enter p.

4.

In the Content window, enter All travel requests will be reviewed within 48 hours. Trips submitted with less than 72 hours notice may require additional review.

5.

Click Save & Close.

Configure the Columns Components

You can use Columns components to organize how fields display in your module. Each component you add will use the default two-column layout.

1.

Drag and drop five Columns components onto your canvas, placing them inside your fgEmployeeInformation  Field Group component.

2.

Configure your Columns components with the following.

3.

Save & Close each component as you add it.

Organize your Module

Now that you have your Columns components, you can drag and drop your components inside of them to organize your module.

1.

Drag and drop the employeeFirstName  Text Field in column1 of the colEmployeeName  Columns component.

2.

Drag and drop the employeeLastName  Text Field in column2 of the colEmployeeName  Columns component.

3.

Drag and drop the following components into the following Columns components:

4.

Save your module.

When you Preview your module, you can see how each component fits into your columns neatly. You can also see where the end-user will select the Button component to view the travel policy in your Panel's pop-up modal A modal is a window that appears on top of the content you are currently viewing..

In the next use case, you'll learn how to trigger the Panel with your Button so that it displays when selected.