How To: Use Cross-Runtime Support Event Mapping Table

Overview

The Cross-Runtime Support Event Mapping table enables Creators to trigger 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. logic using a Vega-enabled Panel component. After enabling CRS Cross-Runtime Support (CRS) enables Creators to use the Vega (2.0) runtime in their Centauri (1.0) applications., Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. use the Event Mapping table to specify what 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. 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 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.

In the Module Builder, drag and drop a  Text Field 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 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 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter ruleShow.

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

4.

In the Outputs table, enter the following:

5.

Under the Conditionals table, click New Row.

6.

In the Conditionals table, enter the following:

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

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

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

The Cross-Runtime Support Event Mapping table enables Creators to trigger 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. logic using a Vega-enabled Panel component. After enabling CRS Cross-Runtime Support (CRS) enables Creators to use the Vega (2.0) runtime in their Centauri (1.0) applications., Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. use the Event Mapping table to specify what 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. 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 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, you'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 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 Enter your last name:.

4.

Set the Hide Field toggle to (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  Decisions component onto the canvas, placing it below the lastName  Text Field 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 ruleShow.

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

4.

In the OUTPUTS table, enter the following:

5.

In the MICRO DECISIONS table, enter the following:

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

1.

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

3.

From the component settings menu, select Runtime.

4.

Set Render Components with: to Vega (2.0).

5.

In the Event Mapping table, enter the following:

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

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

4.

From the component settings menu, select Actions

5.

Set the Action Type to Event.

6.

Click Save & Close.

7.

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: