Author: Richard Napier
Richard Napier joined Siebel Systems in 1999 and took up the role of managing the nascent Siebel University in Southern Europe. He subsequently was Director of Business Development and Education for InFact Group (now part of Business & Decisions) for 8 years. He now runs his Consulting and mentoring company, On Demand Consulting & Education Ltd and has run ODCE since 2010. Owner of the OPA Hub, he also is Co-Founder of the Siebel Hub.

Spell Checking in Interview Controls

The other day, I came across a question regarding Spell Check in Interview Controls. You know the sort of thing – this would be useful for Inputs, but especially for Text Area Controls where there may be a considerable amount of text that will need spell checking. There are today several approaches but one that stands out.

The first option is to implement something in JavaScript – this has downsides for a couple of reasons. The dictionary for a given language, even compressed and specially structured, is going to be larger than average – the size of the file will make for slower processing. And the JavaScript will need to search this file. Thus, the performance might not be great. There are a couple of good toolkits that find innovative solutions, for example this one, but it will need work to build the apporopriate user interface.

The next option is to hand off some of the processing to the server-side. There are a number of spell check engines out there in open source that use PHP or ASP.NET for example. Some others use third-party servers or Google APIs that need payment. So for a simple spell check in Intelligent Advisor that sounds like a lot of effort.

The final spell check option is to leverage the browser itself. Most modern browsers support the spellcheck=”true” attribute value for inputs and text areas and lots of other text-content tags like <p> and <div>. So the simplest option is to switch on that attribute on any items you want to spell check. For example, add an invisible label extension to your Screen and use it scan all the relevant items on the page and add the spell check capability. For speed, the example below uses jQuery to select the relevant items for spell checking but you don’t need it of course, you can select using standard JavaScript too.

/*  Generated by the OPA Hub Website Code Generator 19/06/2020 18:27
Educational Example of Custom Label Extension for Oracle Policy Automation
I will remember this is for demonstration purposes only.
 */
OraclePolicyAutomation.AddExtension({
	customLabel: function (control, interview) {
		if (control.getProperty("name") == "xSpellCheckEnable") {
			return {
				mount: function (el) {
					console.log("Starting name:xSpellCheckEnable customLabel Mount");
					$(document).ready(function () {
						$("input[type='text'], textarea").attr('spellcheck', true);
					});
					console.log("Ending name:xSpellCheckEnable customLabel Mount");
				},
				update: function (el) {},
				unmount: function (el) {
					if (control.getProperty("name") == "xSpellCheckEnable") {
						console.log("Starting name:xSpellCheckEnable customLabel UnMount");
						console.log("Ending name:xSpellCheckEnable customLabel UnMount");
					}
				}
			}
		}
	}
})

With the above code in place, an input or text area will allow spell checking using the browser. Note the wavy line and the right-click:

Spell Check in IA

I’m not saying this is the perfect solution but there are some good and less good points:

  • No management of files needed
  • No user interface to create
  • Supported by the vast majority of browsers (see link above)
  • No server-side stuff to pay for
  • Applicable to pretty much any HTML tag

There are a few downsides

  • Usually defaults to the operating system / chosen language in the browser settings rather than the document language
  • Not the most exciting user interface
  • If you use multiple browsers you might end up with different word lists.

But sometimes, less is more. This example is free in the Shop. Happy Spell Checking!

JavaScript Custom Image Extension

One of the regular readers of this website was very excited to see that recently, the Custom Extensions were updated to include a Custom Image Extension. Whilst at first glance you might not think it would need much of an extension, or maybe you cannot think of a requirement, there have been many situations where the logic of dynamic images, dynamic sizing, and so forth could not be done with a styling extension or a bit of CSS.

So what is available in this type of extension? In a Custom Image Extension, you can leverage the following Control Methods to customize your image.

getWidth()The width of the control (not just for image controls)
getHeight()The height of the control
getImageSource()The URL representing the source of the image
getLinkUrl()The URL used if the image is clicked
openLinkInNewWindow()Will the link open in a new Window?
getHorizontalAlignment()The alignment of the image
getCaption()The text caption of the image

For a quick demonstration, the following project will create a dynamic QR code according to your chosen URL. The image can resized on the fly using the sliders, and you can set the URL and whether it will open in another window:

The Custom Image Extension will generate a QR code and the user can manipulate the size of the image to see it changing dynamically. You could even then put the dynamic image in your Forms. Or use it to send a link to someone for a GetCheckPoint. Lots of ideas!

