How to add custom LWC components in an OmniScript and access the omniJsonData

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

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.

3 thoughts on “How to add custom LWC components in an OmniScript and access the omniJsonData

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *