Bring Your Own (BYO): Custom Events

Overview

The BYO framework enables developers to create custom events that integrate seamlessly with the Unqork Designer Platform. Custom events DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive. can be scoped to individual components or registered as global events. After defining and registering a custom event, it functions as a native event that can be used throughout the platform.

For security reasons, external URLs cannot be imported into a BYO implementation file. Unqork recommends copying external source code and importing it into the JavaScript JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser. file.

Event Definition

Define custom event DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive. key attributes in the manifest.json file. Each entry in the root-level or component-level events array An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects. (components → events) defines an event available in the Unqork Designer Platform.

Learn more about the event definition in our BYO: Understanding the manifest.json File article.

A component can dispatch custom events that are handled through configuration in the Operations Builder. This enables developers to trigger logic or workflows in response to component behavior.

Define each event as a named export in your main JavaScript JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser. file. The export name must match the type value specified in the manifest.json file.

1
2
3
4
5
6
7
8
class CustomEvent {
  name = 'myComponentClick';
  payload = {};
}

export const myComponentClick = {
  model: async () => CustomEvent
}

Event Payloads

Custom events can carry structured payload data. This data provides context about 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. interactions triggering events.

Developers define the event payloads in the implementation JavaScript and manifest.json. After implementation, a Creator Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. can use the values of the event payload in their configuration by referencing the Operations Builder's Context Reference panel.

Passing values, like the content of an input field, ID of a clicked row, or a selected cell, lets Creators make operation logic dynamic and responsive to 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. actions. Downstream operations can use these values to perform targeted updates based on the event’s context.

Learn more about event payloads in our BYO: Event Payloads article.