--- title: "How To: Use Cross-Runtime Support Event Mapping Table" slug: "how-to-use-cross-runtime-support-event-mapping-table" updated: 2025-09-26T01:03:59Z published: 2025-09-26T01:03:59Z canonical: "docs.unqork.io/how-to-use-cross-runtime-support-event-mapping-table" --- > ## 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: Use Cross-Runtime Support Event Mapping Table > [!NOTE] > The Event Mapping table is a limited feature and not widely available for use. To trigger Centauri logic from the Vega runtime, view our [How to: Use Cross-Runtime Support](/v1/docs/how-to-use-cross-runtime-support) article. UDesignerClassic Designer ## Overview The **Cross-Runtime Support** **Event Mapping** table enables Creators to trigger Centauri logic using a Vega-enabled [Panel component](/v1/docs/panel-component). After enabling CRS, Creators use the Event Mapping table to specify what Vega component and Vega events trigger Centauri logic components. For example, if logic from a Vega Table contained in a Vega-enabled Panel component must trigger logic in a Centauri-runtime module, you map the triggering Vega component, the Vega Event watching the Vega component, and the Centauri component to trigger. > [!WARNING] > Using the Event Mapping table might reduce application performance. Consider using the direct execute method detailed in our [How to: Cross-Runtime Support](/v1/docs/how-to-use-cross-runtime-support) article. ## Triggering Centauri Logic in a Vega-Enabled Panel Component A Vega-enabled [Panel](/v1/docs/panel-component) component uses the Event Mapping table to map Vega events to the Centauri runtime. Vega events include runtime specific operators, DOM events, or events from Vega components. For example, when a Vega [Button](/v1/docs/button-component) component is clicked, it reveals a hidden Centauri [Text Field](/v1/docs/text-field-component) 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 [Text Field component](/v1/docs/text-field-component) - 1 [Decisions component](/v1/docs/decisions-component) - 1 [Panel component](/v1/docs/panel-component) - 1 [Button component](/v1/docs/button-component) ##### Configure the 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. In the Module Builder, drag and drop a **T****ext Field** component onto the canvas. 2. In the Property ID field, enter **lastName**. 3. In the Label Text field, enter `Enter your last 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%3A53Z&se=2026-11-07T18%3A57%3A53Z&sr=c&sp=r&sig=PRs0MNCL%2BHrOaNPll6RCOx6ZUgeA%2FxdKQnvu32r9b6A%3D) **(ON)**. 5. Click **Save Component**. ##### Configure the Decisions Component Add a Decisions component that, when triggered, displays the **lastName** **T****ext Field** component. 1. Drag and drop a **D****ecisions** component onto the canvas, placing it below the **lastName** **T****ext Field** component. 2. In the Property ID field, enter **ruleShow**. 3. In the Label Text field, enter `ruleShow`. 4. In the **Outputs** table, enter the following: | | Source | Type | | --- | --- | --- | | 1 | lastName | visible | 5. Under the **Conditionals** table, click New Row. 6. In the **Conditionals** table, enter the following: | | lastName_visible | | --- | --- | | 1 | yes | 7. Click **Save 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** **D****ecisions** component. 1. Drag and drop a **P****anel** component onto the canvas, placing it below the **ruleShow** **D****ecisions** component. 2. In the Property ID field, enter **panelVega**. 3. Under **Runtime**, set **Render components with** to `Vega (2.0)`. 4. Set Event Mapping 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%3A53Z&se=2026-11-07T18%3A57%3A53Z&sr=c&sp=r&sig=PRs0MNCL%2BHrOaNPll6RCOx6ZUgeA%2FxdKQnvu32r9b6A%3D) **(ON)**. 5. Next to **Event Mapping**, click Edit. 6. In the **Event Mapping** table, enter the following: | # | (Vega) Event Scope | (Vega) Event Name | (Centauri) Logic Component to Trigger | | --- | --- | --- | --- | | 1 | btnShow | onclick | ruleShow | > [!NOTE] > You'll set up the **btnShow** **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(18).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A53Z&se=2026-11-07T18%3A57%3A53Z&sr=c&sp=r&sig=PRs0MNCL%2BHrOaNPll6RCOx6ZUgeA%2FxdKQnvu32r9b6A%3D) Button** component in the following steps. 7. Click **Save Component**. ##### Configure the Button Component Configure a Button component to use the `Event`**Action Type**. When the end-user clicks the button, the **panelVega** **P****anel** component looks for the onclick event and triggers the **ruleShow** **D****ecisions** component. 1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(18).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A53Z&se=2026-11-07T18%3A57%3A53Z&sr=c&sp=r&sig=PRs0MNCL%2BHrOaNPll6RCOx6ZUgeA%2FxdKQnvu32r9b6A%3D) Button** component onto the canvas, placing it inside the **panelVega** **P****anel** component. 2. In the Property ID field, enter **btnShow**. 3. In the Label Text field, enter `Enter Last Name`. 4. Navigate to the **Actions** settings. 5. The **Action Type** to `Event`. 6. Click **Save Component**. 7. **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/Cross-Runtime_Support_EventMappingExample.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A53Z&se=2026-11-07T18%3A57%3A53Z&sr=c&sp=r&sig=PRs0MNCL%2BHrOaNPll6RCOx6ZUgeA%2FxdKQnvu32r9b6A%3D) ## Overview The **Cross-Runtime Support** **Event Mapping** table enables Creators to trigger Centauri logic using a Vega-enabled [Panel component](/v1/docs/panel-component). After enabling CRS, Creators use the Event Mapping table to specify what Vega component and Vega events trigger Centauri logic components. For example, if logic from a Vega Table contained in a Vega-enabled Panel component must trigger logic in a Centauri-runtime module, you map the triggering Vega component, the Vega Event watching the Vega component, and the Centauri component to trigger. > [!WARNING] > Using the Event Mapping table might reduce application performance. Consider using the direct execute method detailed in our [How to: Cross-Runtime Support](/v1/docs/how-to-use-cross-runtime-support) article. ## Triggering Centauri Logic in a Vega-Enabled Panel Component A Vega-enabled [Panel](/v1/docs/panel-component) component uses the Event Mapping table to map Vega events to the Centauri runtime. Vega events include runtime specific operators, DOM events, or events from Vega components. For example, when a Vega [Button](/v1/docs/button-component) component is clicked, it reveals a hidden Centauri [Text Field](/v1/docs/text-field-component) 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 [Text Field component](/v1/docs/text-field-component) - 1 [Decisions component](/v1/docs/decisions-component) - 1 [Panel component](/v1/docs/panel-component) - 1 [Button component](/v1/docs/button-component) ##### Configure the 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, you'll configure a Decisions component to make it visible. 1. In the Module Builder, drag and drop a **T****ext Field** component onto the canvas. 2. In the Property ID field, enter **lastName**. 3. In the Label Text field, enter `Enter your last 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%3A53Z&se=2026-11-07T18%3A57%3A53Z&sr=c&sp=r&sig=PRs0MNCL%2BHrOaNPll6RCOx6ZUgeA%2FxdKQnvu32r9b6A%3D) **(ON)**. 5. Click **Save & Close**. ##### Configure the Decisions Component

