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.
Hi man! I just saw this blog at random! Great stuff! would like to know more about Ominiscript and LWC as i am just a beginner in both specially in LWC but i would like to know how can the NEXT step button of omniscript can be heard by LWC components so that I can run validations on the LWC components like required fields and more importantly, i want to output a Json structure that was created inside the LWC and fire it outside to the OS. Is there a like standard way for the omniscript next step button to be heard by the LWC and do something first like validating required input fields 1st, and sending out a Json structure/data (like what you showed here) to the main OS json.? Many many thanks man and hoping for a reply soon!
can picture some ways to try and do this,
– either validate using some messaging function otb, then using SetValues read the values from LWC node after the next step and stops proceeding if validation fails
– or can get creative and fire an event from a custom next button, i believe you can call this.omniNextStep, hide the button properties — fire an event from a button that another LWC listens to by pubsub that then validates required fields.. if validation is all good then go call this.omniNextStep to move to the next screen.
hello @lopau,
Did you go in to do some research and I came across your post and I tried the method but it doesn’t work can you give me more details
lwc code :
export default class LwcShowAllAccount extends OmniscriptBaseMixin(LightningElement) {
tableData = [];
columns = columns;
data= {
person:{
name:’testttt’
}
} ;
connectedCallback() {
const jsonData = JSON.parse(JSON.stringify(this.omniJsonData));
this.tableData = jsonData.json;
}
}
omniscript :
%person:name%
Did you import the required OS components? check out the sample code in the github https://github.com/olopsman/omnistudio-tutorial