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

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter lastName.

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 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text fields, enter initShowLastName.

3.

In the Outputs table, enter the following:

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and 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 . fields, enter initCentauriShowLastName.

3.

In the Outputs table, enter the following:

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnCentauriShowLastName.

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 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 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.. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter firstName.

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 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and 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 . fields, enter initCentauriAddFirstName.

3.

In the Outputs table, enter the following:

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnCentauriAddName.

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 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 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.. 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 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 Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 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.

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

5.

Set the Action Type to Event.

6.

Next to Events & Operations, click Edit.

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.

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

In the Outputs table, enter the following:

5.

Click Save Component.

Configure the Centauri 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 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 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.. You'll see the following functionality:

Triggering a Vega Component in a Centauri Module

Trigger Vega components using Centauri logic components, like the Initializer, Plug-In, Decisions, and Calculator.

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.

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter panelVega.

3.

From the component settings menu, select Runtime.

4.

Set Render components with: to   Vega (2.0).

5.

Click Save & Close.

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter lastName.

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

4.

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

5.

Click Save & Close.

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text fields, enter initShowLastName.

3.

In the Outputs table, enter the following:

4.

Click Save & Close.

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text fields, enter initCentauriShowLastName.

3.

In the Outputs table, enter the following:

4.

Click Save & Close.

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnCentauriShowLastName.

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 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 & Close.

8.

Save your module.

Preview your module in 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.. 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, Plug-In, Decisions, and Calculator 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.

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter panelVega.

3.

Navigate to the Runtime settings.

4.

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

5.

Click Save & Close.

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter firstName.

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

4.

Click Save & Close.

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text fields, enter initCentauriAddFirstName.

3.

In the Outputs table, enter the following:

4.

Click Save & Close.

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnCentauriAddName.

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 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 & Close.

8.

Save your module.

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