Welcome to the OPA Hub!

Category Archives: JavaScript Extension

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 EExcel 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 anyone is interested I can share the project. Have a great day!

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

Hi There!


This content is accessible only to logged in users of the OPA Hub Website.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Entity Collect Extension

Hi There!


This content is accessible only to logged in users of the OPA Hub Website.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Showing a Loading Image During Entity Creation

Hi There!


This content is accessible only to logged in users of the OPA Hub Website.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Siebel CRM as a custom Search source

Hi There!


This content is accessible only to logged in users of the OPA Hub Website.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

What’s new in Oracle Policy Automation 18D?

Hi There!


This content is accessible only to logged in users of the OPA Hub Website.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Detail Pop-up in Oracle Policy Automation

Hi There!


This content is accessible only to logged in users of the OPA Hub Website.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

What’s New in Oracle Policy Automation 18B #2 Relationship Control Extensions

Hi There!


This content is accessible only to logged in users of the OPA Hub Website.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.

Custom Entity Collect Extension in Oracle Policy Automation #2

Hi There!


This content is accessible only to logged in users of the OPA Hub Website.

To Register takes only 10 seconds and uses LinkedIn for authentication. It does not take your contacts or use any other permission.

Once registered you can change your OPA Hub password and manage it independently of LinkedIn.

We recommend you keep different passwords for all your sites.

To register, click the Log in link in the menu at the top of your page.

Thanks, the OPA Hub Website.