OmniscriptBaseMixin Methods

• Enable a custom Lightning web component to interact with OmniScript by extending the OmniScriptBaseMixin component.

• The OmniScriptBaseMixin includes methods to update OmniScript's data JSON, pass parameters, navigate to the Next or Previous step, and more.

Extending the Component:

• To interact with the OmniScript the Custom LWC should import OmniscriptBaseMixin and the lightning web component is extending the OmniScriptBaseMixin component to wrap a Salesforce Lightning Element.

Get data from OS to Custom LWC:

• To get data available in the Omniscript to the custom LWC, use omniJsonDataStr in the connectedCallback method.

• The below example shows how to get the omniscript data JSON using omniJsonDataStr and storing it in the variable called omniJsonData.

Navigating to a Step:

Enable users to navigate to different steps in the OmniScript using these three methods:

1. omniNextStep(): Advances users to the Next Step in OmniScript.

2. omniPrevStep(): Takes users to the previous step in OmniScript.

3. omniNavigateTo(step): Takes users to a specific Step in OmniScript by passing an argument.

The argument passed into the function can be a number that refers to the Step's index in the OmniScript or a Step's Element name passed as a hardcoded string.

The index for the current step is accessible using the property omniScriptHeaderDef.asIndex.

The example here navigates to 2 steps back from the current step.

Note:

Auto advancing to a step more than one step ahead is not permitted.

Saving and Retrieving Custom Component Data:

1. When we fill data in a step on the custom LWC and move to the next step and come back to the same step then the data we entered is cleared and the entire form is empty as the custom LWC is relaunched.

2. To fetch the details that we have previously entered, OmniscriptBaseMixin provides us to save the data entered and bring the data.

3. Call the omniSaveState() method to save the data in disconnectedCallback.

Method: omniSaveState(input, key, usePubSub=false)

1. input: The data to be saved.

2. (optional) key: A string value that the obj parameter maps to as a key-value pair. If a key is not sent as a parameter, the key defaults to the name of the component

3. (optional) usePubSub: Set the boolean to true to store data for use in a pubsub pattern. For more information on pubsub patterns, seepubsub events. When left blank or set to false, the data is usable by events. For more information on events, see LWC Events. When omniSaveState is in a disconnectedCallback, usePubSub must be set to true to pass the event in the pubsub instead of event bubbling.

4. To fetch/retrieve the data we need to know the key we saved while disconnecting and use the method omniGetSaveState(key).

The below example shows the data is stored in state and the values are saved again to the respective input elements.

Send Data from Custom LWC to Omniscript:

1. Update the Custom LWC Element's Data - omniUpdateDataJson()

   1. The method omniUpdateDataJson() is used to send data into the custom LWC element in the data JSON of the Omniscript.

      1. In the example below we have an input element in the custom LWC. Using omniUpdateDataJson method we are storing what is entered in the input element into the custom LWC element’s JSON node in the OS.

      2. We can see that CustomLWC JSON node stores “data From Custom LWC” text.

2. Map Responses to the OmniScript's Data JSON - omniApplyCallResp()

a. The method omniApplyCallResp() is used to add or update the data into the Omniscript data JSON

In the above example, when the method is called the OS data JSON is added with a new node clickedButton with the value as true if clickedButton node is not present already. If the node is present already then the same node will be updated with the new value.

Note:

To make the custom Lightning web component compatible with Vlocity Lightning web components, you must set two metadata tags in your XML configuration file:

1. isExposed : <isExposed>true</isExposed>

2. runtimeNamespace: <runtimeNamespace>NS</runtimeNamespace>

   1. Replace the NS variable in the code example with the namespace of your Vlocity package. For example: <runtimeNamespace>vlocity_ins</runtimeNamespace>

References:

1. https://help.salesforce.com/s/articleView?id=sf.os_extend_the_omniscriptbasemixin_component.htm&type=5

2. https://help.salesforce.com/s/articleView?id=sf.os_map_responses_to_the_omniscript_s_data_json.htm&type=5