How to: Use Cross-Runtime Support

Triggering Vega Logic in a Centauri Module

Centauri can trigger Vega runtime operations using Centauri logic components, like the Initializer, Plug-In, Decisions, and Calculator components. For example, you could use a Centauri Initializer component to initiate logic in a Vega-enabled Panel component.

For this example, use Centauri Button and Initializer components to trigger Vega logic inside of a Vega-enabled Panel component.

What You Need

To configure the Centauri module, you need the following components:

• 1 Panel component
• 3 Text Field components
• 1 Decisions component
• 2 Initializer components
• 1 Button component

Configure the Panel component

For this example, enable the Vega runtime in a Panel component:

1.

In the Module Builder, drag and drop a Panel component onto the canvas.

2.

In the 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 panelVegaLogic.

3.

Navigate to the Runtime settings.

4.

Set the Render Components with drop-down to Vega (2.0).

5.

Click Save Component.

Configure the Text Field Components

Add three Text Field components to the canvas. Later, we'll create operations that populate these fields with Success values.

1.

Drag and drop three  Text Field components onto the canvas, placing each one inside the panelVegaLogic Panel component.

2.

Enter the following 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. values for each component:

3.

Click Save Component for each component as you complete it.

Configure the First Initializer Component

Add an Initializer component to the Vega-enabled Panel component. Later, you'll set up another Initializer component that triggers this first one using the Execute Vega operation.

1.

Drag and drop a  Initializer component onto the canvas, placing it above the textInitVegaLogic  Text Field component, inside the panelVegaLogic Panel 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 initWhenExecute.

3.

In the Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . field, enter initWhenExecute.

4.

In the Outputs table, enter the following:

5.

Click Save Component.

Configure the Decisions Component

Like the Initializer component above, set up the Decisions component to be executed by a Execute Vega operation.

1.

Drag and drop a  Decisions component onto the canvas, placing it above the textDecisionsVegaLogic  Text Field component, inside the panelVegaLogic Panel 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 ruleWhenExecute.

3.

In the Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . field, enter ruleWhenExecute.

4.

In the Outputs table, enter the following:

5.

In the Conditionals table, enter the following:

6.

Click Save Component.

Configure the Second Initializer Component

The second Initializer component uses the Vega Operations Builder in its Outputs table to perform operations on components inside the Vega-enabled Panel component. This Initializer component is configured in the Centauri runtime.

1.

Drag and drop a  Initializer component onto the canvas, placing it above the panelVegaLogic Panel 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 initExecuteVegaLogic.

3.

In the Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . field, enter initExecuteVegaLogic.

4.

From the component settings menu, select Actions

5.

In the Outputs table, enter the following:

Configure the Initializer Component's Operations

Now that the Initializer component has the Operations Builder enabled, build three operations that will populate the textInitVegaLogic, textDecisionsVegaLogic, and textValueVegaLogic  Text Field components with a value.

From the initExecuteVegaLogic  Initializer component's configuration settings:

1.

In the Outputs table, click Operations Builder. The Operations Builder modal displays.

2.

From the Operation Type drop-down, enter or select Execute.

3.

Click + Add Operation. The Operations Builder populates with the Execute operation fields.

4.

In the Target Key* field, enter initWhenExecute.

5.

In the Signal Target field, enter root.

6.

Set Should Execute to (checked).

7.

Set Block Execution to (checked).

8.

Click Save. The configured operation displays in the Operations Builder list.

9.

From the Operation Type drop-down, enter or select Execute. The Operations Builder populates with the Execute operation fields.

10.

Click + Add Operation.

11.

In the Target Key* field, enter or select ruleWhenExecute.

12.

In the Signal Target field, enter root.

13.

Set Should Execute to (checked).

14.

Set Block Execution to (checked).

15.

Click Save. The configured operation displays as the second row the Operations Builder list.

16.

From the Operation Type drop-down, enter or select Set Property. The Operations Builder populates with the Set Property operation fields.

17.

Click + Add Operation.

18.

In the Target Key* field, enter or select textValueVegaLogic.

19.

In the Property* field, enter value.

20.

In the Value field, enter "Success". This the value that populates the textValueVegaLogic  Text Field component.

21.

Set Should Overwrite to (checked).

22.

Click Save. The configured operation displays as the third row the Operations Builder list.

23.

Click Save Component.

Configure the Button component

