---
title: "How to: Configure Triggers and Values Using Cross-Runtime Support"
slug: "how-to-configure-triggers-and-values-using-cross-runtime-support"
updated: 2025-09-26T01:12:02Z
published: 2025-09-26T01:12:02Z
canonical: "docs.unqork.io/how-to-configure-triggers-and-values-using-cross-runtime-support"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

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

UDesignerClassic Designer

## Overview

Cross-Runtime Support allows Centauri modules to trigger or send values to Vega-compatible components inside a [Vega-enabled Panel component](/v1/docs/panel-component#UD_Runtime). Additionally, Vega components inside a Vega-enabled Panel can trigger Centauri logic using [Cross-Runtime Support](/v1/docs/introduction-to-cross-runtime-support) and the [Operations Builder](/v1/docs/operations-builder).

> Set up Cross-Runtime Support in our [How to: Use Cross-Runtime Support](/v1/docs/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](/v1/docs/text-field-component) component by configuring Centauri [Button](/v1/docs/button-component) and [Initializer](/v1/docs/initializer-component) components to trigger Vega logic inside of a [Vega-enabled Panel component](/v1/docs/panel-component#UD_Runtime).

> [!WARNING]
> The [Initializer](/v1/docs/initializer-component) and [Decisions](/v1/docs/decisions-component) 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](/v1/docs/panel-component)
- 1 [Text Field component](/v1/docs/text-field-component)
- 1 [Initializer component](/v1/docs/initializer-component)
- 1 [Button component](/v1/docs/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 **P****anel** 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 **T****ext Field** component on the canvas, placing it inside the **panelVega** **P****anel** 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 ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) **(ON)**.
5. Click **Save Component**.

### Configure the Vega Initializer

1. Drag and drop a **I****nitializer** component on the canvas, placing it above the **lastName** **T****ext Field** component and inside the **panelVega** **P****anel** 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 **I****nitializer** component on the canvas, placing it above the **panelVega** **P****anel** 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 Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(17).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) Button** component on the canvas, placing it below the **panelVega** **P****anel** 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: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS_Example_vegaExecute.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)

## Sending a Value to a Vega Component in a Centauri module

Send values to Vega components using Centauri logic components, like the [Initializer](/v1/docs/initializer-component) and [Decisions](/v1/docs/decisions-component) components. For this example, add a value to a Text Field component by using Centauri [Button](/v1/docs/button-component) and [Initializer](/v1/docs/initializer-component) components to trigger Vega logic inside of a Vega-enabled Panel component.

> [!WARNING]
> The [Initializer](/v1/docs/initializer-component) and [Decisions](/v1/docs/decisions-component) 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](/v1/docs/panel-component)
- 1 [Text Field component](/v1/docs/text-field-component)
- 2 [Initializer components](/v1/docs/initializer-component)
- 1 [Button component](/v1/docs/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 **P****anel** 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 **T****ext Field** component on the canvas, placing it inside the **panelVega** **P****anel** 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 **I****nitializer** component on the canvas, placing it above the **panelVega** **P****anel** 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 Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(17).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) Button** component on the canvas, placing it above the **panelVega** **P****anel** 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: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS_Example_vegaValue.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)

## Triggering Centauri Logic from a Vega-Enabled Panel Component

> [!TIP]
> For Creators using Cross-Runtime Support Event Mapping, view our [Cross-Runtime Support How To: Trigger Centauri Logic using the Event Mapping Table](/v1/docs/how-to-use-cross-runtime-support-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](/v1/docs/button-component) component in a Vega-enabled Panel component is clicked, it reveals a hidden Centauri [Text Field](/v1/docs/text-field-component) component.

> [!WARNING]
> The [Initializer](/v1/docs/initializer-component) and [Decisions](/v1/docs/decisions-component) 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](/v1/docs/panel-component)
- 2 [Initializer Components](/v1/docs/initializer-component)
- 1 [Button component](/v1/docs/button-component)
- 1 [Text Field component](/v1/docs/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****D****ecisions** component.

1. In the Module Builder, drag and drop a **P****anel** 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** **I****nitializer**. 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](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(17).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) Button** component onto the canvas, placing it inside the **panelVega** **P****anel** component, below the **initVegaUserName** **I****nitializer** 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`.

> [!NOTE]
> 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 **I****nitializer** component onto the canvas, placing it below the **panelVega** **P****anel** 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 **T****ext Field** component onto the canvas, placing it below the **initShowUserName** **I****nitializer**.
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 ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) **(ON)**.
5. Click **Save Component**.
6. **Save** your module.

**Preview** your module in Express View. You'll see the following functionality: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS_Vega2Centauri.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)

## Overview

Cross-Runtime Support allows Centauri modules to trigger or send values to Vega components inside a [Vega-enabled Panel component](/v1/docs/panel-component#UD_Runtime). Additionally, Vega components inside a Vega-enabled Panel can trigger Centauri logic using [Cross-Runtime Support](/v1/docs/introduction-to-cross-runtime-support) and the [Operations Builder](/v1/docs/operations-builder).

> Set up Cross-Runtime Support using a Vega-enabled Panel in our [How to: Use Cross-Runtime Support](/v1/docs/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](/v1/docs/initializer-component), [Plug-In](/v1/docs/plug-in-component), [Decisions](/v1/docs/decisions-component), and [Calculator](/v1/docs/calculator-component).

For this example, display a hidden Text Field component by configuring Centauri [Button](/v1/docs/button-component) and [Initializer](/v1/docs/initializer-component) components to trigger Vega logic inside of a [Vega-enabled Panel component](/v1/docs/panel-component#UD_Runtime).

### 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 **P****anel** component onto the canvas.
2. In the Property ID field, enter **panelVega**.
3. From the component settings menu, select **R****untime**.
4. Set **Render components with:** to **![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(15).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) 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 **T****ext Field** component on the canvas, placing it inside the **panelVega** **P****anel** 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 & Close**.

### Configure the Vega Initializer

1. Drag and drop a **I****nitializer** component on the canvas, placing it above the **lastName** **T****ext Field** component and inside the **panelVega** **P****anel** 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 & 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 **I****nitializer** component on the canvas, placing it above the **panelVega** **P****anel** 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 & Close**.

### Configure the Centauri Button

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(17).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) Button** component on the canvas, placing it below the **panelVega** **P****anel** 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 & Close**.
8. **Save** your module.

**Preview** your module in Express View. You'll see the following functionality: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS_Example_vegaExecute.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)

## Sending a Value to a Vega Component in a Centauri module

Send values to Vega components using Centauri logic components, like the [Initializer](/v1/docs/initializer-component), [Plug-In](/v1/docs/plug-in-component), [Decisions](/v1/docs/decisions-component), and [Calculator](/v1/docs/calculator-component) components. For this example, add a value to a Text Field component by using Centauri [Button](/v1/docs/button-component) and [Initializer](/v1/docs/initializer-component) 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 **P****anel** 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 & Close**.

### Configure the Vega Text Field

1. Drag and drop a **T****ext Field** component on the canvas, placing it inside the **panelVega** **P****anel** component.
2. In the Property ID field, enter **firstName**.
3. In the Label Text 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 **I****nitializer** component on the canvas, placing it above the **panelVega** **P****anel** 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 & Close**.

### Configure the Centauri Button

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(17).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) Button** component on the canvas, placing it above the **panelVega** **P****anel** 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 & Close**.
8. **Save** your module.

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

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS_Example_vegaValue.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)

## Triggering Centauri Logic from a Vega-Enabled Panel Component

> [!TIP]
> For Creators using Cross-Runtime Support Event Mapping, view our [Cross-Runtime Support How To: Trigger Centauri Logic using the Event Mapping Table](/v1/docs/how-to-use-cross-runtime-support-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](/v1/docs/button-component) component in a Vega-enabled Panel component is clicked, it reveals a hidden Centauri [Text Field](/v1/docs/text-field-component) component.

### Configure the Vega Panel Component

Configure a Panel component to use the Vega runtime.

1. In the Module Builder, drag and drop a **P****anel** component onto the canvas.
2. In the Property ID and **Label Text** fields, enter **panelVega**.
3. From the component settings menu, select **R****untime**.
4. Set **Render components with:** to **![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(15).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) Vega (2.0)**.
5. Click **Save & Close**.

### Configure the Vega Button Component

Configure a Button component to trigger the **initVegaUserName** **I****nitializer**. When end-users click the button, the hidden Text Field is revealed.

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(17).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) Button** component onto the canvas, placing it inside the **panelVega** **P****anel** component, below the **initVegaUserName** **I****nitializer** component.
2. In the Property ID field, enter **btnAddUserName**.
3. In the Label Text field, enter `Add User Name`.
4. From the component settings menu, select **A****ctions**.
5. The **Action Type** to `Event`.
6. Click **Save & Close**.
7. Hover over the **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(17).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) Button** component.

A 6-button toolbar displays above the component on hover-over.
8. Click the (Operations Builder) button. The Operations Builder modal 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`.

> [!NOTE]
> You'll configure the **initShowUserName** **Initializer** in a later step.

[![A static image displaying the Operations Builder modal. The Operation Type and Target field keys are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS_OperationExampleUD_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS%20OperationExampleUD.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)
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 **I****nitializer** component onto the canvas, placing it below the **panelVega** **P****anel** component.
2. In the Property ID field, enter **initShowUserName**.
3. In the Canvas Label Text field, enter `initShowUserName`.
4. From the component settings menu, select **A****ctions**.
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 user name. Hide the Text Field component using the **Hide Field** setting.

1. Drag and drop a **T****ext Field** component onto the canvas, placing it below the **initShowUserName** **I****nitializer**.
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 ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D) **(ON)**.
5. Click **Save & Close**.

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

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CRS_Vega2Centauri.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)

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

## Resources

- [Introduction to Cross-Runtime Support](/v1/docs/introduction-to-cross-runtime-support).
- [How to: Use Cross-Runtime Support](/v1/docs/how-to-use-cross-runtime-support).
- [Configuring the Panel component](/v1/docs/panel-component).
- [Debug Vega applications with Console Tools](/v1/docs/vega-console-tools).
- [Embed Vega applications into your existing user interface](/v1/docs/introduction-to-the-embedded-user-interface-ui).

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.

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.

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.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

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 .

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.

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.

A modal is a window that appears on top of the content you are currently viewing.