Bring Your Own (BYO): 7.26 Event Payloads

Overview

Event payloads enable operations to be dynamic and reusable without requiring complex Data Workflows to determine a selected value.

Because the Vega (2.0) The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. framework is event-driven, a key configuration challenge is to trigger one or more operations based on an event, like onClick or onChange. It's useful to know not only that a specific event happened, but the value of that event. For example, the value of an event could be the following:

Text in an input while typing.
Selecting a value from a list to a series of validation errors for a module.

With the Vega runtime, Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. can use event payloads in an operation's configuration to dynamically replace values like $event.payload.value with the value from the event that triggers the entire operation chain.

This feature is currently in open beta. While the syntax is expected to remain the same as the feature matures, Event Payloads currently requires manually keeping track of the structure of your payloads. Future updates to Event Payloads will improve the experience.

For Creators using the 7.24 platform release, view our the Bring Your Own (BYO): 7.24 Event Payloads article.

How to Use Event Payloads

To use event payloads in your operations, contact your Unqork representative and request to enable the enable-vega-dynamism/operations feature flag.

For this example, configure an onChange event in a Text Field component. This event fires whenever the value of an input is changed as 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. types into the field, or selects all and clears it. But not if the value is changed using an Unqork logic method.

UDesigner displays human-readable labels for event operations. In the Vega runtime, event labels are camelCase A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. orSNAKE_CASED Snake case is a naming convention where words in a variable or function name are separated by underscores (_) and all letters are typically lowercase or uppercase. It's commonly used in languages like Python.. The label On Change becomes onChange or ON_CHANGE when viewing the event in a configuration, or in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

Identify the Payload

There are two methods for identifying an event's payload structure, click on the tabs below to learn more:

Identify the Payload Structure Using the Operations Builder

To verify an event's payload structure in the Module Builder, use the Operations Builder to view the event's Event Context window.

Only the fields displayed in the Operations Builder's Event Context section are officially supported. Use undocumented event payload fields at your own risk.

In Vega, events emit even if you have not explicitly subscribed to them using the Events and Operations Builder. No example configuration is required before previewing the event structure

To identify a event's payload structure in the Module Builder:

Navigate to and open a Vega (2.0) The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. module containing one or more components using events and operations.

Hover over a component containing one or more events and operations.

The component toolbar displays above the component element.

Click (Settings).

Navigate to the Actions settings.

To the right of Events & Operations, click Edit.

From the Events & Operations list, select an existing event. For example, On Click.

To the right of Operations, click Context Reference.

Inspect the operation's Event Context (Payload) window.

Use the Context Reference drop-down to review all context available for the operation you're editing.

Some events might not have a payload available to reference. If they do not have a payload to reference, the drop-down does not display.

Identify the Payload Structure Using the DevTools Console

To verify a event's payload structure in Express View Express View is how your end-user views your 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., use DevTools and Vega console logs.

In Vega, events emit even if you have not explicitly subscribed to them using the Events and Operations Builder. No example configuration is required before previewing the event structure

To identify a event's payload structure from a module:

Preview the module containing a Text Field component.

In the Text Field component's input field, enter one or more characters.

Open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

In the Console Log Filter field, enter onChange.

The Console displays events containing the onChange event.

If you cannot see DEBUG console logs, you might need to update the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. 's Console Log Filter from Default Levels to All Levels.

Expand the Event object An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity. and inspect the payload's nativeEvent object:

Collect the input value after it has changed. In this example, the value is payload.nativeEvent.target.value. Save this value to use in the Using the Event Payload section of this article.

DOM The Document Object Model (DOM) is the data representation of objects that form the structure and content of a document on the web. The DOM represents the page. events might include data that is not required for event configuration. For this example, the DOM's complexity deeply nest's the payload.nativeEvent.target.value value. If you’re using a custom component, Unqork recommends only including required information to make it easier to keep track of the payload structure for later configurations.

Using the Event Payload

Now that you have the structure of an event payload, configure an operation that's triggered by that event. In this example, configure a Text Field component to listen for an onChange event. Then, trigger a SET_PROPERTY operation that sets the value of another Text Field component to mirror the input value of the first Text Field component.

Begin by creating a Vega (2.0) The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.module with two Text Field components:

In the Module Builder, drag and drop two Text Field components onto the canvas.

Update each component using the following values:

Property ID	Label Text
input	Enter Value
output	Copied Value

Click Save Component as you complete each component.

Configure the Input Text Field Component's Events and Operations

Hover over the input Text Field component.
The component toolbar displays above the component element.

Click the (Settings) button.

Navigate to the Actions settings.

To the right of Events & Operations, click Edit. The Events & Operations modal A modal is a window that appears on top of the content you are currently viewing. displays.

From the Select an event drop-down, enter or select On Change.

Click Add.

Click + Add Operation.

From the Operation Type drop-down, enter or select Set Property.

In the Target Key field, enter output.

10.

In the Property field, enter value.

11.

From the Value drop-down, select dynamic.

12.

In the Value field, enter the Event Payload syntax copied from the Identify The Payload Structure section. For this example, enter payload.nativeEvent.target.value.