Tag: JavaScript Extensions

JavaScript Extension : customEntityRemoveButton

JavaScript Extension : customEntityRemoveButton

Once again I came across this question on another forum, so I answered there and decided to reproduce it here in more detail. As some of you are no doubt aware, there are a number of smaller extensions in respect of Entity Collects, that all the developer to manage the process of deleting, or adding instances without having to completely redesign the Entity Collect which is a heavier task by an order of magnitude. customEntityRemoveButton is a good example.

The question, very pertinent I must say, concerned the deletion of instances, and the fact that there is no confirmation dialog. You click the button and the suppression just happens, without a chance to say “oops, didn’t mean that one”. Enter the customEntityRemoveButton!

customEntityRemoveButton 1

  1. An Entity Collect
  2. The Delete Instance Button that will be customized with a customEntityRemoveButton extension

The extension in question is known as a customEntityRemoveButton, and it has a unique handler which you might not have come across. This handler is known as setInstance Рand the job of this handler is to provide the instance identifier. So, for a scenario, if you create three instances, then obviously each button needs to know which instance it belongs to, so to speak. This handler fires first (even before the mount handler it seems) so that you can recover the identifier and then use it to ensure the right button does the right job.

The example scenario is that the user would love to have a confirmation dialog. And since I’m often accused to using too much jQuery, this one is in native JavaScript. It would look like this perhaps:

/*  Generated by the OPA Hub Website 07/04/2020 17:54
Educational Example of Custom Remove Instance Button Extension for Oracle Policy Automation
I will remember this is for demonstration purposes only.
 */
 let mycontext = "";
OraclePolicyAutomation.AddExtension({
	customEntityRemoveButton: function (control, interview) {
		if (control.getProperty("name") == "xRemoveButton") {
			return {
				mount: function (el) {
					var div_parent = document.createElement("div");
					div_parent.id = "xButton_parent";
					el.appendChild(div_parent);
					console.log("Button mounted");
					makebutton(mycontext,el,control);
				},
				setInstance: function (el) {
					console.log("Button set Instance for " + el.toString());
					mycontext = el;
				},
				update: function (el) {
					console.log("Button updated for " + el.innerText);

				},
				unmount: function (el) {
					if (control.getProperty("name") == "xRemoveButton" ) {
						console.log("Unmount");
					}
				}
			}
		}
	}
})

function makebutton(instance, mycontext,control) {

	var div = document.createElement("button");
	div.id = "xRemoveButton" + instance;
		div.innerHTML = "Remove Me " + instance;
	div.onclick = function () {
		var goahead = confirm("Are you Sure?");
		

		if(goahead === true) 
		{control.removeInstance(instance);return false;}
	
	else{
		alert("No delete");return false;
	}
			
	};
	mycontext.appendChild(div);

}

I repeat that this is just a quick demonstration that I pulled together from somewhere in my head. The documentation on line is very thin concerning this particular handler and indeed these extensions in general.

customEntityRemoveButton 2

In the screenshot above and below you can see the new improved custom Button!

customEntityRemoveButton 3

Users now relax safe in the hands of our sanity checking dialog box ūüôā

If you are interested in the Zip Archive just leave a comment and I will share it. This was done in 20A.

Have a nice day!

Winners – Where Are You?

Winners – Where Are You?

We appreciate that you have many more important things to think about right now, but we just wanted to remind our recent winners that we are still waiting to receive address information so we can send some wearable goodies. If you want to find out what they look like, then you only have to see what winner Orlando R, sent the OPA Hub Website earlier this month.

Orlando R. is a long time Oracle Policy Automation / Intelligent Advisor practitioner, and we have had the pleasure of crossing paths with him multiple times over the last 15 years or so, from his early years in the Siebel CRM world, to his fanatical use of Oracle Policy Automation today. He is a very respected member of the community and an all-round nice guy as well.

Winners 2019

Here you can see Orlando, one of the winners, modeling his fantastic tee-shirt and winner’s mug. He also, of course, received a copy of the new JavaScript Extensions book in electronic format.

So, Annie and Manohar, please reach out either in the comments here or (better, since you probably don’t want to print your address in the comments) via LinkedIn. We look forward to sending you the prizes.