Add a button to trigger the initExecuteVegaLogic  Initializer. When the button is clicked, the Initializer component fires its operations against the components in the Vega-enabled Panel component.

1.

Drag and drop a Button component onto the canvas, placing it above the initExecuteVegaLogic  Initializer component.

2.

In the 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 btnExecuteVegaLogic.

3.

In the Label Text field, enter Execute Vega Logic.

4.

Navigate to the Actions settings.

5.

Set Action Type to Event.

6.

In the On Click field, enter or select initExecuteVegaLogic.

7.

Click Save Component.

Preview your module in Express View Includes the Short Answer component, Long Answer component, Select Boxes, Radio component, Dropdown, Number component and Single Checkbox.. Click the Execute Vega Logic button to see the following:

Analyzing Runtime Operations

Using the example above, lets look at how the Initializer operations execute in the runtime using the Dev Tools Console Includes the Short Answer component, Long Answer component, Select Boxes, Radio component, Dropdown, Number component and Single Checkbox.:

Runtime Operations are only visible in non-production environments.

1.

While 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., right-click on the page and click Inspect. The DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. displays.

2.

(Optional) In the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software., set the tab to Console.

3.

Click the Execute Vega Logic button.

Triggering Centauri Logic in a Vega-Enabled Panel Component

For Creators using Cross-Runtime Support Event Mapping, view our Cross-Runtime Support How To: Trigger Centauri Logic using the Event Mapping Table article.

To trigger Centauri logic from a Vega-enabled panel, use an Initializer component and the vegaOperation output execute the Execute External Command operation type. For example, when a Button component in a Vega-enabled Panel component is clicked, it reveals a hidden Centauri Text Field component.

For this example, use a Vega Button component in a Vega-enabled Panel component to reveal a  Centauri Text Field component:

What You Need

To configure the Centauri module, you need the following components:

• 1 Panel component
• 2 Initializer Components
• 1 Button component

4.

Set Event Mapping to (ON).

• 1 Text Field component

Configure the Panel Component

Configure a Panel component to use the Vega runtime. You'll also use the Event Mapping table to make a Vega Button component trigger the Centauri ruleShow Decisions component.

1.

In the Module Builder, drag and drop a Panel 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. and Label Text fields, enter panelVega.

3.

Under Runtime, set Render components with to Vega (2.0).

4.

Click Save Component.

Configure the First Initializer Component

1.

Drag and drop a  Initializer component onto the canvas, placing it inside the panelVega Panel 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 initVegaUserName.

3.

In the Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . field, enter initVegaUserName.

4.

From the component settings menu, select Actions

5.

In the Outputs table, enter the following:

Configure the Initializer Component's Operations

Now that the Initializer component's Operations Builderis enabled, build an operation that triggers a Centauri Initializer. Later, we'll configure the Centauri Initializer to reveal a hidden Text Field component.

From the initVegaUserName  Initializer component's configuration settings:

1.

In the Outputs table, click Operations Builder. The Operations Builder modal displays.

2.

In the Operations Builder, click + Add Operation

3.

From the Operation Type drop-down, enter or select Execute External Command.

4.

In the Command* field, enter or select Trigger.

5.

In the Target Key* field, enter initShowUserName.

6.

Click Save. The configured operation displays in the Operations Builder list.

7.

Click Save Component.

Configure the Button Component

Configure a Button component to trigger the initVegaUserName  Initializer.

1.

Drag and drop a Button component onto the canvas, placing it inside the panelVega Panel component, below the initVegaUserName  Initializer 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 btnAddUserName.

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

4.

Navigate to the Actions settings.

5.

The Action Type to Event.

6.

In the On Click field, enter or select initVegaUserName.

7.

Click Save Component.

Configure the Second Initializer Component

1.

Drag and drop a  Initializer component onto the canvas, placing it below the panelVega Panel 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 initShowUserName.

3.

In the Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . field, enter initShowUserName.

4.

From the component settings menu, select Actions.

5.

In the Outputs table, enter the following:

6.

Click Save Component.

Configure the Text Field Component

Add a Text Field component to capture an end-user's 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. last name. Hide the Text Field component using the Hide Field setting. Later, we'll configure a Decisions component to make it visible.

1.

Drag and drop a  Text Field component onto the canvas, placing it below the initShowUserName  Initializer.

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

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 Enter your User name:.

4.

Set the Hide Field toggle to (ON).

5.

Click Save Component.

Preview your module 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.. You'll see the following functionality: