How To: Use Cross-Runtime Support Event Mapping Table

Overview                                                

The Cross-Runtime Support Event Mapping table enables Creators to trigger Centauri logic using a Vega-enabled 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.

Using the Event Mapping table might reduce application performance. Consider using the direct execute method detailed in our How to: Cross-Runtime Support article.

Triggering Centauri Logic in a Vega-Enabled Panel Component

A Vega-enabled Panel 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 component is clicked, it reveals a hidden Centauri Text Field 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

• 1 Decisions component

• 1 Panel component

• 1 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 Text 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 (ON).

5. Click Save Component.

Configure the Decisions Component

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

1. Drag and drop a Decisions component onto the canvas, placing it below the lastName Text 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 Decisions component.

1. Drag and drop a Panel component onto the canvas, placing it below the ruleShow Decisions 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 (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

   You'll set up the btnShow Button component in the following steps.

7. Click Save Component.

Configure the Button Component

Configure a Button component to use the EventAction Type. When the end-user clicks the button, the panelVega Panel component looks for the onclick event and  triggers the ruleShow Decisions component.

1. Drag and drop a Button component onto the canvas, placing it inside the panelVega Panel 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: