Bring Your Own (BYO): 7.24 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 early-access. While the syntax is expected to remain the same as the feature matures, using Event Payloads currently requires manually keeping track of the structure of your payloads. Future updates to Event Payloads will improve the experience.

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 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.. The label On Change becomes onChange 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 Structure

Because this feature is currently in implementation, the payload structure does not have previews available for each event. Instead, open an application, preview it, and trigger an event to view the payload structure.

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 character letters.

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.

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.