Access Submission Data Using the DevTools Console

Estimated Reading Time:  4 minutes

Overview

Troubleshooting and testing are essential parts of the application creation process. Using the right tools, such as the DevTools Console, you can ensure your application works as expected. The DevTools Console is part of a suite of developer tools provided by Google Chrome. In the DevTools Console, you can enter commands, like 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, to troubleshoot and test your application submission data.

What You'll Learn

In this article, you'll learn how to open and navigate the DevTools Console. You'll also learn to use the Angular command to view your module's submission data.

Understanding Submission Data

When you preview a module in Express View, you can view any data stored in a component through automated or 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. input. You can view this component data through a JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. object called a submission.

Many of Unqork's input-type components include the Store Data in Database setting.

  • When this toggle is set to (ON), data in that component stores in your submission.

  • When set to (OFF), data won't persist when a create or update action is taken.

Most components have this toggle enabled by default. But, some components, like the Hidden component, disable it by default. As you configure your application, confirm this setting aligns with what data you want to store.

One of the most effective ways to test and troubleshoot your configuration is to view the submission object data in the browser console or DevTools Console. By viewing the submission object data, you can confirm your application logic performs as it's intended. You can also tell from the submission object data if the correct data persists after saving or submitting the module.

Accessing Submission Data on the DevTools Console

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

The most common command used in the DevTools Console is 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. The Angular command, or data command, logs the submission data in the browser. You can reference this log to see how your application performs.

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.

Accessing Submission Data

The Console panel populates with data for the current submission. For example, if you enter information without submitting it, the data temporarily stores in the Console. Use this data for troubleshooting and mapping—specifically when viewing hidden fields.

You can see an example of submission data inspected in the Console here: http://trainingx.unqork.io/#/display/5eb01aa6811bf80215fd706b.

To see the submission data, follow the steps in Opening the DevTools Console, 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 Console, you can see that each row of the submission data comprises of a key/value pair. Keys display in purple, and values display in red. Some of the keys correspond to the module's component Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module.. Their values correspond to the value entered in Express View and saved to the submission data.

For example, if you enter the value Lavera in the firstName field, you can see it reflected in the Console.

To see the value in the DevTools Console:

1. Navigate to the dashboard use case.
2. Open the DevTools Console.
3. In the First Name  Text Field, enter Lavera (or any other value).
4. In the DevTools Console, enter the Angular command and press the Enter (Return) key.
5. Expand the submission data drop-down section.
6. Expand the data: drop-down section.
7. Under the currentUser drop-down section, locate the firstName key.

The firstName Property ID is associated with the  Text Field component labeled First Name. Because you entered the value Lavera (or your alternative value) in the First Name field in Express View, you'll see that name appear as the value.

NOTE  Some key/value pairs display in the submission data that the end-user didn't submit in Express View. These include logs of button-click events or values housed in Hidden components.

Navigating Submission Data on the DevTools Console

Once you 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, you can access the module's submission data. After expanding the submission data, you can access the following expandable sections: 

Section Description

data

Contains the module's submission data.

currentUser

The current user information. This includes the current user ID, name, and roles.

Submission Data

Located below the currentUser are the submission data fields, which take the form of key/value pairs. The Property ID/Name of the field acts as the key, while the submitted data is the value.

vars

By selecting the ellipsis (...), you can expand this section to view any global variables used in your environment. For more information, see our Global Variables Administration article.

integratorErrors

Plug-In component errors.

validationErrors

Validation errors that occurred in the module's components.

NOTE  validationErrors only display errors server-side. Client-side validation errors don't display.