Tag: Custom JavaScript

Dynamic Input Mask JavaScript Extension

Dynamic Input Mask JavaScript Extension

This week I was lucky enough to be chatting to a reader when he shared a requirement for a dynamic mask. The exact concept was simple : when entering a telephone number, if the end user of the Interview types a number first, then the mask should default to the national format – for example (555) 1234-1234 – but if the end user types the international “+” prefix first then the mask should switch to a different one, for example +00 000 0000 0000 or whatever is appropriate. Outside of this example, there are frequently situations where more than one mask is needed, depending on some criteria or some fragment of data entry.

We should not forget of course that if all we want is a simple mask, then Intelligent Advisor has got it covered with the standard out of the box functionality. To implement a simple, static mask simply requires us to create an attribute of type Text and to select Masked Input from the Interview Ribbon before specifying the mask in the Input Mask dialog.

As an example, the following shows a Masked Input Control with a specific mask being implemented. In addition, you can see the Hint Text in the Interview tab shows the result in case you forget.

Clearly this is going to produce a good mask. But it cannot be changed dynamically, as it is part of the Control properties at runtime. So the possible solution is to use an Extension. In this case, a customInput. For the purposes of demonstration, we chose to use the jQuery Mask plugin. You can find more about it at the address : https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html. The most interesting element is the fact that it supports dynamic masks. It uses the keypress event to enable the developer to check the character(s) and then change the mask. So this sounded like a great idea, and indeed proved quite straightforward. The code below shows that in fact there are several steps needed : define the two masks, and also handle the case when the area is blanked by the user.

Happily we found an old project where we had already used this dynamic input mask technique and adapted it for today.

Dynamic Mask

Here is the example code, of course you can get the Zip file from the Shop. There are some comments below.

/*  Generated by the OPA Hub Website Code Generator 30/11/2018 22:41
Educational Example of Custom Input Mask Extension for Oracle Policy Automation
I will remember this is for demonstration purposes only.
 */
OraclePolicyAutomation.AddExtension({
	customInput: function (control, interview) {
		if (control.getProperty("name") == "xMask") {
			return {
				mount: function (el) {
					console.log("Starting name:xMask customInput Mount");
					var div = document.createElement("input");
					div.id = "xMask";
					div.value = control.getValue();
					el.appendChild(div);
					var oldVal;
					$('#xMask').on('keypress', function () {
						var val = this.value;
						if ((val != oldVal) && (val.length == 1)) {
							oldVal = val;
							if (oldVal == '+') {
								$('#xMask').mask('+999-9999-9999');
								$('#xMask').val(oldVal)
							} else {
								$('#xMask').mask('(999)-999-99999');
								$('#xMask').val(oldVal)
							}
						} else if (val.length == 0) {
							$('#xMask').unmask();
						}
					});
					console.log("Ending name:xMask customInput Mount");
				},
				unmount: function (el) {
					if (control.getProperty("name") == "xMask") {
						console.log("Starting name:xMask customInput UnMount");
						var xMask = document.getElementById("xMask");
						xMask.parentNode.removeChild(xMask);
						console.log("Ending name:xMask customInput UnMount");
					}
				}
			}
		}
	}
})

As you can see in this dynamic input mask demo, there is only really the mount to worry about. We use the keypress event and switch the mask based on the previous character pressed on the keyboard. And if no characters exist in the control we remove the mask ready for the next try. Here is a short video demonstrating the effect, and comparing to a static mask. The input control extension has not had any CSS formatting applied so it appears a little smaller than the standard. This can easily be changed.

video

Have a nice day! (the documentation about standard input mask functionality can be found online here).

The Code Generator for Extensions

The Code Generator for Extensions

As many of you have already found out, we have been experimenting with a template code generator for JavaScript extensions. It started out as a simple way to demonstrate the basic structure of JavaScript extensions, and sort of morphed into a tool to generate working examples of code for a variety of different extensions. It’s become too big to continue messing with it, so we decided to put it out on the Website for you to play with.

As of today, it can generate the following

  • Label Extension
  • Input and Full Input Extensions
  • Search Extensions (several different examples)
  • Entity Container Extension
  • Container Extension
  • Options Extension

All you have to do is know a little bit about what you want to do. For example, let’s say you want to generate a Container Extension. You read that a Container Extension can be used to display a chart. So that’s what the generator does – it builds the code for you. Let’s walk through it as an example:

You want to experiment and find out what an Input Extension looks like. Start the Project in the Debugger and review Screen One :

Code Generator OPA 1

Not complicated. You agree to the terms and you choose Custom Input. Then you click Next.

Code Generator OPA 2

All the extensions use Custom Properties to enable you to know which Input has an extension and where the code should run (and not run). I use a simple system whereby you add a custom Property to your Input on your Screen, and the Property Name is “name” and the value is anything you want. In real life you maybe have multiple Property Names here. But one will do. Next!

