Tag: JavaScript 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 Container with JavaScript Extensions Revisited

Custom Entity Container with JavaScript Extensions Revisited

Assiduous readers will recall that we followed a series of adventures in Entity Container extension some time ago, from a basic tool that worked only in Debug Mode to a more interesting and robust concept that worked once deployed. For reference those Custom Entity Container with JavaScript Extensions articles can be found in the following links

So why come back to this example? For several reasons it seems appropriate to talk again about Custom Entity Container with JavaScript Extensions. Firstly, it is something that is often coming up in classes or on customer sites. So, subjectively I want to talk about it. Secondly, it is a great way of learning the ins and outs of the JavaScript extensions in general.

Yesterday, I was mad

I noticed that the PDF generator I had used for the third (and most interesting and useful example) had pretty much destroyed part of the file : specifically a couple of lines were duplicated and others were truncated. So it is time to revisit this, if only to correct the errors (I have uploaded a more up-to-date file, so that some of the errors have gone).

So let’s set the scene first. We want to display some entity instances. These are generated in my case by an Excel Spreadsheet. They contain one entity, the insult and this entity has three attributes : an Id number, the text of the insult and an insult level – a numeric categorisation of the insult. The higher the number, the more severe the insult. The insults themselves come from Tintin, or more precisely Captain Haddock.

There are no conditions in this Excel file, so the instances are created. There are 240, so we need a good display of our instances. The default display is too long, with no useful scroll bar. We want to replace this with jsGrid, a lightweight jQuery grid. We want something that replaces the style on the left with the style on the right:

Custom Entity Container with JavaScript Extensions Revisited

We would like

  • A grid format using little space
  • A scroll bar
  • A pagination control

The visual elements will be provided by jsGrid, a lightweight JavaScript control. We are also going to set the bar a little higher than last time. We want to have a dynamic filter of the grid, so that the user can view what they want (and not always have the 240 instances on the grid).

Custom Entity Container with JavaScript Extensions Revisited 2

Note: we must tread very carefully here. We must not change the business logic in any way. We must separate the concerns and provide purely UX elements in our JavaScript extension. But given this is inferred data, I think a little filtering is fine, as long as the underlying relationship is not tampered with.

The code would be based on the standard template, so I will simply put it here, in all of it’s quickly-strung together glory, so that you can read it, learn about it, clean it and make it industrial. As I always like to make clear, anything I post here is strictly not-ready, big-picture, here’s-an-idea for you to look at and make your own. This Custom Entity Container with JavaScript Extensions example is available on the OPA Hub Shop for download, as usual. It is listed as example #3 of Custom Entity Container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
* Richard Napier The OPA Hub Website April 2018
* Educational Example of Custom EntityContainer Extension
* I will remember this is for demonstration and educational purposes only
*/
OraclePolicyAutomation.AddExtension({
customEntityContainer: function (control, interview) {
//console.log("Get Array Reference");
if (control.getProperty("name") == "xEntity") {
var entities = interview._session.config.data;
var entityId = "entitypublicname";
var entity;
for (= 0; i < entities.length; i++) {
entity = entities[i];
if (entity.entityId === entityId) {
break;
}
}
return {
mount: function (el) {
//console.log("Beginning customEntityContainer jsGrid");
var myDiv = document.createElement("div");
myDiv.setAttribute("id", "mySpecialDIV");
//console.log("Styled customEntityContainer");
el.appendChild(myDiv);
var myFlatList = [];
var myObject;
for (= 0; i < entity.instances.length; i++) {
myObject = new Object();
myObject.insult = entity.instances[i].attributes[0].value.toString();
myObject.insult_text = entity.instances[i].attributes[1].value.toString();
myObject.insult_score = entity.instances[i].attributes[2].value.toString();
myFlatList.push(myObject);
//console.log(" Flattened the list - item " + i);
}
$("#mySpecialDIV").jsGrid({
width: "80%",
height: "400px",
sorting: true,
paging: true,
pagelndex: 1,
pageSize: 10,
pageButtonCount: 10,
data: myFlatList,
fields: [{
name: "insult",
type: "text",
width: 20,
title: "id"
}, {
name: "insult_text",
type: "text",
width: 150,
title: "text"
}, {
name: "insult_score",
type: "number",
width: 20,
title: "score"
}
],
controller: {
loadData: function (filter) {
return $.grep(myFlatList, function (item) {
return item.insult_score === filter.insult_score
})
}
}
});
//console.log("Finished customEntityContainer");
},
update: function (el) {
var myslidervalue = $("[role*='slider']").attr("aria-valuetext");
$("#mySpecialDIV").jsGrid("search", {
insult_score: myslidervalue
}).done(function () {
//console.log("filtering completed with slider value " + myslidervalue);
});
},
unmount: function (el) {
var myDiv = $("#mySpecialDIV");
myDiv.remove();
//console.log(" Removed the customEntityContainer ");
}
}
}
}
});

