How to: Configure Triggers and Values Using Cross-Runtime Support

Overview

Cross-Runtime Support allows Centauri modules to trigger or send values to Vega-compatible components inside a Vega-enabled Panel component. Additionally, Vega components inside a Vega-enabled Panel can trigger Centauri logic using Cross-Runtime Support and the Operations Builder.

Set up Cross-Runtime Support in our How to: Use Cross-Runtime Support article.

There are three methods for triggering, or sending values to components between runtimes:

• Trigger a Vega Component in a Centauri module: Creators use a Centauri logic component and the vegaExecute Output type to execute (trigger) a Vega component inside a Vega-enabled Panel component.

• Send a Value to a Vega Component in a Centauri module: Creators use a Centauri logic component and the vegaValue Output type to send values from a Centauri module to a Vega-enabled Panel component containing Vega compatible components.

• Trigger or modify a Centauri components from a Vega-enabled Panel component : Creators use the Operations Builder's Execute External Command operation to trigger or send a value to a Centauri component.

Click on the tabs below to learn how to use each method.

Triggering a Vega Component in a Centauri Module

For this example, display a hidden Text Field component by configuring Centauri Button and Initializer components to trigger Vega logic inside of a Vega-enabled Panel component.

The Initializer and Decisions are the only components that trigger Cross-Runtime Support.

What You Need

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

• 1 Panel component

• 1 Text Field component

• 1 Initializer component

• 1 Button component

Configure the Vega 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 Property ID field, enter panelVega.

3. Navigate to the Runtime settings.

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

5. Click Save Component.

Configure the Vega Text Field

Add and configure a hidden Text Field. Later, we'll use the vega

1. Drag and drop a Text Field component on the canvas, placing it inside the panelVega Panel component.

2. In the Property ID field, enter lastName.

3. In the Label Text field, enter Last Name.

4. Under Default State Options, set Hide Field to (ON).

5. Click Save Component.

Configure the Vega Initializer

1. Drag and drop a Initializer component on the canvas, placing it above the lastName Text Field component and inside the panelVega Panel component.

2. In the Property ID and Canvas Label Text fields, enter initShowLastName.

3. In the Outputs table, enter the following:

   	Source	Type	Value
   1	lastName	visible	yes

4. Click Save Component.

Configure the Centauri Initializer

Setup an Initializer to target the Vega Initializer. Use dot notation to target the the Vega Initializer inside the Vega-enabled Panel component. You'll also use the vegaExecute operation to trigger the Vega Initializer:

1. Drag and drop a Initializer component on the canvas, placing it above the panelVega Panel component.

2. In the Property ID and Canvas Label Text fields, enter initCentauriShowLastName.

3. In the Outputs table, enter the following:

   #	Source	Type	Value
   1	panelVega.initShowLastName	vegaExecute	GO

4. Click Save Component.

Configure the Centauri Button

1. Drag and drop a Button component on the canvas, placing it below the panelVega Panel component.

2. In the Property ID field, enter btnCentauriShowLastName.

3. In the Label Text field, enter Display Last Name Field.

4. Navigate to the Actions settings.

5. From the Action Type drop-down, enter or select Event.

6. From the On Click field, enter or select initCentauriShowLastName.

7. Click Save Component.

8. Save your module.

Preview your module in Express View. You'll see the following functionality:

Sending a Value to a Vega Component in a Centauri module

Send values to Vega components using Centauri logic components, like the Initializer and Decisions components. For this example, add a value to a Text Field component by using Centauri Button and Initializer components to trigger Vega logic inside of a Vega-enabled Panel component.

The Initializer and Decisions are the only components that trigger Cross-Runtime Support.

What You Need

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

• 1 Panel component

• 1 Text Field component

• 2 Initializer components

• 1 Button component

Configure the Vega Panel component

Configure a Panel component to use the Vega runtime. This enables Cross-Runtime Support.

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

2. In the Property ID field, enter panelVega.

3. Navigate to the Runtime settings.

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

5. Click Save Component.

Configure the Vega Text Field

1. Drag and drop a Text Field component on the canvas, placing it inside the panelVega Panel component.

2. In the Property ID field, enter firstName.

3. In the Label Text field, enter FirstName.

4. Click Save Component.

Configure the Centauri Initializer

Setup an Initializer to target the Vega Initializer. Use dot notation to target the the Vega Initializer inside the Vega-enabled Panel component. You'll also use the vegaExecute operation to trigger the Vega Initializer:

1. Drag and drop a Initializer component on the canvas, placing it above the panelVega Panel component.

2. In the Property ID and Canvas Label Text fields, enter initCentauriAddFirstName.

3. In the Outputs table, enter the following:

   #	Source	Type	Value
   1	panelVega.firstName	vegaValue	Unqork

4. Click Save Component.

Configure the Centauri Button

1. Drag and drop a Button component on the canvas, placing it above the panelVega Panel component.

2. In the Property ID field, enter btnCentauriAddName.

3. In the Label Text field, enter Add First Name.

4. Navigate to the Actions settings.

5. From the Action Type drop-down, enter or select Event.

6. From the On Click field, enter or select initCentauriShowLastName.

7. Click Save Component.

8. Save your module.

Preview your module in Express View. You'll see the following functionality:

Triggering Centauri Logic from 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 vega_Operation 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.

The Initializer and Decisions are the only components that trigger Cross-Runtime Support.

What You Need

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

• 1 Panel component

• 2 Initializer Components

• 1 Button component

• 1 Text Field component

Configure the Vega 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 ruleShowDecisions component.

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

2. In the Property ID and Label Text fields, enter panelVega.

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

4. Click Save Component.

Set the Runtime to Vega

To configure the Button component using the Operations Builder, set the runtime to Vega (2.0). You'll change this setting back to Centauri (1.0) after configuring the Button component's operation.

1. In the Module Builder, from the Runtime Version: drop-down, select Vega (2.0).

2. Save your module.

Configure the Vega Button Component

Configure a Button component to trigger the Centauri initVegaUserName Initializer. uUsing the Operations Builder, you'll set up an onClick event with the Execute External Command operation. Later, we'll configure the Centauri Initializer to reveal a hidden Text Field component.

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 field, enter btnAddUserName.

3. In the Label Text field, enter Add User Name.

4. In the component's settings window, navigate to Actions.

5. Set the Action Type to Event.

6. Next to Events & Operations, click Edit.

   The Operations Builder tool displays.

7. From the Add Event* drop-down, enter or select On Click, then click Add.

8. Click + Add Operation.

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

10. In the Command* field, enter or select Trigger.

11. In the Target Key* field, enter initShowUserName.

    You'll configure the initShowUserName Initializer in a later step.

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

13. Click Save Component.

Set the Runtime to Centauri

Now that Button component's Event and Operation are set. Return the module back to the Centauri (1.0) runtime.

1. In the Module Builder, from the Runtime Version: drop-down, select Centauri (1.0).

2. Save your module.

Configure the Centauri Initializer Component

1. Drag and drop a Initializer component onto the canvas, placing it below the panelVega Panel component.

2. In the Property ID field, enter initShowUserName.

3. In the Canvas Label Text field, enter initShowUserName.

4. In the Outputs table, enter the following:

   	Property ID	Type	Value
   1	userName	visible	yes

5. Click Save Component.

Configure the Centauri Text Field Component

Add a Text Field component to capture an end-user's 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 field, enter userName.

3. In the Label Text field, enter Add User name:.

4. Set the Hide Field toggle to (ON).

5. Click Save Component.

6. Save your module.

Preview your module in Express View. You'll see the following functionality: