---
title: "Operations Builder"
slug: "operations-builder"
updated: 2025-10-28T13:34:12Z
published: 2025-10-28T13:34:12Z
canonical: "docs.unqork.io/operations-builder"
---

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

# Operations Builder

UDesignerClassic Designer

## Overview

The Vega runtime Operations Builder lets Creators configure logic for Vega-compatible components. The Operations Builder configuration process is divided into two parts: events and operations. Events are facts about what has happened in the Runtime, and decides when an operation executes. For example, when using the Operations Builder in a [Button](/v1/docs/button-component) component, setting the event to On Click causes an operation to execute when an end-user clicks the button. Operations perform a specific function when an event occurs. For example, performing a [Table Add Row](/v1/docs/vega-table-operations#table_Add_Row) operation that adds a new row to a [Vega Table](/v1/docs/vega-table-component) when the end-user clicks a button.

> [!TIP]
> To learn more about how the Operations Builder works, view our [Introduction to Operations Builder](/v1/docs/introduction-to-the-operations-builder) article.

## Configuring with the Operations Builder Tool

Depending on the type of component, the Operations Builder is accessible in one of two ways. You can access the Operations Builder in non-logic components using the component's canvas toolbar. You can also access the Operations Builder in the [Initializer](/v1/docs/initializer-component) component from the Outputs table.

> [!WARNING]
> The **Runtime Version** must be set to **Vega (2.0)** to use the Operations Builder with Vega-compatible components. Or, use Cross-Runtime Support in a Panel component to access the Operations Builder in the Centauri runtime.

### Configuring Operations in Non-Logic Components

Configuring the Operations Builder is a multi-step process that begins with selecting an event, then configuring operations for that event. Once you've configured at least one operation, the Operations Builder tool lets you edit existing configurations, add additional events and operations, and adjust the order of execution.

> [!WARNING]
> To access the Operations Builder, the moduleRuntime Version setting must be set to **Vega (2.0)**, or, the component must be in a Vega-enabled Panel component.

> [!TIP]
> To learn more about Centauri and Vega-supported components, view our [Introduction to Vega](/v1/docs/introduction-to-vega) article.

To configure operations in a component:

1. In the Module Builder, open the settings of a Vega-supported component.
2. Navigate to the component's **Actions** settings.
3. To the right of **Events & Operations**, click Edit. The Operations Builder displays.

[![A static image displaying a component's configuration settings, the Operations Builder Edit button is highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB_UD_Access_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB%20UD%20Access.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)
4. In the Select an Event ▾ field, enter or select an event from the list.

> [!TIP]
> To see a list of events and their descriptions, view our [Operations Builder Events Reference](/v1/docs/operations-builder-eventsreference) list.
5. Click Add. The **Operation Type** configuration menu displays.
6. In the **Operation Type** field, enter or select an operation to execute when the event occurs.
7. Depending on the operation, configure the remaining fields. Settings marked with an asterisk must be completed before you can save the operation.
8. Click Save. The operation displays in the Operations Builder configuration window as a new row. The Operation Type and Operation Summary values display inside the row.

[![A static image displaying the Operations Builder Configuration Menu with a configured operation.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB_UD_ConfigMenu2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB%20UD%20ConfigMenu2.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)
9. (Optional) To configure another operation for the same event, select or enter a new operation from the **Operation Type** drop-down.
10. (Optional) To configure another event, enter or select an event from the Select an Event | ▾ field.
11. Click **Save Component**.
12. **Save** your module.
13. Preview the functionality in Express View.

### Configuring Operations in the Initializer Component

Unlike non-logic components, the Initializer component's Operations Builder event is set by the **Trigger Type** setting. Each row in the Initializer component's Outputs table uses the same event determined by the Trigger type. But, multiple operations can be assigned to that event.

> [!NOTE]
> Regardless of the **Trigger Type** setting, triggering the Initializer component also executes any operations configured in the Outputs table.

To configure operations in an Initializer component:

1. Drag and drop an **I****nitializer** component onto the canvas. Or, open the configuration menu of an existing **I****nitializer** component.
2. Navigate to the **Actions** settings.
3. Under **Outputs** table's **Property ID** field, enter or select the Property ID you want to execute an operation against.

> [!NOTE]
> A Property ID is not required for a Vega Operation.
4. In the **Type** field, enter or select **vegaOperation**.
5. In the **Value** field, paste the operation’s JSON.
6. Click **Save Component** to close the Initializer component's configuration menu.
7. **Save** your module.
8. Preview the functionality in Express View.

### Customizing Operations using the Operations Builder Data Editor

Some operations might contain open-ended parameters that require using the Data Editor to manipulate. For example, the **Value** field in `Set Property` operation enables Creators to input [data of any type](/v1/docs/introduction-to-data-types-and-structures).

[![A static image displaying the Operations Builder's Data Editor field.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB_UD_DataEditor_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB%20UD%20DataEditor.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)

Because the Data Editor does not assume a specific data type, Creators must be exact when entering data. For example, in the image below, the **![Single Checkbox component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SingleCheckboxComponent_teal_icon(5).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D) Single Checkbox** component singleCheckbox key shows a Boolean value of true. In contrast, the **T****ext Field** component textFieldTrue shows how entering true into the component's field stores data as a string that reads "true". The use of quotation marks dictates which data type is Boolean or Strings. Failure to use the right data type might cause long term issues for your application.

[![Image showing the difference between boolean and string data types in the DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/assoclp_datatype_013_boolean_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/assoclp%20datatype%20013%20boolean(1).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)

When using the Data Editor, its important to consider how the following data types and structures are used:

| **Data Type** | Example | Description |
| --- | --- | --- |
| **Boolean** | true false | A Boolean value can only be true, or false. Unlike the string data type, it does not enclose its values in quotation marks. |
| **String** | "true" "false" | A String value contains text, numbers, letters, symbols, and spaces. Strings use double quotation marks "" to differentiate values from other data types. |
| **Number** | 5 | A Number's value can only be a numerical integer or decimal values. The Number data type does not use quotation marks. |
| **Array** | [“apple”,”pear”] | An array is encased by brackets []. Arrays store multiple values in a single variable. Values in array can be any of the following: - Strings - Number - Boolean - array - object |
| **Object** | ```json { “firstName”:”John”, “lastName”:”Doe” } ``` | An object is a type of data structure that represents a single, self-contained entity. The object acts as a container for the characteristics of that entity. These characteristics store as key/value pairs in the object. The value of one of those key/value pairs can itself be an object or an array. Objects encase data using curly brackets `{}`. |

### Example Event and Operation Combination

The Operations Builder offers endless combinations between events and operations. In this example, an end-user needs to add additional rows to a table. You'll use the Operations Builder to configure a [Button](/v1/docs/button-component) component to add a new row on button-click.

### Pre-Configuration

For this example, set the Runtime Version to Vega (2.0). This enables the Operations Builder for use with all Vega-supported components.

To change the runtime in the Module Builder:

1. Above the Module Builder, navigate to the **Runtime Version** setting.
2. From the **Runtime Version** drop-down, select **Vega (2.0)**.

[![A static image displaying the Module's runtime version setting.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB_UD_Runtime_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB%20UD%20Runtime.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)

### Configure the Vega Table Component

Configure a [Vega Table](/v1/docs/vega-table-component) component with fields the end-user must complete. Then, you'll configure a Button component using the Operations Builder.

1. In the Module Builder, drop and drop a **V****ega Table** component onto the canvas.
2. In the Property ID field, enter `clientsTable`.
3. From the **View Type** drop-down, select **Form**.
4. Click **Save Component**.

### Configure the Text Field Components

1. Drag and drop two **T****ext Field** components onto the canvas, placing them inside the `clientsTable` **V****ega Table** component.
2. In the Property ID and Label Text fields of each component, enter the following:

| Property ID | Label Text |
| --- | --- |
| firstName | First Name |
| lastName | Last Name |
3. Click **Save Component** for each component as you add it.

### Configure the Button Component

Configure a [Button](/v1/docs/button-component) component to execute the Add a Row operation when it emits the On Click event. When end-users click the button, it adds a row to the bottom of the **clientsTable** **V****ega Table** component.

1. Drag and drop a **Button** component onto the canvas, placing it below the `clientsTable` **V****ega Table** component.
2. In the Property ID field, enter **btnCreateRow**.
3. In the Label Text field, enter `Add Row`.
4. Navigate to the **Actions** settings.
5. Set the **Action Type** to **Event**.
6. Navigate to the **Events & Operations** setting.
7. Click Edit. The Operations Builder modal displays.
8. In the Select an Event | ▾ field, enter or select the On Click event.
9. Click Add. The **Operation Type** configuration menu displays.

[![A static image displaying the Operations Builder Configuration Menu](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB_UD_Button_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB%20UD%20Button.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)
10. In the **Operation Type** field, enter or select `Table Add Row`.
11. In the **Target Key** field, enter or select `clientsTable`.
12. In the **Target Index*** field, set **String** to **Number**.
13. In the field to the right of the **Number** field, enter `1`.
14. Click Save to close the New Operation window. The operation displays in the Operations Builder configuration window as a new row. The Operation Type and Operation Summary values display inside the row.
15. Click **Save Component** to close the Operations Builder modal.
16. **Save** your module.
17. Preview the functionality in Express View. [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Ops_Builder_ExampleExpress.webm?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)

### Observing Events and Operations in Console

In the Express View DevTools Console, you can view the initiation and execution of events and operations. In the image below, the init Initializer emits the New Submission event. The Table Add Row operation fires when the event occurs. The Arguments's Object corresponds to the Operations fields, and the values set using the Operations Builder.

> [!NOTE]
> Events and operations only display in non-production environments.

[![A static image displaying the Data Structure of an Event and Operation executing in the Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_ConsoleView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder%20ConsoleView.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)

## Overview

The Vega runtime Operations Builder lets Creators configure logic for Vega-compatible components. The Operations Builder configuration process is divided into two parts: events and operations. Events are facts about what has happened in the Runtime, and decides when an operation executes. For example, when using the Operations Builder in a [Button](/v1/docs/button-component) component, setting the event to On Click causes an operation to execute when an end-user clicks the button. Operations perform a specific function when an event occurs. For example, performing a [Table Add Row](/v1/docs/vega-table-operations#table_Add_Row) operation that adds a new row to a [Vega Table](/v1/docs/vega-table-component) when the end-user clicks a button.

> [!TIP]
> To learn more about how the Operations Builder works, view our [Introduction to Operations Builder](/v1/docs/introduction-to-the-operations-builder) article.

## Configuring with the Operations Builder Tool

Depending on the type of component, the Operations Builder is accessible in one of two ways. You can access the Operations Builder in non-logic components using the component's canvas toolbar. You can also access the Operations Builder in the [Initializer](/v1/docs/initializer-component) component from the Outputs table.

> [!WARNING]
> The **Runtime Version** must be set to **Vega (2.0)** to use the Operations Builder with Vega-compatible components. Or, use Cross-Runtime Support in a Panel component to access the Operations Builder in the Centauri runtime.

### Configuring Operations in Non-Logic Components

Configuring the Operations Builder is a multi-step process that begins with selecting an event, then configuring operations for that event. Once you've configured at least one operation, the Operations Builder tool lets you edit existing configurations, add additional events and operations, and adjust the order of execution.

> [!WARNING]
> To learn more about Centauri and Vega-supported components, view our [Introduction to Vega](/v1/docs/introduction-to-vega) article.

To configure operations in a component:

1. In the Module Builder, hover over a Vega-compatible component.

A 6-button toolbar displays above the component on hover-over.
2. Click the (Operations Builder) button. The Operations Builder modal displays.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_Access.webm?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)
3. In the Select an Event | ▾ field, enter or select an event from the list.

> [!TIP]
> To see a list of events and their descriptions, view our [Operations Builder Events Reference](/v1/docs/operations-builder-eventsreference) list.
4. Click Add. The **New Operation** configuration menu displays.

[![A static image displaying the Operations Builder Configuration Menu](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_ConfigurationMenu_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder%20ConfigurationMenu.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)
5. In the **Operation Summary** field, enter a description of what the operation will do.
6. In the **Operation Type** field, enter or select an operation to execute when the event occurs.
7. Depending on the operation, configure the remaining fields. Settings marked with an asterisk must be completed before you can save the operation.
8. Click **Save Operation**. The operation displays in the Operations Builder configuration window as a new row. The Operation Type and Operation Summary values display inside the row.

[![A static image displaying the Operations Builder Configuration Menu with a configured operation.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_ConfigurationMenu2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder%20ConfigurationMenu2.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)
9. (Optional) To configure another operation for the same event, click + Add Operation.
10. (Optional) To configure another event, enter or select an event from the Select an Event | ▾ field.
11. Click **Save & Close**.
12. **Save** your module.
13. Preview the functionality in Express View.

### Configuring Operations in the Initializer Component

Unlike non-logic components, the Initializer component's Operations Builder event is set by the **Trigger Type** setting. Each row in the Initializer component's Outputs table uses the same event determined by the Trigger type. But, multiple operations can be assigned to that event.

> [!NOTE]
> Regardless of the **Trigger Type** setting, triggering the Initializer component also executes any operations configured in the Outputs table.

To configure operations in an Initializer component:

1. Drag and drop an **I****nitializer** component onto the canvas. Or, open the configuration menu of an existing **I****nitializer** component.
2. In the component's navigation menu, select **![Actions Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_icon(19).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D) Actions**.
3. Under **Outputs** table's **Property ID** field, enter or select the Property ID you want to execute an operation against.

> [!NOTE]
> A Property ID is not required for a Vega Operation.
4. In the **Type** field, enter or select **vegaOperation**. In the **Value** field, the Operations Builder button displays.

> [!WARNING]
> If a value already exists in the **Value** field, and it is not a compatible Vega operation, then an error icon displays. To fix this issue, change the **Type** to a different value. Then, remove the existing value in the **Value** field. Set the **Type** value back to **vegaOperation** to display the Operations Builder button.

[![A static image displaying the Initializer Component's Actions settings. The Outputs table's Type is set to vega Operation, and the Value displays the Operations Builder button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_InitConfig1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder%20InitConfig1.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)
5. Click Operations Builder. The Operations Builder modal displays.
6. In the **Operation Summary** field, enter a description of what the operation will do.
7. In the **Operation Type** field, enter or select an operation to execute when the event occurs.
8. Depending on the operation, configure the remaining fields. Settings marked with an asterisk must be completed before you can save the operation.
9. Click **Save Operation**. The operation displays in the Operations Builder configuration window as a new row. The Operation Type and Summary display inside the row.

[![A static image displaying the Initializer Operations Builder Configuration Menu with a configured operation.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_InitConfig2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder%20InitConfig2.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)
10. (Optional) To configure another operation for the same event, click + Add Operation.
11. Click **Save & Close** to close the Operations Builder modal.
12. Click **Save & Close** to close the Initializer component's configuration menu.
13. **Save** your module.
14. Preview the functionality in Express View.

### Customizing Operations using the Operations Builder Data Editor

Some operations might contain open-ended parameters that require using the Data Editor to manipulate. For example, the **Value** field in `Set Property` operation enables Creators to input [data of any type](/v1/docs/introduction-to-data-types-and-structures).

[![A static image displaying the Operations Builder's Data Editor field.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_DataEditor_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder%20DataEditor.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)

Because the Data Editor does not assume a specific data type, Creators must be exact when entering data. For example, in the image below, the ![Single Checkbox component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SingleCheckboxComponent_teal_icon(5).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D) **Single Checkbox** component **singleCheckbox** key shows a Boolean value of true. In contrast, the **T****ext Field** component **textFieldTrue** shows how entering true into the component's field stores data as a string that reads "**true**". The use of quotation marks dictates which data type is Boolean or . Failure to use the right data type might cause long term issues for your application.

[![Image showing the difference between boolean and string data types in the DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/assoclp_datatype_013_boolean_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/assoclp%20datatype%20013%20boolean(1).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)

When using the Data Editor, its important to consider how the following data types and structures are used:

| Data Type | Example | Description |
| --- | --- | --- |
| Boolean | **true** **false** | A Boolean value can only be true, or false. Unlike the string data type, it does not enclose its values in quotation marks. |
| String | **"****true****"** **"****false****"** | A String value contains text, numbers, letters, symbols, and spaces. Strings use double quotation marks "" to differentiate values from other data types. |
| Number | 5 | A Number's value can only be a numerical integer or decimal values. The Number data type does not use quotation marks. |
| Array | `[“apple”,”pear”]` | An array is encased by brackets []. Arrays store multiple values in a single variable. Values in array can be any of the following: - Strings - Number - Boolean - array - object |
| Object | ```json { “firstName”:”John”, “lastName”:”Doe” } ``` | An object is a type of data structure that represents a single, self-contained entity. The object acts as a container for the characteristics of that entity. These characteristics store as key/value pairs in the object. The value of one of those key/value pairs can itself be an object or an array. Objects encase data using curly bracket`{}`. |

### Example Event and Operation Combination

The Operations Builder offers endless combinations between events and operations. In this example, an end-user needs to add additional rows to a table. You'll use the Operations Builder to configure a [Button](/v1/docs/button-component) component to add a new row on button-click.

### Configure the Vega Table Component

Configure a [Vega Table](/v1/docs/vega-table-component) component with fields the end-user must complete. Then, you'll configure a Button component using the Operations Builder.

1. In the Module Builder, drop and drop a **V****ega Table** component onto the canvas.
2. In the Property ID field, enter **clientsTable**.
3. From the **View Type** drop-down, select **Form**.
4. Click **Save & Close**.

### Configure the Text Field Components

1. Drag and drop two **T****ext Field** components onto the canvas, placing them inside the **clientsTable** **V****ega Table** component.
2. In the Property ID and Label Text fields of each component, enter the following:

| Property ID | Label Text |
| --- | --- |
| firstName | First Name |
| lastName | Last Name |
3. **Save** & Close each component as you add it.

### Configure the Button Component

Configure a [Button](/v1/docs/button-component) component to execute the `Add a Row` operation when it emits the On Click event. When end-users click the button, it adds a row to the bottom of the **clientsTable** **V****ega Table** component.

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(20).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D) Button** component onto the canvas, placing it below the **clientsTable** **V****ega Table** component.
2. In the Property ID field, enter **btnCreateRow**.
3. In the Label Text field, enter `Add Row`.
4. In the component's configuration menu, select **![Actions Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_icon(19).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D) Actions**.
5. Set the **Action Type** to **Event**.
6. Click **Save & Close**.
7. Hover over the **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(20).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D) Button** component.

A 6-button toolbar displays above the component on hover-over.
8. Click the (Operations Builder) button. The Operations Builder displays.
9. In the Select an Event | ▾ field, enter or select the On Click event.
10. Click Add. The **New Operation** configuration menu displays.

[![A static image displaying the Operations Builder Configuration Menu](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_ConfigurationMenu_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder%20ConfigurationMenu.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)
11. In the **Operation Summary** field, enter `Add a new row to the bottom of the clientsTable Vega Table`.
12. In the **Operation Type** field, enter or select `Table Add Row`.
13. In the **Target Key** field, enter or select `clientsTable`.
14. In the **Target Index*** field, set **String** to **Number**.
15. In the field to the right of the **Number** field, enter `1`.
16. Click **Save Operation** to close the New Operation window. The operation displays in the Operations Builder configuration window as a new row. The Operation Type and Operation Summary values display inside the row.
17. Click **Save & Close** to close the Operations Builder modal.
18. **Save** your module.
19. **Preview** the functionality in Express View. [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Ops_Builder_ExampleExpress.webm?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)

### Observing Events and Operations in Console

In the Express View DevTools Console, you can view the initiation and execution of events and operations. In the image below, the **init** **I****nitializer** emits the New Submission event. The Table Add Row operation fires when the event occurs. The Arguments's Object corresponds to the Operations fields, and the values set using the Operations Builder.

> [!NOTE]
> Events and operations only display in non-production environments.

[![A static image displaying the Data Structure of an Event and Operation executing in the Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_ConsoleView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder%20ConsoleView.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A42Z&se=2026-11-11T03%3A57%3A42Z&sr=c&sp=r&sig=%2BnME9%2BzoQe4J0Ej0x64cDaN%2BlDTMfzO18FvlF%2FXEACI%3D)

## Best Practices and Limitations

- You can configure multiple events and operations in a single component. You can also configure a single event to fire multiple operations. Each operation configured for an event executes . Events are discrete and independent of each other.
- In the **I****nitializer** component's configuration menu, use the **Output** table's **Property ID** field as a reference for what the operations are targeting. For example, if you are using Vega Table operations, enter the Vega Table component's Property ID in the **Output** table's **Property ID** field.
- The Initializer component executes a single row containing multiple operations. However, multiple rows of operations might not execute .
- Operations can execute components that do not use the Operations Builder. For example, an operation can trigger a [Data Workflow](/v1/docs/data-workflow-component) component.

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.

Enter outputs components and actions you want the component to perform.

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.

The Boolean data type accepts one of two values: true, or, false.

A string is an object that represents a sequence of characters. Strings typically hold data represented in text form.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

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

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

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

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