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
Both are implemented as Lightning Web Components. In Salesforce, it is not possible to execute external JavaScript, even if the location has been added to the Content Security Policy Trusted Sites. The JavaScript file (in this case Interviews.js) needs to be uploaded as a Static Resource and loaded into the component. The same is true for any styles or other resources (images and so forth) that your Interview might need – for example if you have implemented extensions.
The content of a LWC is essentially three different files – a template for the HTML, a JavaScript file for the code and a manifest file for the details of the deployment and where it can be used. In scenario one, the IFRAME, the code is very short and simple. The HTML template uses variable in the source attribute, and the detail is defined in the JavaScript. The following screenshots assume you have created an SFDX Project in Visual Studio Code, added a LWC and authorised the Org so that you can upload the files. For the demonstration we used a trailhead instance.
Then the JavaScript for the fullURL() code.
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!
Let’s face it, spending all that time and money on modern web components and ace software like Intelligent Advisor, it feels a bit disappointing to end up with an IFRAME. So the other option is more enticing. Let’s use the JavaScript lbrary to launch the Interview!
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 CSP 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.
Links : Setting Up Development Tools / LWC QuickStart
Hi Richard, I’m interested in the architecture. Can you share the thought process?
Hey Shankar. Well, this is a journey. I have a couple of customers moving from Oracle Siebel CRM to Salesforce or from another application such as Oracle Service Cloud to Salesforce. Step one on that journey is “skin deep integrations” such as LWC – just technically embedding the OPA client in their pages and passing, for example URL seeded information . Stage two is the creation of a Connector Framwork-based Load and Save mechanism to enable us to perform many of the processes we used to in the previous applications. Stage three will be handling attachments for that Connector and Stage four will be Checkpoints and ExecuteQuery. So this was all about Stage One.