Step 5: Viewing Submission Data in the DevTools Console

Estimated Reading Time:  5 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, 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. 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, 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. 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, 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. 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 use case lesson, 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:

Open Your Module

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

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 icon Decisions component onto the canvas. Place it between the btnShowTravelPolicy Button component Icon Button and panelPopUp Panel components in the colEmployeeInfoTwo Columns Component Icon Columns 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. and Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . fields, enter ruleShowTravelPolicy.
3. To the left of the component's configuration window, select the Actions Icon Actionstab.
4. In the Property ID column of the Outputs table, enter panelPopUp. Since this Decisions component is triggered by your btnShowTravelPolicy Button component Icon 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.

Image of the Decisions component Outputs table. The table contains the panelPopUp Property ID and the Type set to Trigger.

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.

Image of the Decisions component Micro Decisions table. The table contains the Output Value of openModal beneath the panelPopUp_trigger.

7. Click Save & Close.
8. Save your module.

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

1. Enter information into each component field to see if each field works as expected.
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. 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 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:

1. Preview 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. 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..
2. Right-click anywhere on your Express View page.
3. Click Inspect. By default, the DevTools panel opens on the right side of your page.

TIP  To open the Console in Google Chrome, you can use the Ctrl + Shift + J (Windows/Linux) or Option + Command + J (Mac OS) shortcut.

4. At the top of the DevTools panel, click the Console 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:

1. At the prompt, enter the following Angular command: angular.element('.unqorkio-form').scope().submission
Copy 
angular.element('.unqorkio-form').scope().submission
2. Press Enter (Return). The submission object displays in the Console.
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 on your keyboard 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: 

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.

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 configured a ruleShowTravelPolicy Decisions Component icon Decisions component to trigger the panelPopUp Panel pop-up modal A modal is a window that appears on top of the content you are currently viewing. when the btnShowTravelPolicy Button component Icon Button is selected. You also learned how to inspect 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. on the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. using 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 next use case lesson, you'll add a new Task node in the Automated swimlane. You'll learn how to use this automated task to validate the employee email address entered into the Employee Information screen. You'll also learn how to copy and paste modules and configure workflow swimlane roles.

Continue Your Learning

In the next lesson, you'll begin Step 6 of the Building Your First App course. In the first lesson of Step 6, you'll learn about workflow swimlanes.