Tag: Oracle Policy Modelling

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:

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
.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.

 

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
{
 
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.

1
2
3
4
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!

Oracle Policy Automation Embed Website in Interview

Oracle Policy Automation Embed Website in Interview

This request comes up quite often, at least often enough that I feel the need to mention it today. The example we are going to use is to embed the OPA Hub Website in an Oracle Policy Automation Interview. In addition we are going to pass an attribute to the website so that it performs a search for us. So, let us start our tutorial “Oracle Policy Automation Embed Website in Interview”.

Now, I am sure many of you are old enough to have spent years trying to avoid IFRAME integrations in applications : Siebel, SAP, they all do it or have done it at some point in time, and they are awful for the most part – whether it be from an accessibility, SEO, browser restriction or other perspective. So here are our goals for this mission:

  • Don’t use an IFRAME
  • Add the Website in a way that does not destroy the look and feel of the Interview
  • The Website must actually function properly

The steps to create this Project are shown below. You should be aware (and not be surprised) that this will not work well in the built-in embedded Browser in Debug Mode, so run Debug mode using Ctrl+Debug or deploy the Project to see the final results.

Oracle Policy Automation Embed Website in Interview Pre-requisites:

A New Project called “Oracle Policy Automation Embed Website in Interview” or something shorter.

Create a global attribute with the text the subject with a name of subject.

Create a new Screen to ask what is the subject. I suggest a Drop-down list with the Values “Siebel Integration, JavaScript Extensions,Service Cloud”.

Create a second Screen to display the Website.

  1. Create a label, using the name  of  the subject to display the chosen subject.
  2. Place this inside a Container
  3. Make sure you add a Property for the Container, naming the Object.

By now the Screen should look like this:

Oracle Policy Automation Embed Website in Interview Design

Now we come to the code. This is quite simple,although we will also need some CSS to make it look right. Add a JavaScript file and a CSS file to your resources folder for this Project. The explanation is after this code, which is as always provided for educational and investigative purposes only:

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
/**
 * Richard Napier The OPA Hub Website April 2018
 * Educational Example of Custom Container with a Website inside
 * I will remember this is for demonstration and educational purposes only
 */
 
OraclePolicyAutomation.AddExtension({
	customContainer: function (control,interview) {
		if (control.getProperty("name") === "xWebsite") {
 
			return {
				mount: function (el) {
					var myDiv = document.createElement("div");
					myDiv.setAttribute("id", "mySpecialDIV");
					document.body.appendChild(myDiv);
					$("#mySpecialDIV").width(900);
					$("#mySpecialDIV").height(600);
					var mySubject = interview.getValue("subject");
					$("#mySpecialDIV").html('XXXXXX'+ mySubject + '">');
				},
				update: function (el) {},
				unmount: function (el) {
					var myDiv = $("#mySpecialDIV");
					myDiv.remove();
 
				}
 
			}
		}
	}
});

Oracle Policy Automation Embed Website in Interview Code

In the code above, here are the salient points.

Lines 13 to 17 create a DIV and insert it into DOM, appending it to the body of the document.

Line 18 retrieves the value selected by the user on the previous page that is present in the Container as a label.

Line 19 is the most important one. Notice the “XXXXX”. Replace this with the website and any URL construct you need. For example, replace it with the following:

<object data="https://theopahub.com/main/?s=

The code viewer didn’t correctly display that part. Insert it exactly as shown, so that you are concatenating the URL with the user selected subject. The key point here is the use of the object tag rather than an nasty IFRAME. Thanks to Stackoverflow!

The rest of the code just tidies up when the unmount happens.

Oracle Policy Automation Embed Website in Interview CSS

The CSS is quite important here, to ensure that the embedding is seamless. Add this CSS code to your CSS file.

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
object {
    height: 100%;
    width: 100%;
}
#mySpecialDIV {
	float: left;
    margin: 0px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: #404040;
}
html
{
    border: 0px;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
}
body
{
    border: 0px;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
}

Let’s take a look at the CSS. We use styling to position the DIV, as well as styling to ensure the object tag uses all of the available DIV. Finally we use some tricks to eliminate overflowing content and remove the horizontal scrollbar.

Oracle Policy Automation Embed Website in Interview Debugging

As mentioned earlier, this may be best tested in the Browser, not in the Debug Embedded Browser, so make sure you start with Ctrl+Debug.

