How to Pass Javascript Objects from LWC to the OmniScript Data JSON

On this tutorial we are going to learn how to pass Javascript objects from LWC to the OmniScript Data JSON. We are going to create a Javascript object in LWC and then pass that data to display in OmniScript.

Why pass data from LWC to OmniScript Data JSON?

Here are some use cases:

  • perform some client side logic to manipulate some data and pass that data to the OmniScript for it to render on the UI.
  • perform some client side API callouts and pass the response data to the OmniScript for rendering in the UI
  • component listens for events and pass that event data to the OmniScript for rendering in the UI
  • calls Integration Procedure or Apex Classes from LWC and pass the response data to the OmniScript for rendering in the UI
  • update or prefill OmniScript element which matches the root node name.

Getting Started

For this tutorial we should be building on our previous knowledge of adding LWC components to Omniscript. If you aren’t familiar with this please check this previous post.

Create a new LWC component and add the required xml attributes.

Continue editing the LWC component and add the following code:

Javascript Object example

A simple data object that has nested person object containing the following properties name, lastName and role.

To pass the data to the OmniScript Data JSON we will use omniApplyCallResp method.

The method accepts an object that it passes into the OmniScript’s data JSON. If the root data node name in the response matches an element name in the OmniScript, that data prefills the element, and any nested elements, when it renders in the OmniScript. If the root node name does not match an element in the data JSON, the node inserts into the data JSON immediately.

Next, create a new OmniScript and add the LWC component.

For the Javascript object to display in the UI, add a Text Block Element and enter the following merge fields with following syntax %node:subnode% .

First Name = %person:name%
Last Name = %person:lastName%
Role = %person:role%

Activate the OmniScript and try the Preview, we should get something like this and the values populated.

With omniApplyCallResp we were able to pass data to the data JSON and display it in the UI.

Hopefully this should get you started on the possibilities and use cases for using custom LWC components in your OmniScript.

As usual sample source available in my github repo.

Leave a Reply

Your email address will not be published.