So now let’s look at the key elements (don’t forget to download and place jQuery and jsGrid files into your resources folder) :

Line 11 – this should be replaced with the name of your entity (not the text, but the name or XML tag as some call it). We are going to search amongst the entities until we find yours.

Lines 30 to 35 –  the code extracts your entity and pulls out three attributes from the entity. Note of course that these three attributes need to be placed in your Interview Screen, inside the Entity Container, for this data to be available. Essentially the extracted information is made into a JavaScript object, and the object added to an array.

Line 38 – this is the start of the jsGrid code.

Line 47 – this is the definition of the three columns of data in the table and how to display them.

Line 66 – this is the custom filter function which will hide any instances that do not have the selected score.

Line 77 – this is where we obtain the value of the slider and we refresh the table to only show those records using the filter function.

Thanks to the Madrid crew for their suggestions. In the next few days we will look at another Custom Entity Container with JavaScript Extensions example, this time with a dynamic chart using the same principle. Please note as usual that for best results when debugging, use Ctrl+F5 to debug in a decent browser.

Siebel and Oracle Policy Automation May 2017 – In (em)bed together

Siebel and Oracle Policy Automation  12 May 2017 – In (em)bed together

Siebel and Oracle Policy Automation 12 May 2017 : Since the release of Oracle Policy Automation May 2017 edition, teams of Siebel developers are breathing a sigh of relief. Finally, Oracle Policy Automation can fully integrate into the Siebel Open UI JavaScript API thanks to the arrival of it’s own Extension API.

It does not take long to compare the advantages of this Siebel and Oracle Policy Automation integration method :

  1. No longer having to use the static HTML file-based integration that was proposed in Siebel Innovation Pack 15.5 and above. This means that all the native Oracle Policy Modeling components (sliders, image controls, explanations, Form downloads just to name a few) can be displayed in Siebel Applets or any other element you can imagine in the Siebel Open UI object model (I’m thinking Plugin Wrappers and so on)
  2. Allowing the Oracle Policy Modeling users to concentrate on optimizing the experience and the Siebel Developers to concentrate on delivering the data model to Oracle Policy Modeling. Separation of concerns
  3. Avoiding IFRAME. Always a good thing.
  4. Implementing different Physical Renderers depending on user situation – perhaps to display the Oracle Policy Automation Interview in a jQuery Dialog if the screen is big enough, otherwise using the full Siebel Applet
  5. Potentially creating a Presentation Model with User Properties to allow Siebel Developers to pass properties into the JavaScript API which then can be used to implement some logic on the middle layer – perhaps passing the Rulebase name into a generic Applet.

It doesn’t really matter if you are not a Siebel person, this opens up a lot of great possibilities. Here are some of the basic steps

    1. Find a Form Applet in Siebel that you want to show an Interview from Oracle Policy Automation in. Using Duncan Ford’s template generator, create an empty Physical Renderer for a Form Applet. This is the starting point for any integration using Siebel and Oracle Policy Automation 12 May 2017 Extension API.
    2. Populate the ShowUI Framework hook with your code to inject the Oracle Policy Automation interview into an available <SPAN> or just make space for yourself. You will want to write much tidier code than this example, but you can get the idea – select, inject.

Siebel and Oracle Policy Automation 12 May 2017 - ShowUI

    1. Add the new Physical Renderer to the Manifest, along with any other files that you downloaded (if you are referencing statics copies of the interviews.js and the CSS files for example)
    2. Restart Siebel and navigate to the View with your Applet in it.

Siebel and Oracle Policy Automation 12 May 2017 Embedded

No IFRAME, no HTML files. Just the magic of the new Extension API. It’s breathed new life into Siebel and Oracle Policy Automation.

 

Worldwide
Logo by Southpaw Projects LLC