The first screen will be straightforward:

Oracle Policy Automation Embed Website in Interview 1

The second screen will display and if your Internet connection is slow, you may have time to witness the two stages of display:

Stage 1 : Show the styled DIV that has been added to the Screen. Of course you don’t have to use this colour, I just wanted to use it for positioning and effect.

Oracle Policy Automation Embed Website in Interview DIV

Stage 2 : The embedded Website is displayed. The embedding is seamless (nice colour scheme!).

Oracle Policy Automation Embed Website in Interview End

  1. Notice that the attribute value has been passed to the OPA Hub Website and a search has been performed for you. The site is fully functional and can be accessed from the Interview Window.

Have a nice day! (The PDF is in the OPA Hub Shop).

Guest Post : Object-Oriented Design Patterns and Oracle Policy Automation #2

Guest Post : Object-Oriented Design Patterns and Oracle Policy Automation #2

In a previous post by our guest writer Dr Jason Sender, he investigated improvements in Oracle Policy Automation rules by applying some of the principles of refactoring, and then he began to discuss Object-Oriented Design Patterns and Oracle Policy Automation, and their application in real-world contexts.

As before, this third article draws on the work and publications of Martin Fowler, which we discussed in the previous post, those of Joshua Kerievsky from his highly regarded book “Refactoring to Patterns”, and the ground-breaking work on design patterns called “Design Patterns: Elements of Reusable Object-Oriented Software”, which had four authors known collectively as the Gang of Four (GoF).

Before studying some further examples of patterns and their application to Oracle Policy Automation, it is probably wise to step back and take a broad view of the context. Computer science is often defined as dealing in abstraction, and software engineering as managing complexity, and the connection is that only by considering different parts of programs and systems as abstract concepts are we better able to manage complexity.

Object-Oriented Design Patterns and Oracle Policy Automation in Context

To put it in terms more related to our daily jobs, Oracle Policy Automation is often integrated with other systems that the Oracle Policy Automation developer does not need to understand, and can think of in abstract terms. A good example would be the Siebel CRM or Oracle Service Cloud database that Oracle Policy Automation may interact with, but about which the Oracle Policy Automation developer may not need to know anything – beyond understanding the available attributes for mapping and having a brief overview of the context. Abstraction is about ignoring irrelevant details, and this is often accomplished by what is a theme running through many design patterns, which is to: “encapsulate the concept that varies” (GoF, p. 54).

We often obtain abstraction in Oracle Policy Automation by using indirection (interposing an intermediate attribute) to encapsulate the attribute that varies. This allows us to “Program to an interface, not an implementation“, as the GoF (p. 18) term it, the rationale for which is that the implementation can be changed if other parts of the program only depend on the interface.

If you come, like some of us here on the OPA Hub Website, from a CRM background, you will be familiar with the concept whereby access to a CRM Object is provided through an interface, and the interface does not change even if the Object undergoes modifications (such as when using the GetMetadata Operation of the Oracle Policy Automation Connector Framework).

Although design patterns and refactoring techniques should serve the goals of reduced duplication, reduced complexity, and increased clarity, these goals can be in conflict, not just with each other, but with certain Oracle Policy Automation-specific goals. Take for example one of the stand-out benefits of Oracle Policy Automation: Policy Isomorphism. This means having the same form (i.e., you can copy and paste legislation or other source material directly into Microsoft Word, and base your rules on this and compare them side-by-side) and this is in tension with the concept of intermediate attributes (adding more attributes to increase clarity).

Object-Oriented Design Patterns and Oracle Policy Automation : Strategy and Template Patterns

With that in mind we return to another example of how Object-Oriented Design patterns can be applied to Oracle Policy Automation. The following extended example will be given to demonstrate how useful the Strategy and Template Method design patterns (which we adapt from the GoF book) could be in reducing the number of tables and increasing the flexibility of calculations. We show this extended example to demonstrate the size of the reduction in rules from applying these design patterns to Oracle Policy Automation. We start with an information collection screen and associated Boolean rules to derive values from the drop down list items:

Object-Oriented Design Patterns and Oracle Policy Automation 1

We then look at the top level goals for determining the total profit of the company, which is our main goal:

Object-Oriented Design Patterns and Oracle Policy Automation

