Operations Builder

Overview

The Vega runtime Operations Builder lets Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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 component, setting the event to On Click causes an operation to execute when an 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. clicks the button. Operations perform a specific function when an event occurs. For example, performing a Table Add Row operation that adds a new row to a Vega Table when the end-user clicks a button.

TIP  To learn more about how the Operations Builder works, view our Introduction to 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 to the Operations Builder in the Initializer component from the Outputs table Enter outputs components and actions you want the component to perform..

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

TIP  To learn more about Centauri and Vega-supported components, view our 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 A modal is a window that appears on top of the content you are currently viewing. displays.

3. In the Select an Event  | ▾ field, enter or select an event from the list.
4. Click Add. The New Operation configuration menu displays.

A static image displaying the Operations Builder Configuration Menu

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.

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.

Preview the functionality in Express View Express View is how your end-user views you 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..

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 Radio Button component icon Initializer component onto the canvas. Or, open the configuration menu of an existing Radio Button component icon Initializer component.
2. In the component's navigation menu, select Actions Icon 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.

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

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.

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.

Preview the functionality in Express View Express View is how your end-user views you 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..

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 component to add a new row on button-click.

Configure the Vega Table Component

Configure a Vega Table 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 Grid Component Icon Vega Table component onto the canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. 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  Text Field components onto the canvas, placing them inside the clientsTable Grid Component Icon Vega Table component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 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  Grid Component Icon Vega Table component.

1. Drag and drop a Button component Icon Button component onto the canvas, placing it below the clientsTable Grid Component Icon Vega Table component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnCreateRow.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Add Row.
4. In the component's configuration menu, select Actions Icon Actions.
5. Set the Action Type to Event.
6. Click Save & Close.
7. Hover over the Button component Icon Button component.

A 6-button toolbar displays above the component on hover-over.

8. Click the (Operations Builder) button. The Operations Builder modal A modal is a window that appears on top of the content you are currently viewing. 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

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.

Preview the functionality in Express View Express View is how your end-user views you 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..

Observing Events and Operations in Console

In the Express View Express View is how your end-user views you 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. DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software., you can view the initiation and execution of events and operations. In the image below, the init Radio Button component icon 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.

Best Practices and Limitations

Resources