Operations Builder

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.

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.

To learn more about Centauri and Vega-supported components, view our Introduction to Vega article.

To configure operations in a component:

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.

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  Initializer component onto the canvas. Or, open the configuration menu of an existing  Initializer component.

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.

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 singleCheckbox key shows a Boolean value of true. In contrast, the  Text 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 The Boolean data type accepts one of two values: true, or, false. or String A string is an object that represents a sequence of characters. Strings typically hold data represented in text form.. Failure to use the right data type might cause long term issues for your application.

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

1
2
3
4
{
“firstName”:”John”,
“lastName”:”Doe”
}

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.

Pre-Configuration

For this example, set the Runtime Version to Vega (2.0) 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.. This enables the Operations Builder for use with all Vega-supported components.

To change the runtime in the Module Builder:

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.

Configure the Text Field Components

1.

Drag and drop two  Text Field components onto the canvas, placing them inside the clientsTable Vega Table component.

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 Vega Table component.

1.

Drag and drop a Button component onto the canvas, placing it below the clientsTable Vega Table component.

Observing Events and Operations in Console

In the Express View 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.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  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.

Events and operations only display in non-production environments.

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.

To learn more about Centauri and Vega-supported components, view our Introduction to Vega article.

To configure operations in a component:

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

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.

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  Initializer component onto the canvas. Or, open the configuration menu of an existing  Initializer component.

2.

In the component's navigation menu, select Actions.

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.

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 singleCheckbox key shows a Boolean value of true. In contrast, the  Text 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 The Boolean data type accepts one of two values: true, or, false. or String A string is an object that represents a sequence of characters. Strings typically hold data represented in text form.. Failure to use the right data type might cause long term issues for your application.

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

1
2
3
4
{
“firstName”:”John”,
“lastName”:”Doe”
}

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.

Configure the Text Field Components

1.

Drag and drop two  Text Field components onto the canvas, placing them inside the clientsTable Vega Table component.

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 Vega Table component.

1.

Drag and drop a Button component onto the canvas, placing it below the clientsTable Vega Table component.

4.

In the component's configuration menu, select Actions.

7.

Hover over the Button component.

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

Observing Events and Operations in Console

In the Express View 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.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  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.

Events and operations only display in non-production environments.