These are then derived from three very similar tables of calculations, which are listed in succession below:

Object-Oriented Design Patterns and Oracle Policy Automation 3

Object-Oriented Design Patterns and Oracle Policy Automation 4

Object-Oriented Design Patterns and Oracle Policy Automation 5

Object-Oriented Design Patterns and Oracle Policy Automation : Implementing the Design Pattern

We can now alter this to implement our design pattern. We first create a main rule to determine the total profit:

Object-Oriented Design Patterns and Oracle Policy Automation 6

This is the Template Method pattern since it delegates a part of the algorithm – the tax factor, a newly created attribute. Then, we employ the Strategy pattern to effectively split up the tax factor into one of three algorithms (in effect, we are treating the tax factor as an algorithm and then applying Strategy to it). We do this by parameterising, based on type of company, using a feature called Apply Sheet that avoids multiply proven attributes by letting the parameter determine which Excel Worksheet applies:

Object-Oriented Design Patterns and Oracle Policy Automation 7

Then each of the subsequent tabs has a small table. As an example, here is the mining sheet. The others have identical structure and adjusted values for the tax factor.

For the Strategy and Template Method patterns, applying these design patterns has transformed our example rulebase into something much more easily extensible.

Object-Oriented Design Patterns and Oracle Policy Automation : Improved Maintenance and Clarity

If we were to create another sector (e.g., oil), it would be very easy to add on another sheet in the Excel Workbook and add it to the Apply Sheet. In fact, we could easily add another 20 sectors, whereas there would be a lot of time-consuming ‘find and replace’ work to do in the original, and we would have ended up with dozens of pages of rules. Moreover, the original algorithm had a lot of code duplication, as the same Boolean attributes were repeated in row after row in table after table.

Furthermore, if we had needed to add or remove conditions from the tables it would have taken extensive work in order to verify that each and every table was updated correctly. In the reformed algorithm, the conditions were written only once and these are easily changeable. And, we were able to eliminate three (possibly confusing) and unnecessary sub-totals relating to each of the company types. The unvarying part of the algorithm (the total revenue – the total cost) is now written once, rather than 15 times, and so it is easily changeable.

Finally, our new algorithm mentions only the tax factor. This means that if all tax rates were harmonised, a single tax rate declared, or a new formula implemented that did not depend on the company type, since we have encapsulated the part of the algorithm that varies, we could just delete the Excel table and introduce a new table for the tax factor that did not mention the type of company. This would not have been so easy to do with the original algorithm.

Once again, even from a very simple set of examples, it should be clear that Oracle Policy Automation rules will benefit from the targeted application of principles from programming – in this case, the Strategy and Template Method design patterns. For more information about the ideas discussed in this article, Dr Sender can be reached using his LinkedIn profile, at the end of this article.

Object-Oriented Design Patterns and Oracle Policy Automation : Going Further

The OPA Hub and Dr Sender are currently working towards the launch of advanced training based on his work. If you are interested, please take a moment to answer the 1 question survey below (if you have not already registered for the OPA Hub you can do that here before you answer). Thank you!

What kind of advanced OPA training would you be interested in attending?

Oracle Policy Automation Free Quizzes to Prepare or Test Yourself

Oracle Policy Automation Free Quizzes to Prepare or Test Yourself

Oracle Policy Automation Free Quizzes to Prepare or Test YourselfThe OPA Hub Website, alongside the articles, job lists, ecosystem directory and video gallery, also maintains a number of fun, free and interactive quizzes for anyone who works with Oracle Policy Automation. Oracle Policy Automation Free Quizzes to Prepare or Test Yourself can be found on the menu or, read on for more information.

These quizzes are accompanied by a Leaderboard so you can compare your own score to the best in the world. See how high you can get on the leaderboard! Here are some quick links to the different quizzes. They all have a mixture of categories and topics, and are a good mixture of easy, hard and trick questions just to keep you on your toes. To answer the questions you will need to have worked with Oracle Policy Automation and some of the questions might be easier to answer if you are a regular reader of this website, but anyone with experience will be able to make a good job of it.

Join the 286 members of the OPA Hub Website and try one out today.

Oracle Policy Automation Free Quizzes to Prepare or Test Yourself : New Quiz Added

And today is a special day since we have just finished making some updates to the existing quizzes and added another one, which means that today there are six Oracle Policy Automation Free Quizzes to Prepare or Test Yourself which means 60 questions (all different of course) and each quiz of 10 questions is against a time limit as well, so you can really put yourself in the driving seat for your next interview or examination.

Oracle Policy Automation Free Quizzes to Prepare or Test Yourself are just part of the picture of course : we encourage all Oracle Policy Automation consultants to get trained at Oracle University. As of today there are two courses that cover version 12 of Oracle Policy Automation :

  1. Introduction to Oracle Policy Automation (1 day)
  2. Oracle Policy Modelling for Policy Experts (3 days)

To complement these offerings, we have a variety of Oracle Policy Automation workshops available.

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding Input

What is it about Google maps? This little example of a JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding was often requested by customers and students alike. Whether it be in the Siebel Hub or the OPA Hub Websites, Google Maps always seems to be a popular topic!  When I did a Google maps customlabel in Oracle Policy Modelling a few months ago, it was one of the most downloaded examples we have ever had.

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding

And so, all I have decided to revisit the example.  This time however we will create a custom input control, and the user will click on the map to show where they are located.  These might be useful in an emergency situation, or something far more mundane such as simply be able to say what your address is, quickly.

To do this, we’re going to use the Google Maps JavaScript API once again.  We will use the same functionality as before, with new twists:

  • Marker on the map to display their browser-reported location (seen previously)
  • Information window to display text  (seen previously)
  • From the latitude and longitude obtain the Street Address
  • The possibility to drag the marker to another location if incorrect 
  • A button to confirm the selection of the address
  • The chosen the address will be passed to an attribute in the  Project

In this example therefore, we will need to use reverse geocoding.  Specifically, we need to convert the latitude and longitude into an address.  Using this Google service will normally provide us with a close match.  There may be multiple matches, or indeed no match at all.

For simplicity we will only handle the case where at least one match is found, and we will take the first match which is typically the closest.  We will not look at the other cases where there are multiple choices.  We are reserving that for another post in a little  bit!

In the example provided, which is as usual for education and amusement purposes only, the information from Google goes to our interview and is passed into an attribute.  Of course, what happens after that, it’s you that decides!

To keep things simple, the initial part of the script is the same.  We use your location to plant the marker on the map.  The exact icon used, depends entirely on what you chose in the interview : we used a simple example where the user declares an accident or a fire or some other emergency.  The marker is planted on the map. Then we introduce drag and dragend handlers, as well as a click handler.

The first page of the Interview is shown below.

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding 1

Then we have a typical page displaying only a single Input Control for our demo.

OPA 12 - JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding 5

Our code will handle a few events. The marker click handler will display the address of the location in an infowindow. The drag and dragend handlers manage the user dragging the marker to a new location: maybe they didn’t get it right first time, so we let them do it again.

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding 2

The two main functions in this code are the confirm_my_address function, which lets the user click a button in the marker and pass the address to Oracle Policy Automation to confirm that the marker is in the correct location, and the geocodeLatLng function, which does exactly what it says.

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding 3It takes the latitude and longitude of the marker and queries Google to find the address of the marker before it is pushed to our attribute.

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding 4

Because it doesn’t always work, we also have to manage the situations when had no address is returned. In this case we handle it with nothing more than an alert, which is fine for our little test. Regarding geocoding and so on you can find much more information of course on the Google Maps JavaScript API Documentation page.

Enjoy the video and if you are interested, you can download the code example for free, with no warranties and just for fun, from the OPA Hub Shop as usual. Remember to use Ctrl+F5 to run it in a real browser.

video

Signature Control Oracle Policy Automation JavaScript Extensions

Signature Control Oracle Policy Automation JavaScript Extensions

Here at the OPA Hub we have already gotten back into gear after the holidays and in fact next week we will be off to Finland for some exciting OPA-related things but in the meantime, here are some thoughts about the Signature Control. Actually it is not just about the Signature Control. Rather, in this post, we want to look at some ways of extending the unextendable. If you check out the documentation regarding the Oracle Policy Automation JavaScript Interview Extensions, the Signature Control is not in the list (except for the styling possibilities- there are no extension capabilities). So what if you need to change it’s behaviour? Can we invent Signature Control Oracle Policy Automation JavaScript Extensions?

Of course I can hear you say that the likelihood of wanting to use the Signature Control Oracle Policy Automation JavaScript Extensions is small : after all we should never be using the JavaScript extensions to do anything too crazy (remember the guidelines at the bottom of this page). What on earth would people want to change for the Signature Control – or indeed for any Control that is not currently listed as having that capability?

Well, here is a simple example :

Signature Control Oracle Policy Automation JavaScript Extensions

The Signature Control is not responsive. Of course I could tell my phone and tablet users to zoom in or out, or switch orientation. But I don’t want to. Look, I’m just trying to make a point. Customers will always come up with things that we might not expect, and the Signature Control will be no exception.

The width of the control is fixed, by the parameter entered at Design Time :

Signature Control Oracle Policy Automation JavaScript Extensions

Since we cannot extend the behaviour of the Signature, maybe we need another approach. Let’s look at some useful things we came across while researching this article.

  1. The most obvious way to extend the Signature Control is to add a blank Control to the Interview that can be extended, and leverage the keys (mount, unmount and so on) of that Control to work on the Signature. In the case shown below, a blank Container has been added to the Interview for that purpose. It has a custom property to help identify it in the JavaScript later, like most of the examples shown on this site and elsewhere.

Signature Control Oracle Policy Automation JavaScript Extensions

2. Secondly, We should be aware that the value set at Design Time for the Signature Control width (and a lot of other useful information about your Interview) can be referenced in JavaScript :

var currentWidth = interview._session.config.interviewProperties["signature-width"];

This might be useful for some sort of fallback or default value.

3. Thirdly we should be good citizens and not forget that the styling options in Oracle Policy Automation do give us a fairly broad range of options without resorting to JavaScript code. For example:

Signature Control Oracle Policy Automation JavaScript Extensions

In the above example, we use the styling capabilities of the Signature Control to change the ink colour, and we apply a CSS style to the Control as a whole. With that in mind, we can leverage media queries in the CSS to establish different sizes of display for different users:

In the example CSS below, the outline (the border) of the Signature can be changed depending on the size of the viewport / screen that the user is holding. Smaller viewports will use a one pixel border, larger ones will use 2 pixel. It’s a simple example.

4. The Signature Control might only need extending during the mount or unmount process – which makes a Container Control a good choice. For the update we will simply leave that blank since there is nothing on the Signature Control we want to work with.

The client didn’t like that funny dotted line you get when you need to sign the signature panel. Using our newly added Class, we can select the siblings of the Signature and remove the line:

var myDiv = $('.eca-signature');
var myLine = $("canvas.eca-signature").siblings();
myLine.hide();

Signature Control Oracle Policy Automation JavaScript Extensions

5.  We might also use jQuery to add a resize handler to the Interview window, and based on that we could resize the Signature to a certain degree. We can also trigger the resize handler when the window is first shown, to make sure our Signature Control is always presented in the right size. And that opens up a world of opportunities.

So what does all this give us? The following video shows some of the results. This is just a scratchpad idea – so as usual the example is given with no warranties. You can get the example code from the OPA Hub Shop by searching the code examples for Signature Control.

Signature Control Oracle Policy Automation JavaScript Extensions – Summary

It’s a work in progress, but piggybacking on top of an extendable Control like the Container (which is also pretty much invisible, which is a bonus) let’s us imagine all sorts of trickery on the Signature Control. Plus, as good citizens we have learned along the way of some interesting standard styling and customization.

In the example code there are, as usual, a number of console logs as well as some experimental code that probably does nothing : as I always say, this is for educational purposes!

Oracle Policy Automation -JavaScript Custom API : Google Maps

Oracle Policy Modelling – OPA Custom Control : Google Maps

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

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

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

OPA Custom Control - Attributes

Then we can build out the two Screens.

OPA Custom Control Map Screen

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

OPA Custom Control Data Collect

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

OPA Custom Control Value List

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

OPA Custom Control Images

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

OPA Custom Control Map Elements

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

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

 

OPA Custom Control Extension API Add File

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

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

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

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

OPA Custom Control Extension API Map Setup

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

The next chunk is mostly setting up the Google Map functionality

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

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

6. This actually loads the map

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

OPA Custom Control Map Label

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

9. With a click event to handle the user interaction

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

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

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

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

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

 

Worldwide
Logo by Southpaw Projects LLC