Vega Console Tools

The Vega runtime engine Console Tools reference sheet helps Creators debug applications in Express View.

Overview

The Vega runtime engine Console Tools help Creators debug applications in Express View. To use Console Tools, preview your application in Express View, open the DevTools Console, and specify data using UNQENG.tools.{toolname}, where {toolname} is the specific function you want to achieve.

To learn more about the Vega Console, see our Vega Console article.

Below is a list of Console Tools available to Creators:

Fields

There's one Fields function you can use to determine the component state.

Syntax

Description

UNQENG.tools.ComponentState

Returns the state of all components currently rendered in Express View.

Methods

To invoke a method, you'll append parentheses to the end of the function. Some methods let you add arguments in the parentheses to specify the information you want.

Arguments must be added as a string in single quotes. For the following functions, the key refers to your component's Property ID.

Below is a list of all available Methods functions.

Syntax Description Example

UNQENG.tools.getRuntimeData()

Returns all data currently present. This data includes persisted and non-persisted values.

 

UNQENG.tools.getSubmissionData()

Returns all data currently present that will be persisted when the next submission save occurs.

 

UNQENG.tools.getComponentValue(key)

Returns the current component value for the specified component Property ID.

UNQENG.tools.getComponentValue('firstName')

UNQENG.tools.getComponentState(key)

Returns the current component state for the specified component Property ID.

UNQENG.tools.getComponentState('firstName')

UNQENG.tools.getAllValidationErrors()

Returns all validation errors for components rendered in Express View.

  

UNQENG.tools.getLastSavedSubmission()

Returns the most recently loaded submission data in Express View. For example, if you refresh the page, this function retrieves the submission data from that initial page load. You won't see any other changes made on the page since that time.

  

UNQENG.tools.getCurrentUser()

Returns the current Express View user data.

 

UNQENG.tools.logChangesByKey$(key)

Returns log changes for the specified component Property ID. This function is useful when you only want a filtered view of what changed. This function looks for changes in the specified component and logs a new message in the Console each time the component state changes. Only logs of the changed fields display.

This is a dynamic function. After entering the function in the Console, changes in the component populate in the Console as they occur.

UNQENG.tools.logChangesByKey$('textField')

UNQENG.tools.logObjectByKey$(key)

Returns log changes for the specified component Property ID. This function is useful when you only want to see the entire state object for a component that's changed. This function looks for changes in the specified component and logs a new message in the Console each time the component state changes.

This is a dynamic function. After entering the function in the Console, changes in the component, populate in the Console as they occur.

UNQENG.tools.logObjectByKey$('textField')

UNQENG.tools.watchDomChanges$()

Returns all DOM changes rendered in Express View. The changes log as arrays of MutationRecords, from the MutationObserver browser API.

This is a dynamic function. After entering the function in the Console, changes in the DOM populate in the Console as they occur.

  

UNQENG.tools.profile()

Reloads the page and profiles the engine. After running this syntax, the page reloads and begins collecting module performance data. After collecting performance data, use UNQENG.tools.profileEnd() to end the profiling session and load the data into the DevTools Performance tab.

UNQENG.tools.profile('Sample1')

UNQENG.tools.profileEnd()

Use after starting a profile session with UNQENG.tools.profile(). After running this command, the performance data loads into the into the DevTools Performance tab.

The Input Label string must match the value used to start the profiling. For example, start a profiling with UNQENG.tools.profile('Sample1'), and end it with UNQENG.tools.profileEnd('Sample1').

UNQENG.tools.profileEnd('Sample1')

UNQENG.tools.help()

Returns the most recently loaded submission data in Express View. For example, if you refresh the page, this function retrieves the submission data from that initial page load. You won't see any other changes made on the page since that time.

  

UNQENG.tools.updateComponentState()

Update a component's state with a partial or complete component definition. For example, to change a  Text Field component's Hidden setting value from false to true, run UNQENG.tools.updateComponentState('propertyID', { display: { hidden: true }}).

UNQENG.tools.updateComponentState('firstName', { display: { hidden: true }})

UNQENG.tools.getComponentTree()

Returns an object representing the state of all components and how they are nested. If a component contains another component, their data contains a childIds property with the contained component.