And it is worth saying, the OPA Hub Website wishes all of our readers and their families the best of everything during these difficult times, wherever you are in the world. As someone who spends nearly 150 days away from home on average each year, it is safe to say that it is a time for adjustment and new opportunities, as well as a time for protecting and nurturing those that I love and cherish. May we all come out of this in a better place than before.

We will continue to post during these times. Have a great day. And if you have not yet participated in the survey, please do.

JavaScript Extensions for Oracle Policy Modeling

JavaScript Extensions for Oracle Policy Modeling

The JavaScript Extensions for Oracle Policy Modeling book is now available in all the channels that are currently supported:

Buy it from the Publisher

This option is probably the best if you are looking for the eBook. There is also a great bundle deal at the moment with the Getting Started with Oracle Policy Automation 2019 book. For more information you can find the details over on the P8 Tech website page.

Buy it from Amazon.com

The information that Amazon prints regarding availability of the title is incredibly vague and usually inaccurate. But at the moment, it is correct – it is shipping in a couple of days. This option is good for North American readers therefore. Find out more from the Amazon.com page here.

Buy it from Amazon.co.uk

Just like it’s global counterpart, the shipping information is usually wide of the mark but at the moment they have got it right, you can order the book from Amazon.co.uk and it will ship very fast. I’ve included a pretty picture of the book below, or you can click this JavaScript Extensions for Oracle Policy Modeling link. Full disclosure, this link is an affiliate link that earns us 50 cents extra on every purchase.

Buy JavaScript Extensions for Oracle Policy Modeling from the Book Depository

The most efficient and cost-effective way for the Rest of the World to acquire this and the other titles in the collection, the most important benefit of using this supplier is the fact that the book can be shipped anywhere in the world and they are remarkably efficient. Price-sensitive customers will find their shipment charges more attractive than Amazon in general. You can find out more from the Book Depository page for JavaScript Extensions for Oracle Policy Modeling.

What about the other book?

Some of you have been asking about Getting Started with Oracle Policy Modeling. Here are some answers:

  1. Yes it is being updated, worked started in the holiday season
  2. Yes it is being renamed because the product has been renamed and because the scope of the book is broader than ever
  3. Yes it will be released as soon as possible (probably end of Q1, early Q2)
  4. No it will not have broccoli on the cover. Tune in later to find out what it will be. Or submit your suggestion!

Most Popular Downloads on this Site

Most Popular Downloads on this Site

We used to say that anything with “Google Maps” in the title was a sure-fire winner when it came to people downloading examples – after all Google Maps used to be so easy to get into, and so many people just “get” why a map is useful, that it was absolutely the go-to example. But is it still the case? Google APIs now need a Billing Account, and an API key, which in turn needs to have domain restrictions, and other administrative elements. It’s not quite as easy as it used to be.

So we set out to look at the different examples that have been downloaded on this site. And here are the results. Interesting. Under the graph, some comments and remarks which might explain some of the data.

Most Popular Downloads

Custom Google Maps JavaScript Label Extension Example 21

Custom Dynamic Options JavaScript Extension Example 21

Didn’t expect that one to be in there at all!

Custom JSON Search JavaScript Extension Example 19

Same for this one. Maybe Search is the new Map?

Custom Entity Container Extension Example  17

Google Maps as Custom Input Control Extension 15

Ah, see, the combined score is going to be huge.

Custom JavaScript Extensions Map with Google Places and Custom Options List  12

Told you. Google Maps reigns supreme!

Custom Header as a Timer JavaScript Extension 12

Custom Year Picker JavaScript Input Extension Example 9

JavaScript Extension Entity Collect Control 7

JavaScript Entity Collect Extension Excel Data Load 6

Custom Signature Extension Example 6

Wow. This one isn’t even really an extension!

JavaScript Extension Search Examples – Airlines, Great Circle Mapping, Airports 6

Everyone loves planes. I get that.

Embed Website in Interview Label Extension 5

JavaScript Extensions with a Live Entity-based Chart with D3 5

Everyone hates D3. I get that.

JavaScript Extension Search Example – Railways 5

Not as much fun as airplanes.

Loader Image in Entity Instances Search Extension 4

JavaScript Extension fullCustomInput Example 4

JavaScript Extension Custom Label Detail Pop-up 4

Calendar Input Extension Blackout Dates 3

JavaScript Extension Search Example – Siebel REST API 3

JavaScript Extension Relationship Control 2

JavaScript Label Extension Leaflet JS Map 2

