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

Overview

Cross-Runtime Support allows Centauri The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications.  modules to trigger Triggers activate another component when certain requirements are met. Trigger types include Concurrent, Post, and Error. Some components do not have the ability to trigger others. or send values to Vega 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. 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 containing Vega 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

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.

What You Need

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

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 Radio Button component icon 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:
  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 Radio Button component icon 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:

#

Source

Type

Value

1

panelVega.initShowLastName

vegaExecute

GO

4. Click Save Component.

Configure the Centauri Button

1. Drag and drop a Button component Icon 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, 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.

What You Need

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

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 Radio Button component icon 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:

#

Source

Type

Value

1

panelVega.firstName

vegaValue

Unqork

4. Click Save Component.

Configure the Centauri Button

1. Drag and drop a Button component Icon 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.

What You Need

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

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 icon 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 Radio Button component icon 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 Icon Button component onto the canvas, placing it inside the panelVega Panel component, below the initVegaUserName Radio Button component icon 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.

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  Radio Button component icon 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 Radio Button component icon 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:
  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 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 Radio Button component icon 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:

 

Overview

Cross-Runtime Support allows Centauri The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications.  modules to trigger Triggers activate another component when certain requirements are met. Trigger types include Concurrent, Post, and Error. Some components do not have the ability to trigger others. or send values to Vega 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. 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 using a Vega-enabled Panel 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 containing Vega 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

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  Inline image displaying a selected radio button. 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 Radio Button component icon 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:
  Source Type Value

1

lastName

visible

yes

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 Radio Button component icon 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:
  Source Type Value

1

panelVega.initShowLastName

vegaExecute

GO

4. Click Save & Close.

Configure the Centauri Button

1. Drag and drop a Button component Icon 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 Radio Button component icon 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:
  Source Type Value

1

panelVega.firstName

vegaValue

Unqork

4. Click Save & Close.

Configure the Centauri Button

1. Drag and drop a Button component Icon 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:

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.

Configure the Vega Panel Component

Configure a Panel component to use the Vega runtime.

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. From the component settings menu, select Runtime.
4. Set Render components with: to  Inline image displaying a selected radio button. Vega (2.0).
5. Click Save & Close.

Configure the Vega Button Component

Configure a Button component to trigger the initVegaUserName Radio Button component icon Initializer. When end-users click the button, the hidden Text Field is revealed.

1. Drag and drop a Button component Icon Button component onto the canvas, placing it inside the panelVega Panel component, below the initVegaUserName Radio Button component icon 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. From the component settings menu, select Actions.
5. 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 Buildermodal A modal is a window that appears on top of the content you are currently viewing. displays.
9. In the Operations Builder, click + Add Operation
10. From the Operation Type drop-down, enter or select Execute External Command.
11. In the Command* field, enter or select Trigger.
12. In the Target Key* field, enter initShowUserName.

You'll configure the initShowUserName  Radio Button component icon Initializer in a later step.

A static image displaying the Operations Builder modal. The Operation Type and Target field keys are highlighted.

13. Click Save. The configured operation displays in the Operations Builder list.
14. Click Save & Close.

Configure the Centauri Initializer Component

Configure an Initializer component to reveal the hidden Text Field component. The EXECUTE_EXTERNAL_COMMAND operation triggers this component.

1. Drag and drop a Radio Button component icon 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:
  Property ID Type Value

1

userName

visible

yes

6. Click Save & Close.

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. user name. Hide the Text Field component using the Hide Field setting.

1. Drag and drop a  Text Field component onto the canvas, placing it below the initShowUserName Radio Button component icon 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 & Close.

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:

Best Practices

  • Only use the vegaExecute and vegaValue output types in Centauri logic components to interact with components in a Vega-enabled Panel component.

  • Only use the Execute External Command operation in a Vega-enabled Panel component to communicate with Centauri components.

Resource