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)  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 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 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. The label On Change becomes onChange when viewing the event in a configuration, or in the DevTools Console.

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:

1. Preview the module containing a Text Field component.

2. In the Text Field component's input field, enter one or more character letters.

3. Open the DevTools Console.

4. 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 's Console Log Filter from Default Levels to All Levels.

5. Expand the Event object and  inspect the payload's nativeEvent object:

   

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.

   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 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 Text 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 Text Field component.

   The component toolbar displays above the component element.

2. Click the (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. 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.

    Do not enable Skip Interpolation because it's not compatible with this dynamic syntax.×

12. Click Save. The operation configuration panel closes.

13. Click Close. The Events & Operations modal closes.

14. Click Save Component.

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

Resources

Bring Your Own (BYO) Framework Landing Page

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

Introduction to the Bring Your Own (BYO) Framework

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

Create a BYO Package

Discover the structure and content of a BYO Package                                                    

Understanding the manifest.json File

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

Understanding the BYO Runtime Engine API

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

Custom Component SDK

Extend component functionality in the Unqork Designer Platform.                                                    

Custom Component

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

Custom Events

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

Event Payloads

Learn more about viewing and using event payloads with the Operations Builder.                                                    

Custom Operations

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

BYO  Implementation Examples

Discover examples of component implementation using the Unqork Designer Platform.                                                    

BYO 7.24 Implementation Examples

Discover examples of component implementation using the 7.24 Unqork Designer Platform.                                                    

Host External Assets Using a CDN (Content Delivery Network) Setup (7.22 - 7.24)

Learn about setting up Express roles and managing permissions.                                                    

BYO Best Practices

Learn about best practices for implementing and using BYO assets.                                                    

BYO General FAQ

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