How to: Use Cross-Runtime Support

Overview                                                

Cross-Runtime Support enables Creators to easily adopt Unqork's new Vega runtime into their existing and future applications. With  Cross-Runtime Support, Creators can create mixed applications that seamlessly switch between Centauri and Vega modules, or use a Panel component to drag and drop, import, or dynamically-refresh  Vega components into  Centauri modules.

Learn how to trigger, or send values between runtimes, view our How to: Configure Triggers and Values Using Cross-Runtime Support article.

How to Use Cross-Runtime Support

There are several methods available for using Cross-Runtime Support. The first method is to build new modules in Vega. Cross-Runtime Support automatically switches between Centauri and Vega runtimes as needed. Other methods use the Panel component to add, import, or dynamically refresh the Vega runtime and components into a Centauri application.

You cannot import Centauri modules and components  into Vega modules.

Switch Between Runtimes by Module

Each module can run on a separate runtime. Cross-Runtime Support  automatically switches between Centauri and Vega modules when using the following module-to-module navigation methods:

• Using a Workflow Task node to switch between modules.

• Using the Output Type of page to update the URL with a new module ID.

• Manually updating the URL with a new module ID.

The Navigation component does not use Cross-Runtime Support as it switches between Panel components instead of modules.

Configure a Panel Component to Use Vega Components

In a Centauri module, enabling the Vega runtime in a Panel component lets you drag and drop Vega components into it. Use this method when you want to build new Vega-First configurations in your existing modules. In the image below, enabling the Vega runtime in a Panel component lets Creators add Vega components to their Centauri module.

To enable the Vega runtime in a Panel component:

1. In the Module Builder, drag and drop a Panel component onto the canvas.

2. Under Runtime, set Render Components with to Vega 2.0.

   

3. Click Save Component. The Panel component on the canvas displays the VEGA badge.

4. From the Components tray, drag and drop Vega components  into the Panel component on the canvas.

5. Save your module.

Configure a Panel Component to Dynamically Refresh in Vega Components

If you already have  Centauri and Vega configurations, you can add Vega components to your Centauri module by dynamically refreshing them into a Vega-enabled Panel component.

To learn more about Dynamic Refresh, view our Dynamic Refresh article.

What You Need

To begin, you need a Centauri module and a Vega module containing components.

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

• 1 Initializer component

• 1 Plug-In component

• 1 Panel component

Configure the Initializer Component

1. In the Module Builder, drag and drop an Initializer component onto the canvas.

2. In the Property ID field, enter initPanel.

3. In the Label Text field, enter initPanel.

4. Navigate to the Actions settings.

5. Set the Trigger Type to New Submission.

6. Next to Inputs & Outputs, click Edit.

7. In the Outputs table, enter the following:

   	Source	Type	Value
   1	plugRefreshPanel	trigger	GO

   You'll configure the plugRefreshPanel Plug-In component in the following steps.

8. Click Save Component

Configure the Plug-In Component

1. Drag and drop a Plug-In component onto your canvas, placing it below the initPanel Initializer component.

2. In the Property ID field, enter plugRefreshPanel.

3. In the Label Text field, enter plugRefreshPanel.

4. Under the Data panel, from the Internal Services drop-down, enter or select Get Module Components.

5. From the Module drop-down, enter or select the name of a Vega Module containing the components to import.

6. Navigate to the Actions settings.

7. Next to Inputs & Outputs, click Edit.

8. In the Outputs table, enter the following:

   Property ID	Mapping	Option	Header
   panelDynamicRefresh	trigger	GO	☐ (unchecked)

                                                                                                                

   You'll configure the panelDynamicRefresh Panel component in the following steps.

9. Click Save Component

Configure the Panel Component

1. Drag and drop a Panel component onto the canvas.

2. In the Property ID field, enter panelDynamicRefresh.

3. In the Label Text field, enter panelDynamicRefresh.

4. Set Enable Dynamic Refresh to (ON).

5. Under Runtime, set Render Components with to Vega 2.0.

6. Click Save Component. The Panel component on the canvas displays the VEGA badge.

Your Panel component now dynamically refreshes in Vega components from another module.

Configure a Panel Component to Import a Vega Module

Import a Vega module into your Centauri configuration using a Vega-enabled Panel component and the Module Import function.

To import a Vega module into a Panel component:

1. In the Module Builder, drag and drop a Panel component onto the canvas.

2. Set Import Existing Module to (ON). The Import Module pane displays.

3. Under Imported and Dynamic Content, from the Module drop-down, enter or select a module name or value.

4. Under Runtime, set the Render Components with drop-down to Vega (2.0).

5. Click Save Component. The Panel component on the canvas displays the VEGA badge.

   

The panelDynamicRefresh Panel component now imports a Vega module into your Centauri module.