This post discusses two ways to embed Intelligent Advisor as an LWC into Salesforce Lightning applications. It is a good opportunity to review the two ways to embed an Interview into any modern web application, and to revisit the specifics of passing parameters to the Interview.
The two options are as follows:
- Embed the Interview using an IFRAME
- Embed the Interview using the OraclePolicyAutomationInterview object and either the Start or the BatchStartOrResume method
Note how the selector uses this.template.querySelector() rather than the traditional document (or jQuery for that matter) .
Once that is up and running, the manifest file is a doddle and looks like this.
The result is as ugly or as pretty as you want it to be, within the constraints of the IFRAME which nobody really wants to see any more!
Another LWC is needed and the difference should be immediately visible. In the first instance, the HTML template is a tiny bit more complicated, but not much.
So that the LWC framework leaves us alone and doesn’t start to steamroller over the embedded Interview, we add a blank DIV and ensure it is marked as lwc:dom manual so that we can add child content to this DIV without getting an error.
As prerequisite we need to ensure that the interviews.js library and any styles we use have been added to the Org as Static Resources. Then we can import them into our code. So we make sure we’ve done that in Setup first.
Now that we have set that up, we can add the relevant Whitelist Sites to Intelligent Advisor and our Org in the Access List (Intelligent Advisor) or the CSR List (the Org) to ensure we don’t get any CORS errors or Security errors. For the record, it’s probably obvious, but you cannot use mixed mode here (everything has to be HTTPS).
Our LWC looks a little like this, with the static resources loaded (and a couple of other things needed to get our extension up and running.
The interview is called using the BatchStartOrResume method of the Oracle PolicyAutomationInterview object – for no reason other than the ability to package parameters, seedData and anything else into a tidy object. Recall that this method can be used to launch multiple Interviews on a single page which is not our case here. For this demonstration we used an Interview that calculates the travel time between stations in the Paris metro.
Much of it will look very familiar since it is the standard embedding method. The end result, once deployed to the Org and added to the Home Page (for example, looks much nicer than the IFRAME and plays well in the space allocated, with the Intelligent Advisor styles adapting so that I can see the Screen even with a small view window.
And so, Intelligent Advisor lives in a Salesforce Lightning Web Component. Have a nice day! If you are interested in seeing the Zip of the code, just leave a comment.