Creating a QR Code

There are lots of applications where the ability work with a Custom Image Extension will maker life easier. There is a good example in the Example Projects – it’s called Health Diagnosis and check out the diagnosis page with the dynamic image. The example project contains the JavaScript for the Custom Image Extension in the usual folder.

You can get the example Zip file from the OPA Hub Shop.

The Consultant’s Guide to Oracle Intelligent Advisor

Well, it has taken a bit longer than originally intended (the current lockdown kind of slowed things down) but I’m happy to say that the new book is available for preorder now. It’s been retitled and significantly reworked, in the new book we have thirty four chapters and lots of examples in Zip Archives to play with. We’ve really tried to create the Consultant’s Guide to Oracle Intelligent Advisor.

It has been reviewed and many chapters rewritten to be bang up-to-date for Intelligent Advisor latest release 20B. Of course it covers all the things a new starter needs to know, and should be a useful reference to anyone working with Intelligent Advisor. We even fixed all the URLs to match the new standards of Oracle documentation (as I am sure you have noticed, Intelligent Advisor is now in the URLs).

This kind of book of course can only be possible when so many people help out – the Oracle team have been absolutely fantastic, as always, and provided lots of ideas and help. And the readers of this website have also provided so many things for the book, the community really stepped up.

In the next 10 days or so, we will also be releasing the complete set of videos (there are about another fifteen or so to finish in the studio) and they will be available as a package with the book. I’ll let you know as soon as that is done.

For the time being however, you can read all about the Consultant’s Guide to Oracle Intelligent Advisor over on P8 Tech (the Publisher’s Website). The book will be the OPA Hub Shop as well.

Intelligent Advisor as Lightning Web Component (LWC)

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

Dynamic Input Mask JavaScript Extension

Dynamic Input Mask JavaScript Extension

This week I was lucky enough to be chatting to a reader when he shared a requirement for a dynamic mask. The exact concept was simple : when entering a telephone number, if the end user of the Interview types a number first, then the mask should default to the national format – for example (555) 1234-1234 – but if the end user types the international “+” prefix first then the mask should switch to a different one, for example +00 000 0000 0000 or whatever is appropriate. Outside of this example, there are frequently situations where more than one mask is needed, depending on some criteria or some fragment of data entry.

We should not forget of course that if all we want is a simple mask, then Intelligent Advisor has got it covered with the standard out of the box functionality. To implement a simple, static mask simply requires us to create an attribute of type Text and to select Masked Input from the Interview Ribbon before specifying the mask in the Input Mask dialog.

As an example, the following shows a Masked Input Control with a specific mask being implemented. In addition, you can see the Hint Text in the Interview tab shows the result in case you forget.

Clearly this is going to produce a good mask. But it cannot be changed dynamically, as it is part of the Control properties at runtime. So the possible solution is to use an Extension. In this case, a customInput. For the purposes of demonstration, we chose to use the jQuery Mask plugin. You can find more about it at the address : https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html. The most interesting element is the fact that it supports dynamic masks. It uses the keypress event to enable the developer to check the character(s) and then change the mask. So this sounded like a great idea, and indeed proved quite straightforward. The code below shows that in fact there are several steps needed : define the two masks, and also handle the case when the area is blanked by the user.

Happily we found an old project where we had already used this dynamic input mask technique and adapted it for today.

Dynamic Mask

Here is the example code, of course you can get the Zip file from the Shop. There are some comments below.

/*  Generated by the OPA Hub Website Code Generator 30/11/2018 22:41
Educational Example of Custom Input Mask Extension for Oracle Policy Automation
I will remember this is for demonstration purposes only.
 */
OraclePolicyAutomation.AddExtension({
	customInput: function (control, interview) {
		if (control.getProperty("name") == "xMask") {
			return {
				mount: function (el) {
					console.log("Starting name:xMask customInput Mount");
					var div = document.createElement("input");
					div.id = "xMask";
					div.value = control.getValue();
					el.appendChild(div);
					var oldVal;
					$('#xMask').on('keypress', function () {
						var val = this.value;
						if ((val != oldVal) && (val.length == 1)) {
							oldVal = val;
							if (oldVal == '+') {
								$('#xMask').mask('+999-9999-9999');
								$('#xMask').val(oldVal)
							} else {
								$('#xMask').mask('(999)-999-99999');
								$('#xMask').val(oldVal)
							}
						} else if (val.length == 0) {
							$('#xMask').unmask();
						}
					});
					console.log("Ending name:xMask customInput Mount");
				},
				unmount: function (el) {
					if (control.getProperty("name") == "xMask") {
						console.log("Starting name:xMask customInput UnMount");
						var xMask = document.getElementById("xMask");
						xMask.parentNode.removeChild(xMask);
						console.log("Ending name:xMask customInput UnMount");
					}
				}
			}
		}
	}
})

As you can see in this dynamic input mask demo, there is only really the mount to worry about. We use the keypress event and switch the mask based on the previous character pressed on the keyboard. And if no characters exist in the control we remove the mask ready for the next try. Here is a short video demonstrating the effect, and comparing to a static mask. The input control extension has not had any CSS formatting applied so it appears a little smaller than the standard. This can easily be changed.

video

Have a nice day! (the documentation about standard input mask functionality can be found online here).

OPA Hub Giving White Screen on Login – CSS MIME Issue

I had to place this article here because the other forum where I was answering a request (hope you get to read this, Yiyang!) is behaving strangely – I cannot add images or any external content, so I decided to do it here instead. The issue is that when logging into the Hub, you may receive a white screen in the browser. This was noted in a very recent version.

The error message in the console was :

Refused to apply style from ‘http://<host:port>/<deployname>/opa-hub/hub/oraclejet/css/lib/oj/v7.2.0/alta/oj-alta-min.css’ because its MIME (”) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

This error message is quite confusing, and we have seen it in many different contexts. But by far the most common one is that the file does not exist. You can check this yourself by copying the link and opening it in a new tab, as shown in the example image below:

So the most likely thing is the file has been removed or renamed. I was able to reproduce the error by going to the relevant folder in the WebLogic deployment that matched my situation and I renamed the file, and immediately the error appeared in every browser.

CSS Mime Issue

CSS Mime Issue

So, it is worthwhile checking that this file exists. For those of you who are reading this post on the OPA Hub Website, this discussion also came about because in recent versions the new Hub User Interface uses Oracle JET JavaScript and CSS files, which by default stored on a Content Delivery Network on the Internet. If you want to serve the JavaScript locally, you need to use the admin.sh script (this is assuming you are Private Cloud, as Public Cloud does not have that option) to change the parameter called “use_local_jet_files” to true.

Have a nice day!

EMEA London | Intelligent Advisor fka Oracle Policy Automation (OPA) 2020 Virtual Product Strategy Events

If you have not already been advised of this series of Virtual Product Strategy Events in the past, and especially if you have never attended one of these either in person or virtually, I can strongly recommend you do so. They are such a great way to talk to both the driving force and leadership team behind the Oracle Intelligent Advisor platform and additionally they are a great way to get to know people in your region that have implemented the same software, walked the same path and probably had the same questions as you!

These events facilitate collaborative discussions with the Intelligent Advisor Product Development, let you hear from other customers about their projects, and give feedback on planned innovations directly to the Intelligent Advisor product development team. This year we plan to make them even more interactive.

This is an excellent opportunity to connect with the Product Development team. This is not a marketing event! It is your opportunity to really have your say and connect with others.  Partners please forward this invite to your customers.  Save the date and come join us for one of these great Virtual Product Strategy Events!

Join the Event – Register Now for Virtual Product Strategy Event EMEA

Please RSVP to join the event and help make these sessions the most successful and interactive events ever – I’ve taken part in many of them and they are a great forum for sharing and learning about Oracle Intelligent Advisor. There are already events planned for Europe and North America and as soon as these dates are set I will share them here. I hope to see lots of OPA Hub Website readers on there – let’s make our voices heard.

Keep Watching this Space for more Virtual Product Strategy Events

There are more events coming up so check back here for information.Have a great day and see you there.

SAVE THE DATE | Intelligent Advisor fka Oracle Policy Automation (OPA) 2020 Virtual Product Strategy Events

If you have not already been advised of this series of events in the past, and especially if you have never attended one of these either in person or virtually, I can strongly recommend you do so. They are such a great way to talk to both the driving force and leadership team behind the Oracle Intelligent Advisor platform and additionally they are a great way to get to know people in your region that have implemented the same software, walked the same path and probably had the same questions as you!

These events facilitate collaborative discussions with the Intelligent Advisor Product Development, let you hear from other customers about their projects, and give feedback on planned innovations directly to the Intelligent Advisor product development team. This year we plan to make them even more interactive.

This is an excellent opportunity to connect with the Product Development team. This is not a marketing event! It is your opportunity to really have your say and connect with others.  Partners please forward this invite to your customers.  Save the date and come join us for one of these great Virtual Product Strategy Events!

Join the Event – Register Now

Please RSVP to join the event and help make these sessions the most successful and interactive events ever – I’ve taken part in many of them and they are a great forum for sharing and learning about Oracle Intelligent Advisor. There are already events planned for Europe and North America qand as soon as these dates are set I will share them here. I hope to see lots of OPA Hub Website readers on there – let’s make our voices heard.

Keep Watching this Space for more Virtual Product Strategy Events

There are more events coming up so check back here for information.Have a great day and see you there.

Intro Tooltips for Guided Assistance

I’ve been working with my other software (Oracle Siebel CRM) recently. As many of you know I’m the co-Founder also of https://siebelhub.com. I don’t contribute much to it these days as The OPA Hub Website takes up a fair amount of time, but I work with Siebel on a regular basis. One of the big things at the Siebel Hub is my colleague Alex, who has really become the star of the Siebel blogging world. He is also a great JavaScript guy, and Siebel has a big jQuery layer of extensible code which configurators can use to squeeze new User Experience out of the CRM. It’s like Interview Extensions on steroids – we can do all sorts of things with it that we would not do in Oracle Intelligent Advisor. And I was looking at tooltips and guidance implemented with  a library called intro.js

So, why am I mentioning it? Because the other day, I happened to be working on Siebel with this JavaScript library and I thought it would look great implemented in Oracle Intelligent Advisor. What does it do? Basically it provides a set of easy to use methods to create Hints (which you can think of as Tooltips) and also to create guided Introduction sequences. You can think of them as kind of animated introductions to your Interview. They have lots of features, and these are only two of the most obvious. Before we get into the details, let’s see what they look like in a short video.

video

Two Styles of intro.js

Basically it tries to demonstrate two different approaches  to working with intro.js – the targeted approach where the tooltips and so on are called up by the user, on demand, and the second one where the contents autoloads. Both are valid approaches and the autoload demonstrates the use of a JSON object – in this case an external file is not used but that opens up interesting concepts like storing the tooltips in an Excel Sheet in the Project and using our ability to access that data in the Interview.

intro.js with tooltips for Intelligent Advisor

Anyway, I hope you find it useful and you can get it in the OPA Hub Shop as usual. If you are interested in learning more about IntroJS, this book is on our current reading list. Note that this link is an affiliate link, purchases made from this link give a small amount to the OPA Hub Website which is used to pay for hosting the website.

Introducing the OPA Hub Website Academy

Introducing the OPA Hub Website Academy

We’re thrilled to be able to announce the launch of the first of our training classes available in recorded format. The course, entitled “First Day at the Office” is made up of 11 modules to help new starters get to grips with what Oracle Intelligent Advisor (Oracle Policy Automation) actually entails. The modules are presented in an engaging, easy to follow style. Where needed, example projects are available for download.

Recorded in a professional studio, they have excellent sound and video and playback on any device. For corporate clients wishing to acquire larger scale use, please contact us for pricing of the raw 4K Video.

Training - Module 1
Module 1 – The Platform

Think of it as the way to answer all those questions that come up once the product is purchased, when you or your team are sitting, wondering:

  • Where do we start?
  • What happens now?
  • How does my team get up to speed?
  • What’s a good way to knowledge transfer?
  • How do I?

And many more…there is often a period of disarray following the acquisition of any software, and without practical guidance it can be hard to get started, even with Oracle Intelligent Advisor. That’s why these modules were created. Find out more on the OPA Hub Academy First Day at the Office Training page.

Combine with Book or eBook

This course can be easily built into an onboarding program for any new starter. The other courses in the Academy take the student further in their learning program and build on these initial chapters. The chapters also combine logically and practically with the Getting Started with Oracle Intelligent Advisor book from P8 Tech Publishers for a complete learning experience.

Further Training Classes

Already planned are:

  • The complete series (Second Day in the Office, Third Day in the Office) on getting to grips with the basics.
  • The JavaScript Series (dealing with extensions for Interviews)
  • Integrating with Siebel CRM (step by step guide)
Worldwide
Logo by Southpaw Projects LLC