Intelligent Advisor as Lightning Web Component (LWC)

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.

The simple HTML Template for the IFRAME embed

Then the JavaScript for the fullURL() code.

The JavaScript file with 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.

In our case the LWC is available on App, Record and Home pages.

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!

We made it ugly so you wouldn’t want to use it

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.

Note the lwc:dom attribute.

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.

Interview and InterviewStyle. We didn’t use jQuery for this demonstration.

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.

OpenIA() will be the code that actually calls Intelligent Advisor

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.

Open IA

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