---
title: "Bring Your Own (BYO): 7.26 Event Payloads"
slug: "bring-your-own-byo-726-event-payloads"
updated: 2025-09-26T09:41:46Z
published: 2025-09-26T09:41:46Z
canonical: "docs.unqork.io/bring-your-own-byo-726-event-payloads"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Bring Your Own (BYO): 7.26 Event Payloads

## Overview

**Event payloads** enable [operations](/v1/docs/introduction-to-the-operations-builder#Understa2) to be dynamic and reusable without requiring complex [Data Workflows](/v1/docs/data-workflow-component) to determine a selected value.

Because the Vega (2.0) framework is [event-driven](/v1/docs/introduction-to-the-operations-builder#Understa), 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](/v1/docs/introduction-to-the-operations-builder#Understa). 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 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.

> [!NOTE]
> 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](/v1/docs/bring-your-own-byo-724-event-payloads) article.

## How to Use Event Payloads

> [!NOTE]
> 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](/v1/docs/text-field-component) component. This event fires whenever the value of an input is changed as the end-user types into the field, or selects all and clears it. But not if the value is changed using an Unqork logic method.

> [!NOTE]
> UDesigner displays human-readable labels for event operations. In the Vega runtime, event labels are camelCase or . The label **On Change** becomes `onChange` or `ON_CHANGE` when viewing the event in a configuration, or in the DevTools Console.

### Identify the Payload

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

Operations BuilderDevTools Console

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

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

> [!NOTE]
> In Vega, events emit even if you have not explicitly subscribed to them using the [Events and Operations Builder](/v1/docs/introduction-to-the-operations-builder). No example configuration is required before previewing the event structure

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

1. Navigate to and open a Vega (2.0) module containing one or more components using events and operations.
2. Hover over a component containing one or more events and operations.

The component toolbar displays above the component element.
3. Click (**Settings**).
4. Navigate to the **Actions** settings.
5. To the right of **Events & Operations**, click **Edit**.
6. From the Events & Operations list, select an existing event. For example, **On Click**.
7. To the right of **Operations**, click **Context Reference**.
8. Inspect the operation's Event Context (Payload) window.

> [!TIP]
> Use the **Context Reference** drop-down to review all context available for the operation you're editing.

> [!NOTE]
> 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.

[![A static image displaying an operation's Event Context values.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/eventContext_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/eventContext.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)

#### Identify the Payload Structure Using the DevTools Console

To verify a event's payload structure in Express View, use DevTools and Vega console logs.

> [!NOTE]
> In Vega, events emit even if you have not explicitly subscribed to them using the [Events and Operations Builder](/v1/docs/introduction-to-the-operations-builder). No example configuration is required before previewing the event structure

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

1. **Preview** the module containing a [Text Field](/v1/docs/text-field-component) component.
2. In the Text Field component's input field, enter one or more characters.
3. Open the DevTools Console.
4. In the **Console Log Filter** field, enter `onChange`.

[![A static image displaying the DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/consoleLogFilter_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/consoleLogFilter.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)

The Console displays events containing the onChange event.

[![A static image displaying the DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/onChangeDEBUG_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/onChangeDEBUG.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)

> [!NOTE]
> If you cannot see **DEBUG** console logs, you might need to update the DevTools Console 's **Console Log Filter** from **Default Levels** to **All Levels**.
5. Expand the Event object and inspect the **payload's** **nativeEvent** object:

[![A static image displaying the DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/payloadObject_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/payloadObject.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)
6. 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.

> [!NOTE]
> DOM 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](/v1/docs/text-field-component) 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)module with two Text Field components:

1. In the Module Builder, drag and drop two **T****ext Field** components onto the canvas.
2. Update each component using the following values:

| Property ID | Label Text |
| --- | --- |
| **input** | Enter Value |
| **output** | Copied Value |
3. Click **Save Component** as you complete each component.

#### Configure the Input Text Field Component's Events and Operations

1. Hover over the **input** **T****ext Field** component. The component toolbar displays above the component element.
2. Click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D) (**Settings**) button.
3. Navigate to the **Actions** settings.
4. To the right of **Events & Operations**, click **Edit**. The Events & Operations modal displays.
5. From the **Select an event** drop-down, enter or select `On Change`.
6. Click **Add**.
7. Click **+ Add Operation**.
8. From the **Operation Type** drop-down, enter or select `Set Property`.
9. 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](/v1/docs/bring-your-own-byo-726-event-payloads#overview) section. For this example, enter `payload.nativeEvent.target.value`.

[![A static image displaying the Event Operation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/eventOperationSettings-7-26_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/eventOperationSettings-7-26.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)

> [!WARNING]
> Do not enable **Skip Interpolation** because it's not compatible with this dynamic syntax.
13. Click **Save**. The operation configuration panel closes.
14. Click **Close**. The Events & Operations modal closes.
15. Click **Save Component**.
16. **Save** your module.

Preview your module in Express View and enter a value in the **Enter Value** field. The value immediately displays in the **Copied Value** field.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/exampleValue.webm?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A33Z&se=2026-11-06T23%3A54%3A33Z&sr=c&sp=r&sig=2xkCiuLAALu1icAdQr%2BVROdn5fm4uw2GHDn4ZEj8DS8%3D)

## Resources

### [Bring Your Own (BYO) Framework Landing Page](/v1/docs/bring-your-own-byo-framework-landingpage)

Find all the resources needed to build your own components here.

### [Introduction to the Bring Your Own (BYO) Framework](/v1/docs/introduction-to-the-bring-your-own-byo-framework)

Get started building your own custom assets, including components, events, and operations.

### [Create a BYO Package](/v1/docs/bring-your-own-byo-create-a-package)

Discover the structure and content of a BYO Package

### [Understanding the manifest.json File](/v1/docs/bring-your-own-byo-understanding-the-manifestjson-file)

Learn about the file's specification, component and event definitions.

### [Understanding the BYO Runtime Engine API](/v1/docs/bring-your-own-byo-understanding-runtime-engine-api)

Discover the interface between your custom BYO components and the Unqork platform.

### [Custom Component](/v1/docs/bring-your-own-byo-custom-component)

Understand the state, interface, and events of a custom component.

### [Custom Component SDK](/v1/docs/bring-your-own-byo-component-sdk-software-development-kit)

Extend component functionality in the Unqork Designer Platform.

### [Custom Events](/v1/docs/bring-your-own-byo-custom-events)

Learn more about creating custom events for use in the Operations Builder.

### [Custom Operations](/v1/docs/bring-your-own-byo-custom-operations)

Learn more about creating custom operations for use in the Operations Builder..

### [BYO Implementation Examples](/v1/docs/bring-your-own-byo-726-implementation-examples)

Discover examples of component implementation using the Unqork Designer Platform.

### [BYO Best Practices](/v1/docs/best-practices-bring-your-own-byo-framework)

Learn about best practices for implementing and using BYO assets.

### [BYO General FAQ](/v1/docs/bring-your-own-byo-general-faq-frequently-asked-questions)

Learn about the Bring Your Own Framework and discover frequently asked questions.

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.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

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.

A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton.

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

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.

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.

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.

A modal is a window that appears on top of the content you are currently viewing.