Add a Decisions component that, when triggered, displays the lastName Text Field component.

 1. Drag and drop a **D****ecisions** component onto the canvas, placing it below the **lastName** **T****ext Field** component. 2. In the Property ID field, enter **ruleShow**. 3. In the Label Text field, enter `ruleShow`. 4. In the **OUTPUTS** table, enter the following: | Property ID | Type | | --- | --- | | lastName | visible | 5. In the **MICRO DECISIONS** table, enter the following: | Property ID | | --- | | lastName_visible | | yes | 6. Click **Save**. ##### 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** **D****ecisions** component. 1. Drag and drop a **P****anel** component onto the canvas, placing it below the **ruleShow** **D****ecisions** component. 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(16).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A53Z&se=2026-11-07T18%3A57%3A53Z&sr=c&sp=r&sig=PRs0MNCL%2BHrOaNPll6RCOx6ZUgeA%2FxdKQnvu32r9b6A%3D)**Vega (2.0)**. 5. In the **Event Mapping** table, enter the following: > [!NOTE] > You'll set up the **btnShow** **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(18).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A53Z&se=2026-11-07T18%3A57%3A53Z&sr=c&sp=r&sig=PRs0MNCL%2BHrOaNPll6RCOx6ZUgeA%2FxdKQnvu32r9b6A%3D) Button** component in the following steps. 6. Click **Save & Close**. ##### Configure the Button Component Configure a Button component to use the **EventAction Type**. When the end-user clicks the button, the **panelVega** **P****anel** component looks for the onclick event and triggers the **ruleShow** **D****ecisions** component. 1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(18).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A53Z&se=2026-11-07T18%3A57%3A53Z&sr=c&sp=r&sig=PRs0MNCL%2BHrOaNPll6RCOx6ZUgeA%2FxdKQnvu32r9b6A%3D) Button** component onto the canvas, placing it inside the **panelVega** **P****anel** component. 2. In the Property ID field, enter **btnShow**. 3. In the Label Text field, enter `Enter Last Name`. 4. From the component settings menu, select **A****ctions** 5. Set the **Action Type** to **Event**. 6. Click Save & Close. 7. **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/Cross-Runtime_Support_EventMappingExample.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A53Z&se=2026-11-07T18%3A57%3A53Z&sr=c&sp=r&sig=PRs0MNCL%2BHrOaNPll6RCOx6ZUgeA%2FxdKQnvu32r9b6A%3D) ## Best Practices - The Event Mapping table might reduce application performance. Consider using the direct execute method detailed in our [How to: Cross-Runtime Support](/v1/docs/how-to-use-cross-runtime-support) article. ## 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). - [How to: Configure Triggers and Values Using Cross-Runtime Support](/v1/docs/how-to-configure-triggers-and-values-using-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. Cross-Runtime Support (CRS) enables Creators to use the Vega (2.0) runtime in their Centauri (1.0) applications. Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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. 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 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. 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.