Wow. This is the free alternative to Google Maps. I would have imagined this to be more popular.

Force PDF Click Button Extension and Label  1

As you can see from the Chart, Google Maps is hanging on – but only just! It’s ex aequo with the Search Extension. However if you pool together all the Google Maps stuff, it completely wipes the floor with the competition. Definitely the most popular downloads.

Want even more downloads?

If you are interested in even more examples (including a complete Entity Collect, a Carousel, Breadcrumbs, lots of Inputs and more, then you will be interested in our new book, JavaScript Extensions for Oracle Policy Modeling.

JavaScript Extensions for Oracle Policy Modeling

JavaScript Extensions for Oracle Policy Modeling

It’s almost ready. The perfect Christmas gift (yeah, right, in bizarro-world) or New Year workout kit. The new book is due out in a few weeks, and you have the chance to win a free copy ahead of everyone else by entering our prize Survey (30 seconds) right now.

The book comes with 50 examples. You get them as Zip Files as well when you buy the book. The book covers all the different types of JavaScript Extensions that are currently available, with examples of each of them (sometimes many different examples) using easily-understandable business scenarios as the starting point, and using example projects from Oracle Policy Modeling – so you don’t need to install a Hub, or do anything special – which let’s you get started straight away.

  • Label Extensions
  • Input Extensions
  • Search Extensions
  • Options Extensions
  • Entity Collect Extensions
  • Entity Container Extensions
  • Button Extensions
  • Event Extensions
  • Navigation, Header and Footer Extensions

The OPA Hub Website Community has also stepped up and I am delighted to say that 8 examples (with credits) came from readers of this website. I am very grateful to them and encourage all of you to submit your ideas and code snippets for the next version.

Hopefully this book will appeal to non-technical people too – I wrote it in the same style as the others (Getting Started with OPA, Getting Started with OSvC) and tried to make it as accessible as possible to everyone.

Here, in avant-premiere, is the cover. And no, I’m not sure what those things are either. But they sure look exotic and tasty. I wanted a parsnip on the cover but these were available and they look good. These are important questions that you worry about late at night. The publisher’s website has been updated, watch this space for the launch date!

 

JavaScript Extensions

Temporal Reasoning #5 : Temporal Attributes in Interviews

Temporal Reasoning #5 : Temporal Attributes in Interviews

In the final part of this mini-series, the OPA Hub Website continues to look at Temporal Reasoning and in this particular chapter discusses the display of Temporal Attributes data in the Interview experience.

If you missed any of the previous parts of the series, they are here:

So now that the we have a bit of understanding of how these data elements work, what about displaying them in a good way to the end user in the Interview. Well, part of the answer is hidden in part four of this series. We cannot actually display temporal attributes for data entry in an Interview (so conversion comes in very handy).

Let’s be more specific. Using the project from the previous chapter, in 18C, when an attempt is made to display the temporal information on a Screen, various things happen that underline the some important concepts:

Temporal Attributes in Interviews Animation OPA 12Please excuse the retro-style animated GIF above. But the demonstration above illustrates the fact that Temporal attributes and their change-points are complex data types that cannot be handled in a “normal” way. The one exception to the above is if you have a Temporal attribute whose values are the Goal of the interview, then an Explanation¬†will display the data in a coherent way:

OPA 12 - Viewing Temporal Attributes in Interviews

If your project is using RuleScript and your data is pre-seeded, then potentially you could access it by deriving a string value which is a concatenation of the different values and displaying that attribute using a label control.

// RuleScript(myString) <- (temporalBankBalance)
function FindHighest(global) {
	console.log("Starting RuleScript");
	var v = global.temporalBankBalance;

		console.log("Base Value of v " + v._baseValue);
		var idx,
		maxVal = null;
		var myString = "";
		console.log("Length of Temporal Array " + v._changeValues.length);

	if (v._changeValues.length <= 0) {
		global.myString = "No Temporal Values";
	} else {
		console.log("Getting Temporal Values");
		for (idx = 0; idx < v._changeValues.length; idx++) { var changeValue = v._changeValues.valueAt(idx); if (changeValue != null && (maxVal == null || changeValue > maxVal))
				maxVal = changeValue;
		}
		global.myString = global.myString + changeValue + ";";
	}

}

But given that RuleScript is experimental, that it’s use cases are highly controlled¬†this would be a very bad idea. Plus it would only work if the temporal values were pre-seeded into the Interview, which renders it all very complex.

So what is plan B? It might be to use something like the Entity Container Extension that we have previously looked at (which would imply using the conversion technique mentioned in part four).

If you are looking for a quick and dirty way to get at the Temporal values, even though the JavaScript Extensions do not actually support them today, the values are still accessible. They can be accessed using something like this. I have not published this as a download since the snippet below is very primitive.

 

/**
 * Richard Napier The OPA Hub Website August 2018
 * Educational Example of Custom Container with a Timeline inside
 * I will remember this is for demonstration and educational purposes only
 */
OraclePolicyAutomation.AddExtension({
	customLabel: function (control, interview) {
		if (control.getProperty("name") === "xTimeline") {

			return {
				mount: function (el) {
					var script_tag_addition = document.createElement('script');
					script_tag_addition.setAttribute('src', '${resources-root}/js/timeline.min.js');
					script_tag_addition.setAttribute('type', 'text/javascript');
					document.getElementsByTagName('head')[0].appendChild(script_tag_addition);
					var stylesheet_tag_addition = document.createElement('link');
					stylesheet_tag_addition.setAttribute('href', '${resources-root}/css/timeline.min.css');
					stylesheet_tag_addition.setAttribute('rel', 'stylesheet');
					stylesheet_tag_addition.setAttribute('type', 'text/css');
					document.getElementsByTagName('head')[0].appendChild(stylesheet_tag_addition);

					var myDiv = document.createElement("div");
					myDiv.setAttribute("class", "timeline");
										myDiv.setAttribute("data-mode", "horizontal");
					el.appendChild(myDiv);
					
					
					var myDivWrap = document.createElement("div");
					myDivWrap.setAttribute("class", "timeline__wrap");
					$(".timeline").append(myDivWrap);

					var myDivChild = document.createElement("div");
					myDivChild.setAttribute("class", "timeline__items");
					$(".timeline__wrap").append(myDivChild);
					
					// Don't do this, it relies upon the temporal attribute
					// being the only one in Global exposed on the page as a %label%
					var myTemporal = []
					myTemporal = control._source.screen.config.data[0].instances[0].attributes[0].value.changePoints
						for (var i in myTemporal) {
							var iterateDIV = document.createElement("div");
							iterateDIV.setAttribute("class", "timeline__item");
							iterateDIV.setAttribute("id", i);
							$(".timeline__items").append(iterateDIV)
							var iterateDIVContent = document.createElement("div");
							iterateDIVContent.setAttribute("class", "timeline__content");
							$('.timeline__item[id="' + i + '"]').append( "GBP "  + myTemporal[i].value + " on " + myTemporal[i].date)
						}
				},
				update: function (el) {},
				unmount: function (el) {
					var myDiv = $(".timeline");
					myDiv.remove();

				}

			}
		}
	}
});

The above snippet relies upon a jQuery plugin to display the data. This gives something like this, a visual timeline on the left of this page:

Temporal Attributes in Interviews JavaScript Extension

Of course there are hundreds of Timeline plugins, each more sophisticated than the other, on the Internet.

We hope that this series has brought to light some of the key features of temporal reasoning, and thanks to Orlando who suggested this series in the first place. Have a good day and see you soon!

 

Detail Pop-up in Oracle Policy Automation

Detail Pop-up in Oracle Policy Automation

The other day someone came to me with a curious and interesting problem. They had a number of entity instances, inferred in an Excel spreadsheet. These had to be displayed in the usual way with an Entity Container in a Screen of Oracle Policy Modeller. So far so good, I hear you say.

Detail Pop-up in Oracle Policy Automation 1

The inferred attributes (which in the end would probably be coming from a data source, but for now come from Excel as inferred instances) included a Text attribute that was frankly far too large to display correctly in the Screen, given that there might be a few rows of instances in the final result.

We experimented with lots of different layouts, dynamically hiding and showing items based on various criteria in order to make room, but in the end we came to the conclusion that we needed some sort of Detail Pop-up in Oracle Policy Automation Рsomething that could be called upon by the user as and when they needed it, but ignored (and invisible) when not needed.

Here is the starting point for our adventure.

The Screen above is populated with all the instances of the student’s scholarship. On the left is a set of information that we need to display on request. Normally we will only display the name of the Scholarship. You will see in the list of attributes there is an overview ( a text attribute), a deduction ( a currency attribute) and a renewable status (a boolean attribute). There are a few others, including the contact details (a text attribute, which is a URL).

So we are going to customise the label control I have just described. It is “inside” the Entity instance loop : so in reality there will be one per instance. We need our label to contain, as you would expect, the correct information. We wish to avoid pop-ups (nasty!) and dialogs (too complex for a simple window) and tool-tips are too small and simple for the data we have. The label shown will have a custom property called “name” and will be used as a hook for our JavaScript Extension.

We experimented with all sort of things before we went for this option : JavaScript is a last resort. We were frustrated by the behaviour of hidden items that appeared slowly (we could see “uncertain” appearing before the out of the box JavaScript populated the bound controls). So it was going to be JavaScript.

So,  our Detail Pop-up in Oracle Policy Automation needs to meet these challenges. We are going, as a simple demonstration, to use a CSS toggle to show or hide the relevant data for our instances. We can set the scene as follows:

.area {
position:relative;
color:#0645AD;
font-weight:400;
}

.area:hover {
text-decoration:underline;
text-decoration-color:blue;
cursor: pointer;
}

.fixed {
position:absolute;
top:190px;
left:465px;
border:0;
z-index:9999;
background-color:#FFF;
display:none;
height:300px;
width:420px;
float:right;
text-decoration:none;
text-decoration-color:#000;
text-color:#000;
padding:5px;
}

The above CSS file sets up two main classes and a pseudo-class for a mouse hovering over our row. The¬†area is the area we will normally show – with just the name – and the¬†fixed area is a fixed DIV which will display (or not) when we decide we want to visualise the information. Now for the main content of our customLabel extension. Here is the¬†mount¬†key with as usual, my simplistic attempts at coding : for the umpteenth time I’m not a professional – but my job is to show something can be done, and let other’s get on with making it happen.

 

{

if (control.getProperty("name") == "xLabel") {
return {
mount: function (el) {
var maindiv = document.createElement("div");
maindiv.style.visibility = 'visible';
maindiv.innerHTML = interview.getValue("scholarship_award", "scholarship", control.instance);
maindiv.classList.add("area");
maindiv.setAttribute("id", interview.getValue("scholarship_award", "scholarship", control.instance));
el.appendChild(maindiv);

var tooltipdiv = document.createElement("div");
tooltipdiv.style.visibility = 'visible';
tooltipdiv.classList.add("fixed");
tooltipdiv.innerHTML = control.getCaption();
tooltipdiv.setAttribute("id", interview.getValue("scholarship_award", "scholarship", control.instance));
el.appendChild(tooltipdiv);

$("div [id='" + interview.getValue("scholarship_award", "scholarship", control.instance) + "']").click(function () {
$(".fixed").hide();
$(".fixed[id='" + interview.getValue("scholarship_award", "scholarship", control.instance) + "']").html("<h6>Name : " + interview.getValue("scholarship_award", "scholarship", control.instance) + "</h6>");
$(".fixed[id='" + interview.getValue("scholarship_award", "scholarship", control.instance) + "']").append("<h6>Overview : " + interview.getValue("scholarship_overview", "scholarship", control.instance) + "</h6>");
$(".fixed[id='" + interview.getValue("scholarship_award", "scholarship", control.instance) + "']").append("<h6><b>Renewable</b>: " + interview.getValue("scholarship_renewable", "scholarship", control.instance) + "</h6>");
$(".fixed[id='" + interview.getValue("scholarship_award", "scholarship", control.instance) + "']").append("<h6><b>Maximum Value</b>: " + interview.getValue("scholarship_deduction", "scholarship", control.instance) + "</h6>");
$(".fixed[id='" + interview.getValue("scholarship_award", "scholarship", control.instance) + "']").append("<h6><b>Eligibility</b>: " + interview.getValue("scholarship_eligibility", "scholarship", control.instance) + "</h6>");
$(".fixed[id='" + interview.getValue("scholarship_award", "scholarship", control.instance) + "']").append("<h6><b>Minimum Grade</b>: " + interview.getValue("scholarship_min_grade", "scholarship", control.instance) + "</h6>");
$(".fixed[id='" + interview.getValue("scholarship_award", "scholarship", control.instance) + "']").append("<h6><b>Contact</b>: <a href='" + interview.getValue("scholarship_contact", "scholarship", control.instance) + "' target='_blank'>SFAS Office</a></h6>");
$(".fixed[id='" + interview.getValue("scholarship_award", "scholarship", control.instance) + "']").toggle();
});

}

Here is the review of the Detail Pop-up in Oracle Policy Automation code shown above, starting with the usual check to make sure we are only working with our label and not any other label on the Screen. In lines 6 to 11 we add a new DIV (to replace the one that contained all those %substitution%s , and we populate it with only one attribute. Since that attribute is also unique, we use it as a handy way to populate the HTML id attribute.

In lines 13 to 18 we create a second, hidden DIV that uses the fixed class shown above.

In lines 20 to 29 we set up the click event so that the user can click on the label and the hidden text will be revealed. The code preview (I notice) has eaten the ending part of the line, so use the PDF version instead. Notice the use of getValue, with the entity name and the instance, to ensure that we create a DIV with a unique name and unique content. The content will be toggled (hidden or shown) when you click on it.

Finally the unmount is very standard, cleaning up our various pieces by removing them.

if (control.getProperty("name") == "xLabel") {
$(".area").remove();
$(".fixed").remove();
}

The end result looks like this, before the click:

Detail Pop-up in Oracle Policy Automation 3And after the click:

Detail Pop-up in Oracle Policy Automation 4

Our¬†Detail Pop-up in Oracle Policy Automation prototype gives the user the information they need when they need it. Of course it can be extended and transformed into something much less ugly, but this is a good start. You can find the PDF in the Shop, it’s free!

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.

/**
* 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 (i = 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 (i = 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.

Custom Entity Container JavaScript Extension Example #3

Custom Entity Container JavaScript Extension Example #3

By now most of you will have realised that as far as JavaScript goes, I am a bit of a generalist. As one wise person once put it “the kind of person who can code themselves into a mess but not out of one”. I learn by exploring and doing. I’ve been “doing” for a long time (I started with a ZX 81 and pretty much kept mucking about from there). My first ever big IT project was replacing IBM 5520 word processors with Windows 3, Word and a custom application written using Visual Basic.¬† I get kind of obsessive about understanding the “big picture” without necessarily wanting to have every detail. And so it is with¬†Custom Entity Container JavaScript Extension Example #3.

All that to explain what I have mentioned before : everything in relation to JavaScript which I offer to you here is purely for entertainment or educational purposes : many times I have to sketch out a need or specification, and what you see on this blog relating to Oracle Policy Automation JavaScript extensions is just the results of some head-scratching or an idea that I have needed to show to someone more technical than myself to be “tidied up” (a.k.a professionalized).

The reason I mention it is because I often work in Siebel CRM (visit www.siebelhub.com the other site in this family) and JavaScript is a big part of moving forward with Siebel too. So I get to mix and match. Today I found myself looking at the two previous incarnations of the¬†Custom Entity Container JavaScript Extension Example #3 (#1, #2) and thinking “this looks like a List Applet in Siebel”. So I decided to place the layout of the custom entity list in the hands of jQuery and jsGrid. Siebel CRM actually uses jqGrid but I needed something very lightweight for this example requirement, so jsGrid was a better choice. Of course I needed minified jQuery as well.

My goal is to make this a fairly simple routine to present instances of an inferred entity. So the code for the jsGrid looks very minimalist. It basically takes the for..each loop and extracts the two attributes from the array created in Custom Entity Container JavaScript Extension Example #2, and then passes that to jsGrid as a flattened dataset without the attribute child nodes. I also set up the grid to only have two columns, and no editing (since this is an inferred entity). I set the page size and the size of the actual space taken up by the entire list:

Custom Entity Container JavaScript Extension Example #3

  1. The loop creates a flattened data structure just right for jsGrid
  2. The data is passed to the jsGrid
  3. The column headers are sized appropriately

The end result is rather nice, smooth scrolling (not in the Debugger, only in Ctrl+F5 debugging in a modern browser).

Custom Entity Container JavaScript Extension Example #3

 

Now that’s what I call a list! Using the jsGrid library gives me (and the reader) the added bonus of scrolling¬†or jumping using the paging links at the bottom of the list. Cool!

As ever this is available from the OPA Hub Shop, look out for Custom Entity Container JavaScript Extension Example #3 in the product list.

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