Step 5: Viewing Submission Data in the DevTools Console

Estimated Reading Time:  4 minutes

Introduction

At this point, your Employee Information module has everything it needs to intake the travel request information. To complete the module, the pop-up modal A modal is a window that appears on top of the content you are currently viewing. must display when 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. Using a logic component, like a Decisions component triggers the Panel pop-up modal A modal is a window that appears on top of the content you are currently viewing. to open.

When building applications in Unqork, it's best practice to test your configurations as you build to ensure everything is working as expected. Unqork lets you preview your modules and workflows to confirm what the end-users End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. see. You can also preview and test the submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. entered by potential end-users End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. using the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

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

Learning Objectives

In this unit, you'll learn how to trigger components using the Decisions component. You'll also learn how to test your configurations by executing configuration previews and using the DevTools Console.

What You Need

To complete this step of your application, you need:

• 1 Decisions component

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

3.

From the menu to the left of the Application page, select Modules.

Configure the Decisions Component

Use a Decisions component to open your Panel component's pop-up modal A modal is a window that appears on top of the content you are currently viewing..

1.

Drag and Drop a  Decisions component onto the canvas. Place it between the btnShowTravelPolicy Button and panelPopUp Panel components in the colEmployeeInfoTwo Columns component.

3.

To the left of the component's configuration window, select the Actionstab.

4.

In the Property ID column of the Outputs table, enter panelPopUp. Since this Decisions component is triggered by your btnShowTravelPolicy Button, it only has an output type.

5.

In the Type column of the Outputs table, enter trigger. This action triggers the panelPopUp Panel component.

6.

In the Output Values column of the Micro Decisions table, enter openModal. When you configured the Panel component in a previous lesson, you set the Open Modal Event setting to this value. Including this as an output value enables the open modal event in your Panel component.

Preview and Test the Module in Express View

The Preview button opens your module 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. Express View displays your application as your end-user sees it (depending on which role you select from the Preview As toolbar in Express View). Ensure you save your module first, as unsaved changes won't display in the preview.

To preview your module in Express View, click Preview. The Express View of your module opens in a new tab.

NOTE  You may have to log in again to view your module in Express View.

In the 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 of your Employee Information module, you can see how the Columns components organize your fields.

To test your module in Express View, try the following:

2.

Enter incorrectly formatted email addresses in the  Email component fields to see how fields validate certain information.

3.

Select the Show Travel Policy button and see if the panelPopUp  Panel pop-up modal A modal is a window that appears on top of the content you are currently viewing. displays the employee travel policy information.

Preview the Module's Submission Data

You can also test and preview your module's submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. 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. To do so, you'll run the Angular Command The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

Opening the DevTools Console

To open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. tab:

The Console tab is a live preview of your submission data. A blue arrow to the left of a blank row at the bottom of the Console's feed indicates the Console's command line. It's here that you can enter commands to get more data details.

Using the Angular Command

To run the Angular command The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. tab:

angular.element('.unqorkio-form').scope().submission

3.

Click the solid drop-down arrow to the left of the response in your Console panel. The response starts with {data: {...}.

4.

Expand the data section to display your submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. object.

TIP  Next time you open the DevTools Console, you can press the up arrow key to repopulate the Angular Command.

NOTE  The Angular Command only displays the submission data entered before the command runs.

Testing the Module Submission Data

Part of testing your module in Express View is determining how the submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. displays when entered by an end-user. Try entering different values in each field. Then, run the Angular Command The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. to see how the most recent changes display in the submission data. Look at how each component saves submission data as different data types Data types are a classification of data that determines how it is stored and interpreted. and data structures A data structure is the design used for organizing, using, and storing data..

To help guide your testing of each use case in the Creator Workshop Learning Path, ask yourself the following questions: 

• Are there any gaps or missing fields in the data?

• Does the submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. match what you entered into the original fields?

• Are there any “true” or “false” string values that should be Boolean values instead?

• Are your number values stored as strings with double quotes?

• Does the btnShowTravelPolicy  Button trigger the ruleShowTravelPolicy  Decisions component?

For this use case, your submission data consists of string data types. Here's how sample data displays in the DevTools Console:

Once your submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. meets your expectations, your Employee Information module is complete. In the next use case lesson, you'll learn how to verify the email addresses entered into this module. You'll also learn how to copy and paste modules and configure Workflow swimlane roles.