How to: Use Cross-Runtime Support
Overview
Cross-Runtime Support enables Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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.
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.
The following methods are available to optimize your Centauri application with Vega:
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 Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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:
Configure the Initializer Component
1. | In the Module Builder, drag and drop an Initializer 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 initPanel. |
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 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter plugRefreshPanel. |
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 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter panelDynamicRefresh. |
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 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.
Triggering Logic Across Runtimes
You can trigger Vega logic in a Centauri application by using the VEGA_OPERATION type in a Centauri logic component's Outputs table Enter outputs components and actions you want the component to perform.. You can also trigger Centauri logic from a Vega-enabled Panel component using the Event Mapping table.
Triggering Vega Logic in a Centauri Module
Centauri can trigger Vega runtime operations using Centauri logic components, like the Initializer, Plug-In, Decisions, and Calculator components. For example, you could use a Centauri Initializer component to initiate logic in a Vega-enabled Panel component.
For this example, use Centauri Button and Initializer components to trigger Vega logic inside of a Vega-enabled Panel component.
What You Need
To configure the Centauri module, you need the following components:
- 1 Panel component
- 3 Text Field components
- 1 Decisions component
- 2 Initializer components
- 1 Button component
Configure the Panel component
For this example, enable the Vega runtime in a Panel component:
1. | In the Module Builder, drag and drop a Panel component onto the canvas. |
2. | In the 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 panelVegaLogic. |
3. | Navigate to the Runtime settings. |
4. | Set the Render Components with drop-down to Vega (2.0). |
5. | Click Save Component. |
Configure the Text Field Components
Add three Text Field components to the canvas. Later, we'll create operations that populate these fields with Success values.
1. | Drag and drop three Text Field components onto the canvas, placing each one inside the panelVegaLogic Panel component. |
Component | Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. | Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. |
---|---|---|
Text Field#1 |
textInitVegaLogic |
Execute by Initializer |
Text Field#2 |
textDecisionsVegaLogic |
Execute by Decisions |
Text Field#3 |
textValueVegaLogic |
Set Property Value |
3. | Click Save Component for each component as you complete it. |
Configure the First Initializer Component
Add an Initializer component to the Vega-enabled Panel component. Later, you'll set up another Initializer component that triggers this first one using the Execute Vega operation.
1. | Drag and drop a Initializer component onto the canvas, placing it above the textInitVegaLogic Text Field component, inside the panelVegaLogic 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 initWhenExecute. |
4. | In the Outputs table, enter the following: |
Source | Type | Value | |
---|---|---|---|
1 |
textInitVegaLogic |
value |
Success |
5. | Click Save Component. |
Configure the Decisions Component
Like the Initializer component above, set up the Decisions component to be executed by a Execute Vega operation.
1. | Drag and drop a Decisions component onto the canvas, placing it above the textDecisionsVegaLogic Text Field component, inside the panelVegaLogic 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 ruleWhenExecute. |
4. | In the Outputs table, enter the following: |
Source | Type | |
---|---|---|
1 |
textDecisionsVegaLogic |
value |
5. | In the Conditionals table, enter the following: |
textDecisionsVegaLogic_value | |
---|---|
1 |
Success |
6. | Click Save Component. |
Configure the Second Initializer Component
The second Initializer component uses the Vega Operations Builder in its Outputs table to perform operations on components inside the Vega-enabled Panel component. This Initializer component is configured in the Centauri runtime.
1. | Drag and drop a Initializer component onto the canvas, placing it above the panelVegaLogic 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 initExecuteVegaLogic. |
4. | From the component settings menu, select Actions |
5. | In the Outputs table, enter the following: |
Property ID | Type | Value | |
---|---|---|---|
1 |
panelVegaLogic |
vegaOperation |
Operations Builder |
The Operations Builder button displays after entering the vegaOperation type into the Outputs table.
Configure the Initializer Component's Operations
Now that the Initializer component has the Operations Builder enabled, build three operations that will populate the textInitVegaLogic, textDecisionsVegaLogic, and textValueVegaLogic Text Field components with a value.
From the initExecuteVegaLogic Initializer component's configuration settings:
1. | In the Outputs table, click Operations Builder. The Operations Builder modal displays. |
2. | From the Operation Type drop-down, enter or select Execute. |
3. | Click + Add Operation. The Operations Builder populates with the Execute operation fields. |
4. | In the Target Key* field, enter initWhenExecute. |
5. | In the Signal Target field, enter root. |
6. | Set Should Execute to (checked). |
7. | Set Block Execution to (checked). |
8. | Click Save. The configured operation displays in the Operations Builder list. |
9. | From the Operation Type drop-down, enter or select Execute. The Operations Builder populates with the Execute operation fields. |
10. | Click + Add Operation. |
11. | In the Target Key* field, enter or select ruleWhenExecute. |
12. | In the Signal Target field, enter root. |
13. | Set Should Execute to (checked). |
14. | Set Block Execution to (checked). |
15. | Click Save. The configured operation displays as the second row the Operations Builder list. |
16. | From the Operation Type drop-down, enter or select Set Property. The Operations Builder populates with the Set Property operation fields. |
17. | Click + Add Operation. |
18. | In the Target Key* field, enter or select textValueVegaLogic. |
19. | In the Property* field, enter value. |
20. | In the Value field, enter "Success". This the value that populates the textValueVegaLogic Text Field component. |
21. | Set Should Overwrite to (checked). |
22. | Click Save. The configured operation displays as the third row the Operations Builder list. |
The initExecuteVegaLogic Initializer component's Operations Builder list looks like the following:
23. | Click Save Component. |
Configure the Button component
Add a button to trigger the initExecuteVegaLogic Initializer. When the button is clicked, the Initializer component fires its operations against the components in the Vega-enabled Panel component.
1. | Drag and drop a Button component onto the canvas, placing it above the initExecuteVegaLogic Initializer component. |
2. | In the 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 btnExecuteVegaLogic. |
3. | In the Label Text field, enter Execute Vega Logic. |
4. | Navigate to the Actions settings. |
5. | Set Action Type to Event. |
6. | In the On Click field, enter or select initExecuteVegaLogic. |
7. | Click Save Component. |
Preview your module in Express View Includes the Short Answer component, Long Answer component, Select Boxes, Radio component, Dropdown, Number component and Single Checkbox.. Click the Execute Vega Logic button to see the following:
Analyzing Runtime Operations
Using the example above, lets look at how the Initializer operations execute in the runtime using the Dev Tools Console Includes the Short Answer component, Long Answer component, Select Boxes, Radio component, Dropdown, Number component and Single Checkbox.:
Runtime Operations are only visible in non-production environments.
2. | (Optional) In the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software., set the tab to Console. |
3. | Click the Execute Vega Logic button. |
The Console displays each Vega operation as shown:
Triggering Centauri Logic in a Vega-Enabled Panel Component
For Creators using Cross-Runtime Support Event Mapping, view our Cross-Runtime Support How To: Trigger Centauri Logic using the Event Mapping Table article.
To trigger Centauri logic from a Vega-enabled panel, use an Initializer component and the vegaOperation output execute the Execute External Command operation type. For example, when a Button component in a Vega-enabled Panel 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 Panel component
- 2 Initializer Components
- 1 Button component
- 1 Text Field component
4. | Set Event Mapping to (ON). |
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. | In the Module Builder, drag and drop a Panel 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. and Label Text fields, enter panelVega. |
3. | Under Runtime, set Render components with to Vega (2.0). |
4. | Click Save Component. |
Configure the First Initializer Component
1. | Drag and drop a Initializer 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 initVegaUserName. |
4. | From the component settings menu, select Actions |
5. | In the Outputs table, enter the following: |
Property ID | Type | Value | |
---|---|---|---|
1 |
panelVegaLogic |
vegaOperation |
Operations Builder |
The Operations Builder button displays after entering the vegaOperation type into the Outputs table.
Configure the Initializer Component's Operations
Now that the Initializer component's Operations Builderis enabled, build an operation that triggers a Centauri Initializer. Later, we'll configure the Centauri Initializer to reveal a hidden Text Field component.
From the initVegaUserName Initializer component's configuration settings:
1. | In the Outputs table, click Operations Builder. The Operations Builder modal displays. |
2. | In the Operations Builder, click + Add Operation |
3. | From the Operation Type drop-down, enter or select Execute External Command. |
4. | In the Command* field, enter or select Trigger. |
5. | In the Target Key* field, enter initShowUserName. |
You'll configure the initShowUserName Initializer in a later step.
6. | Click Save. The configured operation displays in the Operations Builder list. |
7. | Click Save Component. |
Configure the Button Component
Configure a Button component to trigger the initVegaUserName Initializer.
1. | Drag and drop a Button component onto the canvas, placing it inside the panelVega Panel component, below the initVegaUserName Initializer 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 btnAddUserName. |
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 Add User Name. |
4. | Navigate to the Actions settings. |
5. | The Action Type to Event. |
6. | In the On Click field, enter or select initVegaUserName. |
7. | Click Save Component. |
Configure the Second Initializer Component
1. | Drag and drop a Initializer component onto the canvas, placing it below 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 initShowUserName. |
4. | From the component settings menu, select Actions. |
5. | In the Outputs table, enter the following: |
Property ID | Type | Value | |
---|---|---|---|
1 |
userName |
visible |
yes |
6. | Click Save 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. | Drag and drop a Text Field component onto the canvas, placing it below the initShowUserName Initializer. |
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 userName. |
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 User name:. |
4. | Set the Hide Field toggle to (ON). |
5. | Click Save Component. |
Preview your module in Express View Express View is how your end-user views you 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
Cross-Runtime Support enables Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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.
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.
Centauri modules and components cannot be imported into Vega modules.
The following methods are available to optimize your Centauri application with Vega:
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 Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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 Imported and Dynamic Content, set Runtime to Vega. |
3. | Click Save & Close. The Panel component on the canvas displays the VEGA badge. |
4. | From the Component Tray, add components that do not display the CENTAURI badge to the Panel component. |
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:
Configure the Initializer Component
1. | In the Module Builder, drag and drop an Initializer 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 initPanel. |
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 initPanel. |
4. | In the OUTPUTS table, enter the following: |
Property ID |
Type |
Value | |
---|---|---|---|
1 |
plugDynamicRefresh |
trigger |
GO |
You'll configure the plugDynamicRefresh Plug-In component in the following steps.
5. | Click Save & Close |
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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter plugRefreshPanel. |
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 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. | 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.
7. | Click Save & Close |
Configure the Panel Component
1. | Drag and drop a Panel 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 panelDynamicRefresh. |
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 panelDynamicRefresh. |
4. | Under Imported and Dynamic Content, set Runtime to Vega. |
5. | Set Enable Dynamic Refresh to (ON). |
6. | Click Save & Close. 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. | Under Imported and Dynamic Content, set Runtime to Vega. |
3. | Set Import Existing Module to (ON). The Import Module pane displays. |
4. | Under Module*, enter or select a module name or value. |
5. | Click Save & Close. The Panel component on the canvas displays the VEGA badge. |
The Panel component now imports a Vega module into your Centauri module.
Triggering Logic Across Runtimes
You can trigger Vega logic in a Centauri application by using the VEGA_OPERATION type in a Centauri logic component's Outputs table Enter outputs components and actions you want the component to perform.. You can also trigger Centauri logic from a Vega-enabled Panel component using the Event Mapping table.
Triggering Vega Logic in a Centauri Module
Centauri can trigger Vega runtime operations using Centauri logic components, like the Initializer, Plug-In, Decisions, and Calculator components. For example, you could use a Centauri Initializer component to initiate logic in a Vega-enabled Panel component.
For this example, use Centauri Button and Initializer components to trigger Vega logic inside of a Vega-enabled Panel component.
What You Need
To configure the Centauri module, you need the following components:
- 1 Panel component
- 3 Text Field components
- 1 Decisions component
- 2 Initializer components
- 1 Button component
Configure the Panel component
For this example, enable the Vega runtime in a Panel component:
1. | In the Module Builder, drag and drop a Panel 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 panelVegaLogic. |
3. | From the component settings menu, select Runtime |
4. | Set Render Components with: to Vega (2.0). |
5. | Click Save & Close. |
Configure the Text Field Components
Add three Text Field components to the canvas. Later, we'll create operations that populate these fields with Success values.
1. | Drag and drop three Text Field components onto the canvas, placing each one inside the panelVegaLogic Panel component. |
Component | Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. | Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. |
---|---|---|
Text Field #1 |
textInitVegaLogic |
Execute by Initializer |
Text Field #2 |
textDecisionsVegaLogic |
Execute by Decisions |
Text Field #3 |
textValueVegaLogic |
Set Property Value |
3. | Save & Close each component as you complete it. |
Configure the First Initializer Component
Add an Initializer component into the Vega-enabled Panel component. Later, you'll set up another Initializer component to trigger this first one using the Execute Vega operation.
1. | Drag and drop a Initializer component onto the canvas, placing it above the textInitVegaLogic Text Field component, inside the panelVegaLogic 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 initWhenExecute. |
4. | From the component settings menu, select Actions |
5. | In the Outputs table, enter the following: |
Property ID | Type | Value | |
---|---|---|---|
1 |
textInitVegaLogic |
value |
Success |
6. | Click Save & Close. |
Configure the Decisions Component
Like the Initializer component above, set up the Decisions component to be executed by a Execute Vega operation.
1. | Drag and drop a Decisions component onto the canvas, placing it above the textDecisionsVegaLogic Text Field component, inside the panelVegaLogic 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 ruleWhenExecute. |
4. | In the OUTPUTS table, enter the following: |
Property ID | Type | Value | |
---|---|---|---|
1 |
textDecisionsVegaLogic |
value |
Success |
5. | In the MICRO DECISIONS table, enter the following |
Output Values |
---|
textDecisionsVegaLogic_value |
Success |
6. | Click Save. |
Configure the Second Initializer Component
The second Initializer component uses the Vega Operations Builder in its Outputs table to perform operations on components inside the Vega-enabled Panel component. This Initializer component is configured in the Centauri runtime.
1. | Drag and drop a Initializer component onto the canvas, placing it above the panelVegaLogic 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 initExecuteVegaLogic. |
4. | From the component settings menu, select Actions |
5. | In the Outputs table, enter the following: |
Property ID | Type | Value | |
---|---|---|---|
1 |
panelVegaLogic |
vegaOperation |
Operations Builder |
The Operations Builder button displays after entering the vegaOperation type into the Outputs table.
Configure the Initializer Component's Operations
Now that the Initializer component has the Operations Builder enabled, build three operations that will populate the textInitVegaLogic, textDecisionsVegaLogic, and textValueVegaLogic Text Field components with a value.
From the initExecuteVegaLogic Initializer component's configuration settings:
1. | In the Outputs table, click Operations Builder. The Operations Builder modal A modal is a window that appears on top of the content you are currently viewing. displays. |
2. | Click + Add Operation. |
3. | From the Operation Type drop-down, enter or select Execute. The Operations Builder populates with the Execute operation fields. |
4. | In the Target Key* field, enter initWhenExecute. |
5. | Scroll to the bottom of the Operation pane and click Save Operation. The configured operation displays in the Operations Builder list. |
6. | Click + Add Operation. |
7. | From the Operation Type drop-down, enter or select Execute. The Operations Builder populates with the Execute operation fields. |
8. | In the Target Key* field, enter or select ruleWhenExecute. |
9. | Scroll to the bottom of the Operation pane and click Save Operation. The configured operation displays as the second row of the Operations Builder list. |
10. | Click + Add Operation. |
11. | From the Operation Type drop-down, enter or select Set Property. The Operations Builder populates with the Set Property operation fields. |
12. | In the Target Key* field, enter or select textValueVegaLogic. |
13. | In the Property* field, enter value. |
14. | In the Value field, enter "Success". This the value that populates in the textValueVegaLogic Text Field component. |
15. | Scroll to the bottom of the Operation pane and click Save Operation. The configured operation displays as the third row of the Operations Builder list. |
The initExecuteVegaLogic Initializer component's Operations Builder list looks like the following:
16. | Click Save & Close. |
Configure the Button component
Add a button to trigger the initExecuteVegaLogic Initializer component. When the button is clicked, the Initializer component fires its operations against the components in the Vega-enabled Panel component.
1. | Drag and drop a Button component onto the canvas, placing it above the initExecuteVegaLogic Initializer component. |
2. | In the 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 btnExecuteVegaLogic. |
3. | In the Label Text field, enter Execute Vega Logic. |
4. | From the component settings menu, select Actions |
5. | Set Action Type to Event. |
6. | In the On Click field, enter or select initExecuteVegaLogic. |
7. | Click Save & Close. |
Preview your module in Express View Includes the Short Answer component, Long Answer component, Select Boxes, Radio component, Dropdown, Number component and Single Checkbox.. Click the Execute Vega Logic button to see the following functionality:
Analyzing Runtime Operations
Using the example above, lets explore how the Initializer component operations execute in the runtime using the Dev Tools Console Includes the Short Answer component, Long Answer component, Select Boxes, Radio component, Dropdown, Number component and Single Checkbox.:
Runtime Operations are only visible in non-production environments.
2. | (Optional) In the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software., set the tab to Console. |
3. | Click the Execute Vega Logic button. |
The Console displays each Vega operation as shown:
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:
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: |
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 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: |
|
(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.
6. | Click Save & Close. |
Configure the Button Component
Configure a Button component to use the Event Action 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 you 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:
Best Practices
-
When possible, separate logic between runtimes to reduce configuration debugging and maintenance.
-
When you need to perform logic on component data from both runtimes, perform the logic in Centauri. Vega runtime data continously syncs with the Centauri runtime.
-
For existing applications, consider how much of the Vega runtime you want to implement. You can keep as much of your Centauri configuration as needed, or update your application to be Vega-First.
Resources