---
title: "Introduction to the Operations Builder"
slug: "introduction-to-the-operations-builder"
updated: 2025-10-01T13:52:21Z
published: 2025-10-01T13:52:21Z
canonical: "docs.unqork.io/introduction-to-the-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.

# Introduction to the Operations Builder

## Overview

The **Operations Builder** **tool** enables Creators to configure and execute logic behavior in Unqork [applications](/v1/docs/introduction-to-unqork-applications). Creators use the Operations Builder to configure logic for their applications in the form of events and operations. Events are facts about what has happened in the runtime, and operations are the action that executes when the event . For example, you could have a [Button](/v1/docs/button-component) component configured with an `On Click` event that executes the `Add a Row` operation in a [Vega Table](/v1/docs/vega-table-component) component. When the end-user clicks the button, the button's `On Click` event occurs and the assigned operation executes, adding a new row to the table.

The Operations Builder supports advanced configurations, including [components](/v1/docs/module-builder-component-library) emitting multiple events, and events causing multiple operations to execute. The Operations Builder uses the [Vega 2.0 Runtime](/v1/docs/introduction-to-vega) and Vega-compatible components to produce a guided, easy-to-read experience that isn't possible in the Centauri runtime.

> [!TIP]
> To learn how to use the **Operations Builder tool** in an application, view our [Operations Builder](/v1/docs/operations-builder) article.

## When to Use the Operations Builder

Use the Vega Operations Builder when you want to utilize DOM events, or new Vega features like the [Vega Table Operations](/v1/docs/vega-table-operations). DOM events provide Creators granular control when logic executes. The Operations Builder is only available in the [Vega 2.0 runtime](/v1/docs/introduction-to-vega).

Lets explore scenarios when you'd use the Operations Builder in Vega versus configuring logic in Centauri.

### When to Use the Operations Builder Tool

The Operations Builder enables the following features:

- Granular control over logic using DOM events, like `On Click`, `On Scroll`, `On Error`, and so on.
- Executing operations like `Scroll To` or `Focus Element`.
- Executing [Vega Table Operations](/v1/docs/vega-table-operations), like Add Row, Add Column, Clear, and so on.
- Using a Boolean value to change the status of a component using an event. For example, setting a hidden **H****TML Element** component to visible if they move their mouse over a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(19).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Button** component.
- Using an event occurrence to execute a logic component.

### When to Use Centauri Logic Components:

While you can execute [logic components](/v1/docs/data-event-processing-components) using the `Execute` event operation, consider using Centauri logic components for the following reasons:

- Manipulating data using **D****ata Workflow** [operators](/v1/docs/data-workflow-operatorlibrary).
- Triggering a Centauri-only component.
- When the existing configuration does not need to be configured with events and operations.

## Understanding Events

In Unqork applications, events occur that cause operations to execute. Events can occur from actions in the runtime, in the DOM, or by the end-user. For example, when an end-user clicks an element on the page, the element emits the `onClick` event. Using the Operations Builder in a Vega-compatible component, Creators can assign one or more operations to execute after an event occurs.

Think of events as the **IF** portion of a conditional statement. **IF** this event occurs, THEN perform that operation.

While Unqork supports dozens of events for Creators to configure, common events include:

- **On Click**: The end-user clicks an HTML element, like a button.
- **On Hover**: The end-user hovers their mouse over an HTML element.
- **On Change**: An HTML element changes.
- **On Load**: The browser finishes loading the page.
- **New Submission**: An **I****nitializer** component fires at the start of a new module [submission](/v1/docs/submission-data).

> [!TIP]
> To get a full list of events, view our [Operations Builder Events Reference List](/v1/docs/operations-builder-eventsreference).

Once Creators have decided on an event, they can begin building operations that execute when the event fires.

## Understanding Operations

Operations are the logic that fires when an event occurs. In Unqork, operations can change a Boolean value, scroll to a specific element, focus on an element, add new rows in a Vega Table, toggle a component from hidden to visible, and so on.

Think of operations as the **THEN** portion in a conditional statement: IF this event occurs, **THEN** perform this operation.

Here are some examples of operations you can build with the Operations Builder:

- Use the `Execute` operation to trigger a **D****ata Workflow** component.
- Use the `Add a Row` operation to create an additional row in a **V****ega Table** component.
- Use the `Boolean` operation to display a hidden **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(19).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Button** component.
- Download a PDF file.

## Combining Events and Operations

After selecting an event and operation(s), you'll configure them in the Operations Builder tool. There are over one thousand possible combinations of events and operations for a component. How you use them depends on your configuration needs.

Here are some examples of event and operation combinations:

- A **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(19).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Button** component with an On Click event to execute the Table Add Row operation in a **V****ega Table**.
- An **I****nitializer** component with a New Submission event that executes the Execute operation against a **D****ata Workflow**.
- A **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(19).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Button** component with an On Click event to execute an Add a Row operation in a **V****ega Table**.
- A **V****ega Table** component with an On Add Row event that disables a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(19).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Button** component using the Boolean operation.
- A Menu component with an On Click event that executes a Scroll To operation targeting HTML headers.

> [!TIP]
> To learn more about using the **Operations Builder tool** in an application, view our [Operations Builder](/v1/docs/operations-builder) article.

## Vega Components Compatible With the Operations Builder

The following Vega-compatible components support the [Operations Builder](/v1/docs/operations-builder):

| **Primary Components** | **Secondary Components** | **Display & Layout Components** | **Data & Event Processing Components** | **Charts & Graphs Components** |
| --- | --- | --- | --- | --- |
| **![Single Checkbox component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/checkboxes_teal_component(3).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Checkboxes** **![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Date Input** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/chevron_down_grey_icon(9).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Dropdown** **Menu** **N****umber** **R****adio Buttons** **![Single Checkbox component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SingleCheckboxComponent_teal_icon(4).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Single Checkbox** **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(6).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Text Area** **T****ext Field** **Simple Select** **Search Select** | **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(19).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Button** **H****idden** **I****ntl Phone Number** **P****hone Number** | **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(15).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Columns** **F****ield Group** **H****TML Element** **Iframe** **Image** **I****terator** **P****anel** **Panel -** **Dynamic Refresh** **V****ega Table** | **I****nitializer** **Plug-In** **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/timer_teal_component(3).png?sv=2026-02-06&spr=https&st=2026-11-07T18%3A09%3A38Z&se=2026-11-07T19%3A09%3A38Z&sr=c&sp=r&sig=OjSafez5PMZRSrN%2FzihKe0ywsSeO8NctifDmpu%2F8sWE%3D) Timer** | > [!NOTE] > **Charts & Graphs components are not supported.** |

## Resources

- [Use the Operations Builder Tool](/v1/docs/operations-builder).
- [Introduction to the Vega Runtime](/v1/docs/introduction-to-vega).
- [Vega Table Operations](/v1/docs/vega-table-operations).
- [Operations Builder Events Reference List](/v1/docs/operations-builder-eventsreference)

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.

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 conditional statement, also known as an if-then statement, is a logical formula consisting of a hypothesis (if), followed by a conclusion (then). The conclusion is the result of the hypothesis.

HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages.