Tag: Extension API

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.

Custom Entity Collect Extension in Oracle Policy Automation #1

Custom Entity Collect Extension in Oracle Policy Automation

The idea behind this post, as is often the case, came from a conversation with a customer about something unrelated to the actual result. Suffice to say we were discussing data collection in Oracle Policy Automation and the idea of Custom Entity Collect Extension in Oracle Policy Automation came up, vaguely. The difficulty with demonstrating such an Extension is that every situation will be different, and every extension will have lots of styling to “make it look like something different”.

Perhaps the most important thing therefore is to demonstrate a Custom Entity Collect Extension in Oracle Policy Automation without any custom functionality and without any styling, so you can use it as the basis for your own discovery sessions. Of course, as always (and in particular in this case, as the example is necessarily longer than most), the code is totally for prototype and demonstration purposes only, and I will leave it to you to take the ideas and run with them.

Custom Entity Collect Extension in Oracle Policy Automation Result Final

Alright let’s get started. The Project looks like the following screenshot; namely a single entity called the accident and a variety of input attributes. There are no rules in this Project at the moment.

Custom Entity Collect Extension in Oracle Policy Automation Result 1

The screenshot shows a number of things we will need to think about:

  1. The code will try to be generic
  2. The code needs to read Screen items like the text here
  3. The code needs to offer deletion of instances as well
  4. The code needs to display Boolean data as well as text or numbers
  5. The code needs to display dates with a date picker

The Project also has, for completeness’ sake, an entity container on the final Screen to review the data to make sure that what the user has done has been saved correctly. Of course, you can also check the Data tab in the debugger.

The basic principle of the code is common to all the different examples seen around the Web, namely the Entity Collect has a custom Property whose name identifies it to the JavaScript extension code. I won’t include it here but you can find it in the PDF version at the end of this series.

NOTE : The Code Viewer on this website eats some characters, so be careful (especially less than and greater than symbols)

Getting Started : Make a Container

The first part of our mouncode will build the infrastructure for our container. Fittingly enough, it will be a DIV.

return {
				mount: function (el) {

					// ADD ROW BUTTON THE TOP OF THE ELEMENT
					var button = document.createElement("BUTTON");
					button.setAttribute("type", "button");
					var buttontext = document.createTextNode(control.getAddButtonText());
					button.appendChild(buttontext);
					$(button).click(function () {
						control.addNewRow();
						drawrows();
					});
					el.appendChild(button);

					//CREATE DIV CONTAINER FOR ENTITY COLLECT
					var div = document.createElement("div");
					div.id = "entitycollector";
					el.appendChild(div);

As you can see, there was a little more than just a DIV. The code added an “Add Row” Button to the top of the Container, add set a click event to add a row to the Control with control.addNewRow(). The rest of the code adds the button to the page, and then adds an empty DIV.

var myattributelist = control._source.config.templateControl.controls
					function drawrows() {
						$('#entitycollector').empty();
						// CREATE AN ARRAY OF LABELS FROM THE ATTRIBUTES
						var mylabels = [];
					
						for (i = 0; i < myattributelist.length; i++) {
							mylabels.push({
								caption: myattributelist[i].caption.toString(),
								name: myattributelist[i].attributeId.toString()
							});
						}

The code above gets a reference to the list of attributes that are on the Control (essentially, what the designer has added to the Screen in Oracle Policy Modelling. Then it creates an array of label texts for each attribute. This set of labels will be used in the next part of the code. The function drawrows() will perform almost all of the setup of the control.

var myrecords = control.getRows();
					
						if (myrecords.length > 0) {
							for (i = 0; i < myrecords.length; i++) {
								// CREATE A CONTAINING DIV FOR EACH ROW

								var rowdiv = document.createElement("div");
								rowdiv.id = "rowcontainer" + i.toString();
								rowdiv.setAttribute('data-rownumber', i.toString());
								rowdiv.setAttribute('style', 'background-color: lightblue;');
								rowdiv.setAttribute('data-instancename', myrecords[i][0].instance.toString());
								$("#entitycollector").append(rowdiv);

This section creates a new DIV for each row of the “records” or instances of the entity. The rowdiv also uses HTML attributes to store useful information about the row such as the instance name, which makes it easy to find things later on either in the HTML source or in jQuery.

Drawing the Inputs

The final part of the code for today looks at drawing the input boxes, check-boxes and other data entry items.

var attrLabel = document.createElement('label');
// FOR EACH LABEL
for (j = 0; j < mylabels.length; j++) {
var myId = myrecords[i][j].id.toString();
var attrLabel = document.createElement('label');
attrLabel.setAttribute('for', myId)
var attrLabelTextNode = document.createTextNode(mylabels[j].caption);
attrLabel.appendChild(attrLabelTextNode);

//ADD PROPERTIES TO THE HTML INPUT
var myattributedatatype = myrecords[i][j]._source.config.dataType;

switch (myattributedatatype) {

case "boolean":
var attrInput = document.createElement('input');
attrInput.setAttribute('type', 'checkbox');
break;

case "number":
var attrInput = document.createElement('input');
attrInput.setAttribute('type', 'number');
break;

case "text":
var attrInput = document.createElement('input');
attrInput.setAttribute('type', 'input');
attrInput.setAttribute('data-datepicker', 'false');
break;

case "date":
var attrInput = document.createElement('input');
attrInput.setAttribute('type', 'input');
attrInput.setAttribute('data-datepicker', 'true');
break;

}

So what is happening here? In the first part of the code, we are setting up the labels by adding the text node to build the appropriate UI. Then we switch through a variety of different data types – note that we have not covered them all, just the core types – and how they will be built in HTML. The date type, for example, is going to use jQuery UI date picker so the type is set to input not date as you might have thought (to take advantage of modern browser support for that input type) but the support is patchy and the limitations many. So it is going to be a simple input but with a jQuery UI element bound to it.

The Boolean uses a check-box and the Number uses number : so we can experiment with that UI experience.

Continues in part two of our Custom Entity Collect Extension in Oracle Policy Automation investigation. If you are looking for more information, the official documentation is to be found here.

Oracle Policy Automation -JavaScript Custom API : Google Maps

Oracle Policy Modelling – OPA Custom Control : Google Maps

The other day I was confronted with a requirement to display Google Maps within an Interview. The requirement was not window-based or dialog-based : the Google Map had to be in the main HTML Interview. I was using the August 2017 release, and thus able to us the Control Extension API in JavaScript. Here is a quick tutorial for this OPA Custom Control (using the new Extension API).

The example is so generic that I thought I would share it with you. As before this example is just for educational purposes and there are lots of steps that were synthesised in the end after some refactoring, but is easier to show the long and wordy version here for educational reasons.

Firstly, let’s make the OPA Custom Control Project and set up the simple attributes and Screens.

OPA Custom Control - Attributes

Then we can build out the two Screens.

OPA Custom Control Map Screen

The map screen is just, for the moment, a Screen that is always displayed (because in this demonstration project we will not be doing any logic in rules).

OPA Custom Control Data Collect

The preceding screen, we will collect the information we need to display : firstly the visible details and secondly the latitude and longitude in the Location options of the Screen.

OPA Custom Control Value List

In this demonstration project, the incident type will have a value list, with four choices. These will correspond to four different icons from the Google Maps standard icon list. The list I was able to view from this site, and download the files needed for the demo. They were placed in the usual folder of our OPA Custom Control project, as shown below.

OPA Custom Control Images

We’ll make some adjustments to the Map Screen, adding all the attributes we intend to use in the demonstration, using the public names and substitution tags.

OPA Custom Control Map Elements

The label that will be the basis for the map, and as you can see it needs (for this demonstration) a custom property, as shown below:

Now we can bring in the JavaScript file, using the Oracle Policy Automation Extension API to extend the label control. Now you will add the JavaScript file that will be the basis of the control, by clicking the Custom Files button in the Styles.. dialog.

 

OPA Custom Control Extension API Add File

Our file will use the standard framework of all the JavaScript Extensions (See earlier posts here and here).

The content of the file, extended for the purposes of illustration, begins here, with three main areas of interest.

  1. Creating the script tag to load the Google Maps library
  2. Do the same to create an empty container for the future map
  3. Obtain the latitude and longitude from our project.

Continuing with our script, the entire mount, as you can see at the top of the previous image, is preceded by a check for our custom Property.

OPA Custom Control Extension API Map Setup

TIP : If you are planning on implementing only this customLabel, and you want to display other labels using the standard rendering, then you should put  your custom property if statement right to the top immediately after the customLabel: line, and wrap everything in this if statement so that the entire script will be ignored for ordinary labels.

The next chunk is mostly setting up the Google Map functionality

4. These are the icons that will be used in the different types of incident. We use the $() notation to avoid fixed references to folders.

5. This is the callback function used when Google Maps has loaded

6. This actually loads the map

7. You can build an array of elements if you intend to display multiple markers. Here you will just use the one, with the latitude and longitude garnered earlier and the incident type.

OPA Custom Control Map Label

8. For each of the loaded points, create a marker and add it to the map,

9. With a click event to handle the user interaction

10. The click event will display a dynamic content, in a typical Google Maps information box.

11. Finally as good citizens we will implement the unmount which will remove the Map when we leave the page, avoiding errors about multiple maps being loaded.

The interview experience gives us the following lovely rendering when you enter the details and pass to the Map Screen.

The icon will change depending on the type of incident, and the information box will display whatever attribute values you wish to show.

If anyone is interested in obtaining the JavaScript code for learning purposes, please leave a comment. Note that remove() is not compatible with all browsers, and the Internet Explorer embedded in the Debugger will not like it. But open the Debugger with Ctrl+F5 in your real browser and it will work (for a list of supported browsers see here).

 

Oracle Policy Automation May 2017 – New Features #3

Oracle Policy Automation May 2017 – New Features #3

Following on from the previous post, in this third video about the Oracle Policy Automation May 2017 New Features, we look briefly at the second capability of the JavaScript extension API. Yesterday I looked at custom styling, and today we look at custom rendering. Providing a more robust and upgrade-proof framework for customized interview experiences, it can be used to modify the behavior of labels, input boxes and other controls as well as major elements like the header or the navigation elements of the interview. There are a few examples of the new API in the Example Projects, but I found that they did not really explain to a neophyte how this works!

The API provides for several event handlers, to manage the life cycle of the DOM and your custom control renderer. In addition there are a raft of interesting Methods available to get property values such as the current value of the control, or the control type and so forth.

Oracle Policy Automation May 2017

The format of the JavaScript file will have a structure very similar to the previous example, essentially a JavaScript Object using a familiar notation. In future videos we will investigate further controls but in this first demonstration of the Oracle Policy Automation May 2017 New Features we will produce a custom renderer for the Labels in our interview.

In the example, we will use three of the four handlers available, and demonstrate how the API provides enough information to enable us to quickly add our rendering engine to the Interview.

You can find the YouTube Playlist for these videos here. The next post in this Oracle Policy Automation May 2017 series will look at the return of dynamic values in lists, as well as the (most welcome) capability to embed interviews in something other than an IFRAME. See you soon for more!

Worldwide
Logo by Southpaw Projects LLC