Welcome to the OPA Hub!


Category Archives: JavaScript Extension

Table Headers Tabular Layout Trick 7

Table Headers : Tabular Layout Trick

Table Headers : Tabular Layout Trick

There is always much discussion when users first discover the Interview tab. Let’s be honest – not all of the comments are exactly positive. It all feels a bit, well, basic.

There are a number of things that catch you out at first (and indeed, later). So let’s take a moment to study tabular layouts and a common issue.

For this example I’m going to use the same project (Credit and Visa Cards) as the previous post, since that gives us two entities to work with.

Tabular Layout

Let’s consider that you want to display both entities using tabular layout. You create a Screen and set them both to tabular display. But let’s assume that you want to display the Visa Card with a couple of specifics. You want to include the provider of the credit card. So let’s set that up as a Value List and use an attribute on the Credit Card, and infer it on the Visa Card:

Table Headers Tabular Layout Trick 1So, with that now done, we want to display the Visa Card provider in the Entity Collect (as it is an inferred entity, we cannot use an Entity Collect). But we want to display it as a label as you can see in this screenshot (we added a name to the attribute as you saw in step one so we can reference it in our Screen:

Table Headers Tabular Layout Trick 2Notice how we added a label and used that to display the text of the provider? Using a label ensures three things

  1. It is read-only
  2. If the user is tabbing from input to input, the cursor will not get stuck in that field
  3. It doesn’t look like a read-only input, just a label (which is what we want).

But the downside is that the label does not have a table header in that column, since the Interview designer only adds those for Inputs:

Table Headers Tabular Layout Trick 4

I find it a shame that we cannot put table headers in this “tabular” column, since in HTML a table should have column headers. In fact if we take a moment to inspect this table in the browser, we note that annoying, there is a table header in the table:

Table Headers Tabular Layout Trick 5

So, we need to get that table header populated with our chosen text. But how shall we do it? We don’t want to create an Entity Container extension, since that would mean we have to do the whole thing from top to bottom. So we only want a little tiny change. We have a couple of choices.

  1. Create a Style Extension for the Entity Collect
  2. Create a Label Extension for stealth modification

Let’s try the first option, since it reveals some interesting facts about Styling Extensions. Firstly, get ready by doing the following; change the text associated with your entity in the Interview by double-clicking where the rectangle is, and entering whatever text you would like to display in the missing header.

Then add a compound Styling Extension to your Project. Tabular Containers allow for nested styling, like this:

OraclePolicyAutomation.AddExtension({
style: {
tabularContainer: function (control) {
if (control.getProperty("name") === "xContainer") {
style: {
headerRow:
YOUR STUFF GOES HERE
 
}
}
}
 
}
});

Notice the “headerRow” is a child of “tabularContainer”. And notice the line that says YOUR STUFF GOES HERE. Now for an interesting fact about Styling Extensions. They behave, to a reasonable degree, just like Control Extensions. They are really one and the same thing – the main difference of course is the handlers that are exposed in Control and Interview Extensions.

Drop jQuery into your resources folder, and then replace YOUR STUFF GOES HERE with the following line:

$("#opaCtl4th0").text(control.getCaption());

Of course, the jQuery selector may be different for you but it is easy to find the “header” I illustrated in the previous screenshots. Open your Project in a real Browser (Ctrl+F5) for debugging and take a look at the results:

Final Header Result

Our Styling Extension has added the text to the header, drawing it from the Interview Screen Entity Container definition, and we have it where we want it. Of course, you could style it as well.

But it goes to show that Styling Extensions are really not very different to Control Extensions!

Back to Basics : Extensions #2

Back to Basics : Extensions #2

Following on from the previous post, we delve more deeply into the JavaScript Extensions world.

Interview Execution in a Browser

So how does an Interview Extension work? Let’s begin with some basic information about how your Oracle Policy Automation Interview runs in your Browser. If you happened to be viewing an Interview right now, and you were to open the Console (F12 in Google Chrome, or Microsoft Edge. Check your Browser documentation for the equivalent key or menu option), you might be able to view something like the following screenshot. Check the steps under the image as you may need to refer to them in your own case.

Extensions

In this screenshot I have launched a Project using the Debugger. Remember that if you hold down F5 while clicking the Debug button, you will open the Interview in the Debugger and in your default Browser.

  1. Your web server may of course be a different address.
  2. The web-determinations folder will not have the same numeric suffix as in this screenshot, indeed will most likely not have a suffix at all. This is a feature of the Debugging session.
  3. The js file is most likely in the staticresource folder, however if you are in a more integrated environment it may be in a different subfolder, or a different folder altogether. But it will be present.
  4. The contents of the js file can be read more easily by selecting (in Google Chrome in this case) the option to pretty print the code.

Interviews.js

This file is the foundation of the Interview experience provided by Oracle Policy Automation. It contains all the code necessary to make the user experience function correctly. Inside this file, however, there is a built-in capacity to accept extensions that change the behaviour of the Interview.

In your Console, search in the file for the following text – “customLabel:” (without the quotation marks, but with the colon). You should find one instance of that text, as shown in the screenshot below.

Extensions

  1. Search for the text
  2. Find the text in the file.

Take a moment to perform a second search in the same file, for the text shown below. Use the screenshot as your guide.

  1. Ensure you are looking at interviews.js
  2. Search for this text
  3. View the style definition for textInputStyle.

Accepted Extension Types

Notice in the first example, that customLabel is only one of a series of items in the first list. These are the recognized types of Control extension that we, as Oracle Policy Automation Project workers, are permitted to develop.

In the second search you found that there was a style defined for controls called textInputs. Although not quite as obvious perhaps as the first example, an Oracle Policy Automation Project might want to override the Style(s) used in a Project, in order to comply with corporate guidelines for example: and this system will help us do just that. Style Extensions use keywords in the same way to indicate which elements you wish to style.

About Extensions

It is not important at this stage to understand how these extensions are created or used. It is, however fundamentally important to understand that you will be extending Oracle Policy Automation Interviews by adding one or more of these acceptable extensions, and that they will be run in the browser in the same way as the standard JavaScript is already. These interviews can then be better adapted to your IT environment. As an example, read how Styling Extensions enable integration visually with Oracle Content & Experience Cloud.

More on this subject, with some worked examples, shortly.

Back to Basics – What are Extensions?

Back to Basics – What are Extensions?

Styling Extensions

Introduced in Oracle Policy Automation November 2016 release, a styling extension allows a designer to create styling rules and logic using JavaScript and Cascading Style Sheets. These files are contained within the deployed Oracle Policy Automation project, and should be used only if you have exhausted all of the built in Styling possibilities offered as standard in the Interview tab, Styles dialog.

Control Extensions

A Control represents a single item placed on a Screen during the design of an Interview. Typically these controls might be used by the user to enter data (for example, a Control with a Calendar attached to enter the date of birth of the applicant) or to organize data on the Screen (for example, a Container that allows for a better layout of several other items). At run-time, each Control is translated into HTML and associated JavaScript code. Introduced initially at the same time as the styling extensions mentioned in the previous paragraph, although they have grown more numerous over time.

Control Extensions Example

They are generally referred to by a name such as customLabel or customContainer which identifies the type. In a later post you will learn the origin of these names.

Evolution

Interview behavior Extensions have gradually gained in functionality, and also in terms of which Control types are available for customization. There are different kinds of extension for different needs.

Scope

If Controls represent items grouped on a Screen (and therefore on a page, as far as most Interview users are concerned), with Extensions you can also customize the real estate around the pages – whether it be the navigation styling, of a custom footer or header, or even a completely new navigation system. So extensions can be for a single Control, or for a complete Navigation system.

Naming Convention

Technically speaking, all of the examples mentioned above are called Interview Extensions in the official documentation, and they are divided into styling extensions and control extensions as you will discover. You can find the reference material at the following URL at the time of writing .

Architecture

Before looking at the different types available to us, it pays to review the architecture of the Interview and gain understanding as to how they function within it. Coming next…

Stunning Infographics with Oracle Policy Automation and Easelly #1

Stunning Infographics with Oracle Policy Automation and Easelly

Oracle Policy Automation and Easelly : Once in a while I come across something in the Oracle Policy Automation universe that just makes me go “Wow!!!”. And today’s post is like that. I was working on a demonstration the other day of a fairly familiar concept : a  retail audit or “store visit”.

Visits to retailers, whatever product you are selling, are pretty often rushed affairs, probably squeezed in a back room or just hunkering down on the corner of a work surface for a few minutes. It’s in the middle of the day, there are customers coming in and in spite of cordial relations, the retailer would really much rather be doing their job. And chances are, there are another 3 or 4 people coming in later to do the same thing as you.

Oracle Policy Automation is a real benefit in situations like this – you can perform what-ifs, demonstrate how the retailer is performing, simulate new scenarios to encourage and engage with them.

But when you’re fighting to get focus, and the room is airless and hot, you really need to be able to bring your A game. I’ve watched some amazing people doing this job, and they really impress how much they pack into the short time they are on the premises. But when they are gone, their message sometimes gets forgotten, mis-remembered or filed away. I started thinking how  Oracle Policy Automation could really leave a mark.

My first thoughts were to Oracle BI Publisher for a take-away or handout, and there are some excellent demonstrations out there, including in the Sample Projects (Healthy Eating). But I was still left wondering as to what might be a better solution. BI Publisher is in this case let down by it’s basic format and premise – Word. It is too linear, static and inflexible. You don’t use Word to create the most modern, web-friendly and engaging support materials. Then I had a bit of a brainwave.

Stunning Infographics with Oracle Policy Automation and Easelly

For a number of years I have been a user of Easelly – an online Infographics design platform. I’ve had great fun with it, using it to show results of surveys and I use their templates quite a lot when I need a framework for a new graphic. I’m not a designer, but I’m pleased with the easy learning curve and the results.

Recently Easelly have started offering a REST API to their “pro users”. And this allows for the generation of PDF or PNG content on the fly. For example, you have data in Oracle Policy Automation and you insert it on the fly into your best infographic. Send it by mail, print it before you visit – it doesn’t matter how you do it but you will definitely want to get this in front of your customer. Pro accoun

Oracle Policy Automation and Easelly

ts are not expensive – $24 US Dollar a year.

Here is an example, with an infographic designed by Easelly. You can see it on the right hand side of the page. I think you would agree that something like that could be done in BI Publisher, but not without a very robust skill set. With Easelly however, a tool built for infographics, it is considerably simpler. Please note : I’ve used the Easelly platform since it was launched, and I like to think I know BI Publisher quite well. So I can compare the two fairly objectively – and for modern infographics, the learning curve and capabilities of Easelly mean I would choose it every time.

Custom Control and REST API Integration

And here is the video that shows it being generated live in Oracle Policy Automation. That’s what I can a showstopper graphic. The great thing is, with the Oracle Policy Automation Custom Control concept , adding this to the Interview is a matter of minutes.

The data, the labels – all that is coming from Oracle Policy Automation much in the same way as for BI Publisher and Forms. Only way better looking!  In the next article in this series I’ll show you how to integrate Oracle Policy Automation with Easelly using, in this case, a PHP-based Custom Label Control.

Importing Data into an Interview : Excel Example

Importing Data into an Interview : Excel Example

Readers will remember a while ago I explained briefly how to use Microsoft Excel to act as a Connection Datasource – in this overview article, followed by this one in a little more detail. Now we look at another challenge : Importing Data into an Interview.

Well, here comes another example of the ubiquitous nature of Microsoft Excel. The customer requirement was as follows:

Using a simple mechanism, let the user upload an existing Excel spreadsheet into the Interview. Parse the spreadsheet, read the data in it, create corresponding rows in an Entity. Let the user review the data but do not require any new data entry. There may be up to 250 rows of data to import. So how do you go about about Importing Data into an Interview?

So how can we face up to a challenge like that? We need:

  • An upload that isn’t a standard File Upload Group
  • A parsing mechanism to read Excel and extract the data in a given tab, or wherever
  • A custom Entity Collect to handle the data import / create the rows in a Screen

The shopping list above isn’t that long.

The File Upload is essentially an HTML 5 component to let the user select a file on their computer. We cannot access an arbitrary local path from JavaScript, so we need the user to point to the file they want to upload.

There are a number of JavaScript-based Excel parsers, including the excellent SheetJS js-xlsx which we used. It is capable of converting to and from Excel, which is no easy task when you consider that an Excel file is basically a Zip file with a bunch of complicated stuff inside it. The library can convert to HTML, CSV and magically (for our requirement) JSON. Awesome!

Plus, in a previous post we’ve also looked at the (large amount of) work required to build a Custom Entity Collect Extension. In fact when I was writing that article I was thinking, for goodness sake Richard, when do you think you will actually need to go to the trouble of building that Entity Collect Extension? Well, I’ve finally found a use for it – Importing Data into an Interview!

We need an Entity Collect Extension since we need some way of getting the Excel data into the Entity Collect, which ultimately means we need to do some work behind the scenes between the import of the data and the display of the Entity Collect. We need to rewire the Entity Collect temporarily so that it sucks our Excel data up, before we show it to the user so they can examine the results.

For the purposes of a raw demo, I unplugged all the other functionality (delete buttons, add buttons, etc.) and just concentrated on getting the data into the Entity Collect. There are how ever a few caveats. Once you get into the larger imports, at least in the Debugger, you can expect to see “concurrent record editing” errors. I’m trying to find out what the limit is exactly. But up to a few hundred I think it’s OK.

So let’s look at the items in turn.

File Upload and Data Load

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
{
					//console.log("Starting customInput Mount");
					var div = document.createElement("input");
					div.id = "myFile";
					div.type = "File";
					//div.value = control.getValue();
					el.appendChild(div);
 
					function handleFile(e) {
						var files = e.target.files,
						f = files[0];
						var reader = new FileReader();
						reader.onload = function (e) {
							var data = new Uint8Array(e.target.result);
							//console.log("In Change");
							var workbook = XLSX.read(data, {
									type: 'array'
								});
 
							worksheet = workbook.Sheets["YOURWORKSHEET"];
							jsonoutput = XLSX.utils.sheet_to_json(worksheet, {
						raw: true, header : 1
							});
						//console.log("Read " + jsonoutput );
						};
 
						reader.readAsArrayBuffer(f);	
						var completepath = $(':file').val();
							//console.log(completepath);
						interview.setInputValue("rest_filenameandpath", completepath);
					}
 
 
				var filedialog = document.getElementById("myFile");
					filedialog.addEventListener('change', handleFile, false);
 
					var completepath = $(':file').val();
						control.setValue(completepath);
						//console.log("Hello " + completepath);
						//console.log("Ending customInput Mount");
				}

Assuming you have a custom Input framework as your starting point, the above code will be in the mount. This will build an HTML5 file upload control, and attach an event handler. The code regarding Excel depends upon xlsx.full.min.js being in the resources directory. But that’s it. You’ve loaded the Excel file into a JSON object.

Entity Collect

The next step is to include a Custom Entity Collect in your project, and use the jsonoutput object (which you just created from the imported file above) in the mount of the Entity Collect to load the JSON into the Entity Collect. The following is an extract from the mount code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var numEntities = Object.size(jsonoutput);
					//console.log(numEntities);
					// Remove header row if the file has one
					jsonoutput.shift();
					// load records into the Entity Collect
 
					if (control.getRows() == 0) {
						for (j = 0; j < numEntities - 1; j++) {
							control.addNewRow();
							var mycurrentrecords = control.getRows();
							mycurrentrecords[j][0].setValue(jsonoutput[j][0]);
							mycurrentrecords[j][1].setValue(jsonoutput[j][1]);
							mycurrentrecords[j][2].setValue(jsonoutput[j][2]);
							mycurrentrecords[j][3].setValue(jsonoutput[j][3])
drawrows();

The end result is something like this:

Importing Data into an Interview

The File is loaded into the Entity Collect, and the contents displayed to the user. In my case I unhooked all the code related to modification (the onchange stuff from the original idea) and removed the add / delete buttons, since it was designed to just allow the user to see the loaded result, not modify it.

Importing Data into an Interview

If you want to have a look at the project, just download the very basic example here.

Business Process : Force PDF Download in OPA

Business Process : Force PDF Download in OPA

After last week’s business case put forward about Calendar Blackout dates, this week we can thank Arnaud D and Sylvie A from Switzerland for their excellent use case. This week we will be discussing the idea of letting a user progress to the end of an Interview, only if they have clicked to download a PDF file. So, can we Force PDF Download in OPA?

There is not really a technically feasible way to prove that a user actually read a PDF. But if we can force them to download it, at least we know they have gotten that far!

The business case is easily applied to many industries, for example where terms and conditions or a contract are generated and tacit approval needed before the user continues. Or, more simply, you need some way to encourage people to read the BI Publisher thing you spent all those weeks developing.

It is also a good opportunity for us to investigate the new custom Button extensions available in Oracle Policy Automation 19A. So this won’t work in 18D or earlier. The approach we are going to take will involve two different extensions. Let’s go!

Input Extension

The input extension is needed because we wish to capture the value of a Boolean attribute for our demonstration. Navigating forwards will only be allowed if this Boolean is true.

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
/*  Generated by the OPA Hub Website 29/03/2019 19:35
Educational Example of Custom Input Extension for Oracle Policy Automation
I will remember this is for demonstration purposes only.
 */
OraclePolicyAutomation.AddExtension({
	fullCustomInput: function (control, interview) {
		if (control.getProperty("name") == "xInput") {
			return {
				mount: function (el) {
					console.log("Starting customInput Mount");
					var div = document.createElement("input");
					div.id = "myInput";
					div.value = interview.getValue("my_flag");
div.setAttribute("style", "visibility: hidden");
el.appendChild(div);
console.log("Ending customInput Mount");
$(".opa-document").click(function(){
console.log("Clicked Link");
control.setValue(true);
});
},
update: function (el) {
console.log("Starting customInput Update");
 
console.log("Ending customInput Update");
},
validate: function (el) {
console.log("Starting customInput Validate");
 
console.log("Ending customInput Validate");
},
unmount: function (el) {
if (control.getProperty("name") == "xInput") {
console.log("Starting customInput UnMount");
 
interview.setInputValue("my_flag", $("#myInput").val());
var myInput = document.getElementById("myInput");
myInput.parentNode.removeChild(myInput);
console.log("Ending customInput UnMount");
}
}
}
}
}
})

So what’s going on here? Basically we are putting a click event on a PDF download. Notice line 17 : this adds a click event.  So as soon as the custom Input is loaded, an event is added to another control using jQuery. When the link is clicked, we update our flag to true. We use the style selector “.opa-document” to find the link. If you have more than one link, you will need a more precise method of finding it. Other than that, the custom input itself is invisible, and simply reads the current value of the flag into the control.

Button Extension

The other extension, for a nextButton, uses jQuery to display a dialog when you try and leave the screen before clicking on the link (the flag is false). Otherwise it lets you navigate without issues.

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
OraclePolicyAutomation.AddExtension({
	customNextButton: function (interview) {
		let button,
		caption;
 
		return {
			mount: function (el) {
				const screen = interview.currentScreen();
 
				button = document.createElement("div");
				button.setAttribute("title", "Print Your PDF First");
				button.setAttribute("class", "opa-back");
				button.setAttribute("role", "button");
				button.setAttribute("style", "	text-overflow: ellipsis; white-space: nowrap; line-height: 1; cursor: pointer; padding: 0.7em 1.2em; border: none; text-decoration: none; -webkit-appearance: none; flex: 0 0 auto; text-align: center; color: rgb(255, 255, 255); border-radius: 6px; background: rgb(20, 116, 191); font-size: 16px; font-style: normal; font-weight: normal; margin-left: 6px; visibility: visible; outline: none;");
 
				caption = document.createTextNode(screen.getNextCaption());
				button.appendChild(caption);
 
				var dialog = document.createElement("div");
				dialog.setAttribute("id", "dialog");
				dialog.setAttribute("title", "Warning");
 
				var dialogtext = "Please download your document first.";
				el.appendChild(dialog);
 
 
				button.onclick = function (evt) {
					evt.preventDefault();
					if (interview.getValue("my_flag") == true) {
						interview.submit();
					} else {
						$("#dialog").dialog();
						$("#dialog").text(dialogtext);
						console.log("Not Yet ");
						console.log("Flag Value is " + $("#myInput").val());
					}
				}
 
				el.appendChild(button);
			},
			update: function (el) {
				const screen = interview.currentScreen();
 
				caption.textContent = screen.getNextCaption();
 
				if (screen.hasNextButton())
					button.removeAttribute("disabled");
				else
					button.setAttribute("disabled", "disabled");
			},
			unmount: function (el) {}
		}
	}
});

So what’s happening? The early part of the mount is simply painting a nice button on the screen. We could of course not display the button at all, but the User Experience might be better if we display it always, just prohibit using it in certain circumstances. Starting around line 19 we create the dialog and make it ready for use.

Line 27 includes the button click routine which either displays the dialog, complete with a message, or just lets you navigate as normal.

The other lines in the unmount are just taken from the example in the online help, where if this is the last Screen, no next button is available. But our business case is based on it not being the last.

Force PDF Download : Animated GIF

In the animated GIF above, you can see what it looks like.

The Project Zip is in the shop. Have fun!

Dynamic Charts in Container Controls Example Image

Dynamic Charts in Container Controls

Dynamic Charts in Container Controls

As many of you know, we try to provide JavaScript Extension examples for you to experiment with in your own Projects. A while ago, we looked at an interesting question about using Dynamic Charts in Container Controls – basically to display a chart (which is the sort of thing it was designed for),  but to also include the capability to update the chart live as the data is edited on the same Screen. A quick animation will give you the idea:

The example is an interesting one, on account of it allowing us to talk about the difference between viewing data that exists already, versus using data that has just been created.

To keep it simple, we can think of server-side data and client-side data. Server-side data, for example used in Container Controls, represents the data that has been collected in a previous Screen. It’s already been seen by the determination server.

Client-side data is information that has been entered on the current Screen before the Next button has been clicked. So as far as the determination process is concerned it is “not quite there yet”.

The same concepts exist in the world of JavaScript extensions. For example, consider the difference between these two keys : mount and update from the updated  Container Control example that is available here.

 return {
                mount: function(el) {
                    console.log("Starting customContainer Mount");
                    if (document.readyState == 'complete') {
                        var rows = [];
                        for (i = 0; i < entities.length; i++) {
                            entity = entities[i];
                            if (entity.entityId === "payment") {
                                break;
                            }
                        }
                        rows = entity.instances;
                        var myFlatList = [];
                        var myObject;
                        var width = 300,
                            height = 300,
                            radius = 150,
                            color = d3.scaleOrdinal(d3.schemeCategory10);
                        var size = rows.length;
                        for (i = 1; i < size + 1; i++) {
                            myObject = new Object();
                            myObject.label = control._source.screen.serverState.payment['the payment' + i].payment;
                            myObject.value = control._source.screen.serverState.payment['the payment' + i].amount;
                            myFlatList.push(myObject);
                        }
                        data = myFlatList;
                        var vis = d3.select(el);
                        vis.select('svg').remove();
                        var vis = d3.select(el)
                            .append('svg')
                            .data([data])
                            .attr('width', width)
                            .attr('height', height)
                            .append('g')
                            .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
                        var arc = d3.arc().outerRadius(radius)
                            .innerRadius(0);
                        var pie = d3.pie()
                            .value(function(d) {
                                return d.value;
                            });
                        var arcs = vis.selectAll('g.slice')
                            .data(pie)
                            .enter()
                            .append('svg:g')
                            .attr('class', 'slice');
                        arcs.append('svg:path')
                            .attr('fill', function(d, i) {
                                return color(i);
                            })
                            .attr("d", arc);
                        arcs.append('svg:text')
                            .attr('transform', function(d) {
                                d.innerRadius = 0;
                                d.outerRadius = radius;
                                return "translate(" + arc.centroid(d) + ")";
                            })
                            .attr('text-anchor', 'middle')
                            .text(function(d, i) {
                                return data[i].label;
                            });
                        console.log("Ending customContainer Update");
                    }
                    console.log("Ending customContainer Mount");
                },
                update: function(el) {
                    console.log("Starting customContainer Update");
                    var myFlatList = [];
                    var myObject;
                    entity = control._source.publicInterface._source.screen.clientState.payment;
                    var rows = [];
                    rows = entity;
                    for (var key in entity) {
                        if (!rows.hasOwnProperty(key)) continue;
                        var obj = rows[key];
                        for (var prop in obj) {
                            if (!obj.hasOwnProperty(prop)) continue;
                            myObject = new Object();
                            myObject.label = obj.payment;
                            myObject.value = obj.amount;
                        }
                        if (myObject.label != "") {
                            myFlatList.push(myObject);
                        }
                    }
                    var width = 300,
                        height = 300,
                        radius = 150,
                        color = d3.scaleOrdinal(d3.schemeCategory10);
                    data = myFlatList;
                    var vis = d3.select(el);
                    vis.select('svg').remove();
                    var vis = d3.select(el)
                        .append('svg')
                        .data([data])
                        .attr('width', width)
                        .attr('height', height)
                        .append('g')
                        .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
                    var arc = d3.arc().outerRadius(radius)
                        .innerRadius(0);
                    var pie = d3.pie()
                        .value(function(d) {
                            return d.value;
                        });
                    var arcs = vis.selectAll('g.slice')
                        .data(pie)
                        .enter()
                        .append('svg:g')
                        .attr('class', 'slice');
                    arcs.append('svg:path')
                        .attr('fill', function(d, i) {
                            return color(i);
                        })
                        .attr("d", arc);
                    arcs.append('svg:text')
                        .attr('transform', function(d) {
                            d.innerRadius = 0;
                            d.outerRadius = radius;
                            return "translate(" + arc.centroid(d) + ")";
                        })
                        .attr('text-anchor', 'middle')
                        .text(function(d, i) {
                            return data[i].label;
                        });
                    console.log("Ending customContainer Update");
                },

Notice that the mount key uses the server-side data : when we draw the Control, we can only draw what is already available to us. But in the update, we want to take into account the new data entered by the user, so we look for the client-side data. So now we can be more specific : you can access clientstate and serverstate information which can help you work with previously entered or just-entered dynamic information.

Hope you have fun building your Dynamic Charts in Container Controls! We’ve updated the Shop example to include the complete Zip File.

Dynamic Charts in Container Controls Example Image

Entity Collect Extension

Entity Collect Extension

Some time ago I wrote about Entity Collect Extension and the challenges of writing a demonstration piece of code. The challenges of Entity Collect Extension are pretty well known, but here is a run down of the most important one:

  • You must build the container and the contents,  and manage them

That means, that if you build an Entity Collect Extension, you cannot use other control extensions inside it :- you must code the entire contents yourself, so you would be looking at

  • Handling all different data types of attribute
  • Handling all the basic events of these attributes
  • Managing instance creation and deletion
  • Handling styling options and look and feel

So when you look at this shopping list, it can be quite daunting. Even so, I said to myself, if Oracle provides such a functionality, then somebody somewhere is going to use it. And so the idea came to create a demonstration Entity Collection Extension. When I started working on it I really did not have much time to look at it, so I wrote a couple of articles about my experiences and left it at that.

Recently I have been revisiting the concept again, and have found  time to work on it a little bit more. I added it to the OPA Hub Shop (on the strict understanding, as usual, that it is completely for educational and amusement purposes only).

That statement is particularly important in this case. I only decided to do this because I am fascinated by other people’s JavaScript frameworks. I find it useful to know what goes on underneath the glossy Oracle Policy Modeling HTML output. And my example is basic to the point of being little more than a sandbox (oh, and by the way, it still has a lot of issues – especially when you are running it in the Debugger rather than the Browser).

Entity Collect Extension in JavaScript

This version tries to cover off the 4 shopping list items shown above, and adds a couple of interesting ideas

  • Dynamic Delete Button (remove the button based on an attribute value). This is one request I have seen many times – the ability to forbid deleting in certain circumstances.
  • Handling Date Time and Value Lists for display and data entry.

I still have to find time to investigate :

  • Handling Inferred attributes that need to be refreshed as you are entering instance attributes.

I’ve just about had enough of this now so I am going to leave it for a while.  It has started to make my head spin.  Nonetheless it is an interesting exercise and helped make clear how cool the out of the box JavaScript really is.

The silent movie below shows where I’m at. All that work, for this rather dull looking thing. Sometimes there is not much to show for efforts. Of course, if I was a real programmer, I would be doing all of this in a much more efficient way (avoiding complete page refreshes at every change and so on) but I found this exercise very interesting. Certainly it gives me a better understanding of the scale of such a task.

Have a nice day!

Showing a Loading Image During Entity Creation

Showing a Loading Image During Entity Creation

When a user is entering some information into Entity attributes, it is entirely possible that one of those entity attributes may take its information from a Search extension. For example, you are entering instances of the Person entity and each Person has a location, so you want to select the location using a Search extension.

The Search, given that it is perhaps an Ajax call, could take some time. So you want to signal to the user that there is nothing to worry about, but they need to wait. Typically this is done through some sort of icon or image being displayed, much in the style of the Windows egg-timer or similar. This probably will also need a CSS style rule or two, in order to make it a bit funky.

We want to make sure that this is displayed in the right place, even if the user is creating several instances of the same entity. I mean that the icon should be displayed in the correct area of the screen, especially if you have instances whose screen layout takes up some space.

Anyway as always a picture is worth a thousand words. Here is the instance collection form:

Showing a Loading Image During Entity CreationWhen you have several on the screen, it might look like this:

Showing a Loading Image During Entity Creation

The Destination attribute is a Search extension that helps the user search for a Train Station in the United Kingdom. It take a few seconds for the search to happen.

So our timer needs to be shown in the right place whenever the user is searching. It needs to be instance A or B for example, depending on the instance the user is working on.

Showing a Loading Image During Entity Creation

In the example above the user has typed the Search criteria. The loader is shown in the centre of the instance while the search is happening. So we are Showing a Loading Image During Entity Creation.

Showing a Loading Image During Entity Creation

When the search data is returned, as in the example above, the user should no longer see the loader and the operation can continue as normal.

If the user moves to another instance, then the process should start again but the loader should be instance-aware and show in the correct place so as not to confuse.

Showing a Loading Image During Entity CreationTo do this we can use the Search extension, and add a little bit of extra code to

  • Check to see if we have already displayed the special icon
  •  If we have not, create it, center it on the instance we are working on, show it and make the Search
  • If the icon already exists, move it to the correct instance and show it then make the Search
  • When the search data is returned, hide the icon until the next time.

This example will work with non-tabular forms. I’ll be back with a second post investigating them in a couple of days.

You can find this simple example (with all the usual caveats and reminders that this is just for fun) in the OPA Hub Shop.  The official documentation is here, as always. Thanks to Shankar for the great example of Showing a Loading Image During Entity Creation!

Siebel CRM as a custom Search source

Siebel CRM as a custom Search source

This post is inspired by a conversation I’ve been having over the last few days with another OPA consultant (thanks Prashil!) . Although as it turned out, the requirement had nothing to do with Siebel (that will teach me to not assume anything!), the concept of making REST calls to a CRM or CRM-like data source has been on my mind. But how can I use Siebel CRM as a custom Search source?

In this example, we will use Siebel 2018 as the source of a custom Search box. Along the way we will see how the Siebel CRM REST API sends us data and what we can do with it. At the same time, we will indulge in some trickery to not show everything we have in our Search results to the user. It will mean we create two JavaScript extensions, a Search and a Full Input.

Firstly, the Siebel 2018 instance in question is using the standard REST API, and it is the standard Component called Account which we will be querying. In many public services, Account is used to store partner organizations, external suppliers and so on. It is a very common component. The base URL for the REST calls in my case will be something like the following

https://XXXX:9001/siebel/v1.0/data/Account/Account/?fields=Name,Location&?ChildLinks=None&searchspec=([Name] LIKE '"

There are three things to note here.

Firstly I am only interested in two fields (the third field I need, Id, is actually going to be included automatically anyway).

Secondly I am using a Search Specification with Siebel standard syntax to search using the Name of the Account. So if I type “ABC”, it will look for Accounts starting with ABC.

And finally, the URL string needs to be capped with the following to finish it “*’)” so that there is a wildcard search for ABC Inc, ABC Corp. and so on. The URL also includes an argument regarding child links in the output to reduce volume.

Siebel CRM as a custom Search source

The information returned in a standard output will consist of a series of data.items. So we can iterate over the data.items and for each item, we can get the Item.Name, Item.Location and Item.Id. Since Siebel paginates its output, we are actually only going to get a maximum of ten records unless we add another URL argument and make further calls to Siebel (to get page 2, page 3 and so on). But for a query result, a ceiling of 10 is pretty good for Siebel CRM as a custom Search source.

As a side note, this example – you have noticed – is using the Siebel REST API in its unvarnished, naked form. Obviously you would do well to control / restrict access and authenticate consumers in real life. We’ve seen in previous examples that we can pass headers in our Ajax call when Oracle Policy Automation asks for data from a Search source.

In the Commit callback we will update three attributes with the values of the Siebel Fields I just mentioned. Now, at the moment, if you want to update an Oracle Policy Automation Attribute in a JavaScript extension, that attribute needs to be on the active Screen for it to work. So what happens if you don’t want to show that value to the end user, but you still want to capture it for future use in your rules?

One approach (which I am using for demonstration purposes only you understand, as usual) will be to create an invisible Input, so that we can add our data to the Screen without the user seeing it. To do this you might use a fullCustomInput extension. This is different from the customInput, because it manages the Question Text and the Input control. So we can place it on our page and format the whole thing – even perhaps make it disappear.

Siebel CRM as a custom Search sourceThe two examples working together are shown in the video below, and I have added a more appropriate fullCustomInput example, as well as the Siebel customSearch example, to the OPA Hub Shop. I am also in the process of adding them to the Template Generator, so you will be able to generate a fullCustomInput and a sample Siebel customSearch yourself as well.

Have fun with Siebel CRM as a custom Search source, and as always the official documentation is your guide.