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:

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

• 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

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.

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.

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!