Learn how to add lwc components in an OmniScript and access the omniJsonData then use the data in a lightning-table component.
Where to start?
Prequisite is having VSCode with the Salesforce Extension Pack and sfdx CLI installed. Check this tutorial for how to setup.
First create a new LWC component to get the default file.
We need to do the following changes so we can use the LWC in our OmniScript.
- import the OmniscriptBaseMixin component – this enables the custom component to interact with the OmniScript
- extend the OmniScriptBaseMixin component
- set two metadata tags in the .xml configuration file
- runtimeNamespace – add the vlocity namespace eg. vlocity_ins.
- Tip: check the installed package namespace
- isExposed – set to true
- runtimeNamespace – add the vlocity namespace eg. vlocity_ins.
The LWC .js-meta.xml should look like this.
How to access OmniScript data in LWC?
We are going to build a dataTable so we need the columns, then we need to use the connectedCallback method to access the omniJsonData and use part of the array data for our table.
Update the LWC .js like so.
And update the LWC .html file to use the standard lightning-datatable component.
Refer to https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example for more information.
How to add the LWC to an OmniScript?
Finally let’s create a new OmniScript. Open the OmniStudio App and go to the OmniScript tab.
Click on New and fill in the details.
You’ll get a blank Step 1 screen by default.
Under Build search for Lightning Web Components, drag and drop the element to the canvas and assign the Lightning Web Component with the newly created custom LWC.
To set some array data we have numerous options, data can be derived from DataRaptors, Integration Procedures or Calculation Procedures. You can implement this on your own.
For this excercise I’m going to hard code some opportunity array data using the Set Values element. Drag and drop the Set Values element above the Step 1 screen in the canvas. At the SetValues properties scroll down at the bottom and choose Edit Properties as JSON. Copy and paste the details below. It contains the oppData with an array of Opportunity data.
Then Activate the OmniScript and preview the OmniScript. You should see the LWC render the table.
Hooray, hope you find this post useful. Code for the project is available at github here.
I’m working on an OmniStudio course, leave a comment below if you want to be notified once this is out.
Can we add a button in omniscript? and on click of that we need to take a variable in OS which will say button is clicked.
There is no button element in omniscript. you can create an LWC button and read off the omniJSONData like what is described on this post.
Absolutely amazing post! Thanks so much for sharing it with us!
You can add a button using Vlocity Action inside Flexcard which can be render your omniscript.
How to pass the output of an IP in omniscript to lwc to view the results?. Also tag is not working on XML file in lwc. I am not able to view the lwc in preview mode.