Code Generator OPA 3

Individual Templates need further information. For example, since an Input Control needs to give the user something to look at, it will add an INPUT tag to your page, with the HTML Id you specify. Plus, since this is an Input, what attribute will the user be inputting? Then hit Next.

Code Generator OPA 4

That’s it. The code is displayed. This can be copied and pasted manually into a blank text file or…

Code Generator OPA 5

Scroll down to the bottom and click Copy to Clipboard. But we’re not finished yet. Next!

Code Generator OPA 6

On the final page you can download a PDF which should explain what you have just done, what you can do with the other Code Generator examples, how they work, how to use them and so on.

Take your JavaScript file and create a new Project. Add the file to the resources folder. Add the attribute and the Control to your Screen, not forgetting the custom Property you specified. And your new Custom Input should work when you debug.

The Code Generator can be downloaded from the OPA Hub Shop. Official Oracle documentation can be found online.

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!

Custom Year Picker JavaScript Extension Example

Custom Year Picker JavaScript Extension Example

Continuing in our random series of examples of using the Oracle Policy Automation JavaScript Control Extension API, this one came up the other day. How to allow the user to only enter a year in a calendar? The data type underneath fully expects there to be a day, month and year to complete the picture, but suppose you are entering an attribute such as “Year of Registration” and the business rule states that the product is always registered as of January 1st of that year. We can call it a Custom Year Picker JavaScript Extension.

Of course as always there are many ways to achieve this, and JavaScript is definitely not the only solution. As good citizens of the Oracle Policy Automation world, we should always try and reach our goals without resorting to scripting unless it is completely necessary. Since this is supposed to be an article about the technique rather than the business requirement, let’s push on and find out how you might do it.

Firstly, there are a couple of pre-requisites. This example uses jQuery, and jQuery UI plugin called, unsurprisingly perhaps given the topic, Year-Select. I am sure there are a multitude of different plugins or tools to do this. Year-Select has the advantage of being super small and easily styleable. In addition it requires minimal coding to get it to work. Two good reasons to use it for this example. Download the file and place it in your folder. Add the jQuery files that you can download from the official site.

Now your resources folder will probably look like this : note the three external files (two from jQuery and “yearpicker.js” for the Year Picker) and your own custom JavaScript file that you are about to create “datepicker.js”. For this example, you should also create the following

  1. A Word document with a global goal that relates to couple of date attributes
  2. The two date attributes just mentioned that you should also create. Give them names as well.
  3. A label which displays these pieces of information.
  4. A date control on the Screen with a custom Property called name, value “xDate” or anything else you might like to use instead. This is similar to the other examples already described on this site.

Here are the images to help you work all that out. First the screen, with the Date control and the two attributes in the label:

Custom Year Picker JavaScript Extension Example

And secondly, the actual content of the Word document. You will notice that I am just trying to usefully have two attributes, one which is the session timestamp (which we can use when the Interview starts up, to default the Year Picker to the current year, for example) and the second attribute is going to store the selected value chosen by the user.

For the avoidance of doubt, in this Custom Year Picker JavaScript Extension Example, dt_sess is the name given to the date of the session and dt_circ is the name given to the date of registration.

On to the JavaScript code. As usual this will take the form of several different sections. In the first mount section we will

  • Create an Input control, which is the basis of our Year Picker
  • Get the Session Timestamp
  • Convert it to a Date object
  • Extract the Year
  • Apply the magic CSS class and call the yearselect.js code to intialise the jQuery UI widget

Custom Year Picker JavaScript Extension Example

  • If the date of registration has no value, then set the value to the year of the Session Timestamp, January 1st (since this was the requirement)
  • If the date of registration already has a value – because someone has already edited the year in this Interview session, then get that value and apply it to the Year Selector

Custom Year Picker JavaScript Extension Example

That’s quite a lot going on there. Most of the code is actually spent getting the actual date from the attribute and converting it into something JavaScript believes is actually a Date. Then looking to see if the date is already set, and updating the picker control.

As usual the code is absolutely filled with console logging, and the code is willfully non-optimized in order to make it as easy to read as possible for someone who just wants to know what it does. The final parts of the code handles if the user decides to update the year with the picker, and the usual unmount clears the element from the DOM.

Custom Year Picker JavaScript Extension Example

Now, in your debug session if you have added a new Screen, you can flick back and forth between the End Screen and your New Screen to observe the changes. Your new Custom Year Picker JavaScript Extension should be up and running like the following screenshot.

Custom Year Picker JavaScript Extension Example

The OPA Hub Shop – Download the Script for Custom Year Picker JavaScript Extension Example

And now for some good news (I got a lot of requests for this!). The code example, and all the other code examples, are free to download in the OPA Hub Website Shop as PDF files.

Remember if you have any ideas for examples, or you want to contribute your own, just leave a comment below!

Worldwide
Logo by Southpaw Projects LLC