There are three ways to pass data from Omniscript to the custom LWC
Prerequisite:
In the custom LWC that needs to interact with the Omniscript,
Import the ‘OmniscriptBaseMixin’ component from “namespace/OmniscriptBaseMixin”. Use the namespace of your Omnistudio package in place of ‘namespace’.
import { OmniscriptBaseMixin } from "omnistudio/omniscriptBaseMixin";Extend the ‘OmniscriptBaseMixin’ component.
export default class CustomLWCInteractWithOS extends OmniscriptBaseMixin(LightningElement) Method 1:
Pass data from Omniscript to your custom LWC using the ‘Property Name’ and ‘Property Source’ fields under the ‘Custom Lightning Web Component properties’ section.
Property source - is the source data you want to send to your custom LWC.
Property Name - contains the name of the property that has to be referenced in your custom LWC using the ‘api’ decorator.
Receive the data in the connectedCallback() method and do any manipulation with the data based on your requirements.
In the below example, the data from the Omniscript is displayed in the lightning-datatable in the custom LWC.
NOTE:
While passing properties from the Omniscript to the custom LWC, ensure the property names are always in lowercase letters. Use property names in any of the below formats,
A single word with all lowercase letters (for example: records)
For names with multiple words, a hyphen has to be added before each capital letter (for example: property name = “record-id”) and then this has to be accessed in the LWC as @api recordId.
Remember, when you embed the custom LWC in an Omniscript step, you can only access the data from the previous step in the LWC.
Method 2:
Access the required Omniscript data using the ‘omniJsonData’ object.
Use the format “this.omniJsonData.node” where ‘node’ is the data you want to access from the Omniscript Data JSON.
For example, the ‘Contact’ array from the above Omniscript data is accessed using “this.omniJsonData.Contact”.
NOTE:
Remember, you can only access the data from any actions (for example: Data Raptor Extract action or the Set Values action, and so on) that fired before the current omniscript step in which your custom LWC is embedded.
Method 3:
Use the Pub/Sub property in the Messaging Framework of the Omniscript to send data from the OmniScript Actions and Steps to other LWCs.
Prerequisites:
In the custom LWC that needs data from the Omniscript step or action, import the pubsub module.
Here, ‘omnistudio’ refers to the namespace of the installed package.
To pass data from the Omniscript step or action, check the Pub/Sub checkbox in the Messaging Framework section of the step or action properties.
Now enter the data to be passed in the Key-Value pair. Key represents the node that can be accessed from the LWC, and Value represents the data you want to pass from the Omniscript step or action to the LWC.
Pub/Sub property in Omniscript Step:
Here ‘CallerType’ is the key that contains the data to be passed from the Omniscript
step using the pub-sub messaging framework.
Now in the custom LWC, register for the pub/sub event in the renderedCallback() method by using ‘omniscript_step’ and add a handler method to handle the event when it occurs.
In the above example, the data received from the pub/sub event is set to a property in the custom LWC and displayed in the UI.
The key ‘CallerType’ sent from the Omniscript step can be accessed from the data object’s property as ‘data.CallerType’.
The ‘data’ object holds information related to the omniscript and its step, so in case you need to add specific logic for each omniscript step in your custom LWC, use “data.name” to uniquely identify the step name and then handle events from the steps accordingly.
Consider the below example (PFA screenshot below):
When the first step loads, the handler ‘handleOmniFirstStepLoadData’ appends the text ‘Welcome’ to the name received from the step’s pub-sub event and displays it in the UI.
When the second step loads, the handler ‘handleOmniSecondStepLoadData’ subtracts the expense amount (received from the step’s pub-sub event) from the total income and displays the remaining amount as a "savings’ amount in the UI.
NOTE:
With this approach, the pub-sub event can be used to send data only when the omniscript step loads and not for any changes made after the step is loaded.
Pub/Sub property in Omniscript action:
Here ‘Sum’ is the key that contains the data to be passed from the Omniscript ‘Set Values’ action using the pub-sub messaging framework.
Now in the custom LWC, register for the pub/sub event in the renderedCallback() method by using ‘omniscript_action’ and add a handler method to handle the event when it occurs.
In the above example, the data received from the pub/sub event is set to a property in the custom LWC and displayed in the UI.
The key ‘Sum’ sent from the Omniscript action can be accessed from the data object’s property as ‘data.Sum’.
The below example (PFA screenshot below) shows how to add different logic for different actions in the custom LWC.
Use ‘data.name’ to identify the specific action, and then add the appropriate logic based on the action.
The handler ‘handleAction1’ displays the sum received from the first action’s pub-sub event.
The handler ‘handleAction2’ sets the value of a boolean property to show or hide a section based on the data received from the second action’s pub-sub event.
References: