Welcome to the OPA Hub!


Tag Archives: Control Extension

Custom Entity Container JavaScript Extension Example #2

Custom Entity Container JavaScript Extension Example #2

Note : this JavaScript is part of a series. Please start with part one,  continue reading here then visit the final example in part three. You can also watch a quick video of the final example on  our YouTube Channel.

Following on from the previous post, we now have a working example that let’s us access an array of data in our inferred entity from the JavaScript extension code we write to manage our Control extension(s). But what about when we want to use this code outside of Debug mode? And why does it only work in Debug mode? What are the additional caveats we are going to find? Let’s make Custom Entity Container JavaScript Extension Example #2!

Debug Mode

The Oracle PolicyAutomation object in your JavaScript  has EnableDebugMode tucked away deep in the interview.js static resource file. This produces the beloved Debug Console window you see when you are working the Debug in your browser or in the embedded browser, which pipes the console output into this dinky pink box:

Custom Entity Container JavaScript Extension Example #2

When working in Debug mode, you have also noticed (and this is not a surprise) that some interesting objects and functions are available that do not show up when the project is deployed. This is not a surprise really. But in our case, we would like to have access to our array of data for our (perhaps twisted and even unprecedented) purposes. So where do we go from here? The answer, as always, turns out to be relatively simple.

The interview object contains a reference to the same array in the form of  interview._session.config.data[1].instances. Note that the number one assumes that you have only two entities, Global and something else. You will have to inspect your code and find out which node you are interested in if you have more. It looks like this in my case.

Custom Entity Container JavaScript Extension Example #2

Once you have that reference, you can do two things easily.

  1. You can figure out the length of the array and use it in your for…each loop
  2. You can select one of the child array called attributes and dig up the information you need to display

So in this new, non-Debug version of the code, you would end up with the following changes compared to the previous post.

Custom Entity Container JavaScript Extension Example #2

  1. In the early part of the script, get a reference to the part of the interview object you need
  2. Use it in a similar way to previously to get the different attribute values you want to display

This code will run even if you are not using the debugger and you have deployed the project to an Interview URL.

Watch Out!

But there is another caveat. The exact index (location) of your entity in the array of entities will change as you compile and deploy your project. So we need a mechanism to make sure we have selected the correct entity and instances.  What today is index 3 might be index 2 tomorrow. Since the entity you are looking for has a unique public name, you might use that to find it. Something like this (based on code taken from stackoverflow.com).

Custom Entity Container JavaScript Extension Example #2

Working through the different nodes until you find the right one, based on the unique name.

Custom Entity Container JavaScript Extension Example #2 Summary

This approach allows us to take the same technique and improve our “Custom Entity Container JavaScript Extension Example #2” to function outside of the Debug window and give it a more robust mechanism for searching for our entity. I would not be surprised if at some point this reference was made easier to access but for now, this seems to do the trick. The documentation is, as ever, available online.

Code Example

As always the code is available for free download from the OPA Hub Shop. Look for Custom Entity Container JavaScript Extension Example #2  in the product list. But we are still not finished, for in part three of this series we will finish off in style by skinning our List of Instances with jsGrid.

Custom Entity Container JavaScript Extension Example #1

Custom Entity Container JavaScript Extension Example

Note : this JavaScript is destined for use in Debug mode. For a version usable outside of Debug Mode, please continue reading the second part of this series), followed by the final example in part three. You can also watch a quick video of the final example on  our YouTube Channel.

Once again, we look into an educational JavaScript Extension example for Oracle Policy Automation. As usual the example provided is purely intended for learning purposes. It involves a situation that you probably have come across many times. We wish to display a set of inferred entity instances in our Interview. But we are afraid that our set of instances is going to produce a layout that is rather unfriendly. Here is a visual example, taken from a sample project with a simple inferred entity that has only two attributes :

Custom Entity Container JavaScript Extension Example

There are fifty three items in my list. So the Entity Container provides a very long list. Yes, I’m sure I could play around with labels and containers and goodness knows what, in order to make it shorter. But basically, the Entity Container just spawns an elastic list. Which is the opposite of what I want. Instead I would like to see this:

Custom Entity Container JavaScript Extension Example

The above example is a fixed height, and has a scroll bar in order to visualise the content at my leisure. The page is not affected by a very long list. And that is rather nice, especially if you have a dynamic list of terms and conditions, or something similar. Here is the data model, including the inferred entity, relationship and attributes.

Custom Entity Container JavaScript Extension Example

The Excel spreadsheet is very basic for our example:

Custom Entity Container JavaScript Extension Example

Custom Entity Container JavaScript Extension Example

So now on to the mechanism for displaying the content. This Custom Entity Container JavaScript Extension Example will use a standard JavaScript template based on the Oracle Policy Automation documentation. The code of the mount section is as follows:

 

Custom Entity Container JavaScript Extension Example

Let’s look at it in detail. There is some interesting stuff in there. Firstly, the basic principle is as usual. On line 8, as before, we reference a custom Property in our Screen that allows us to identify the Entity Container Control on the Screen. Then, in lines 11 to 15 we create a simple DIV and add a scrollbar that will appear if the content is too large to display in the 100 pixel height.

Then we begin a loop in line 17, based on a global variable called data.data[1].instances.  Of course we should create a reference to it, but for the purposes of learning we can leave it as is. This object, whose exact index will change depending on the structure of your Oracle Policy Automation data model, will prove very useful indeed. It is clearly visible in the Debugging Console of the Browser, if you insert a handy break-point:

In the case of my inferred entity instances, this array contains all 53 instances in my Browser. The same array is also visible as a Local variable as well:

Note in the screenshots above, the location of the break-point is not really relevant here : it is just used to stop the JavaScript engine in the middle of mount.

So the ability to access the instances is most useful. The code loops based on the number of instances. We add a child DIV element for each instance, and then access the values of the two attributes to concatenate them into a longer string. Word-wrap is switched on in my screenshot so you can see the whole Custom Entity Container JavaScript Extension Example code.

Finally we add a horizontal rule just to break the list up a bit. Of course there are lots of things we could do here : but we are just building a simple list and don’t really worry about styling the elements in line, which is not good practice of course.

The rest of the code simply gets rid of the element when the unmount section is called.

Custom Entity Container JavaScript Extension Example

This example is interesting since it reveals a little about the inevitable content of our JavaScript extension. There are probably other ways to get hold of the content of the inferred entity but this is useful for educational purposes.

Summary

But as you have no doubt seen, the code example here will only work with the Debugger. It has it’s usefulness of course, to be able to understand that the content is structured in a certain way. But what about after Debug? That’s what’s coming next.

As always the code is available for free download from the OPA Hub Shop. Look for Custom Entity Container JavaScript Extension Example in the product list.

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