Policy Automation – Value Selections and jQuery

Value Selections and jQuery

A question that often comes up during the Oracle Policy Automation Essentials I and II   training perhaps en route to certification,  concerns the limitations of the Web Determination user interface. In fact many questions come up. The entire standard Web Determination user interface is driven by Apache Velocity. The front page of the Apache Velocity project describes it thus

“Velocity is a Java-based template engine. It permits anyone to use a simple yet powerful template language to reference objects defined in Java code.

When Velocity is used for web development, Web designers can work in parallel with Java programmers to develop web sites …

Well, to put it simply, the pages you see in the Web Determinations are generated from templates (with the file extension VM) that you can find in a standard deployment of a rulebase in the templates folder, unsurprisingly. Here is an extract from one of the standard Templates.

 #if( $control.isReadOnly() )
 #set( $readOnlyString = "readonly" )
 #else
 #set( $readOnlyString = "" )
 #end
 #parse( "investigation/input-style-overrides.vm" )
<div class="question">#parse("investigation/identifier-text.vm")<label for="${control.getEncodedID()}">#parse("investigation/control-text.vm")</label></div>
 <div class="info">
 #if($control.isMandatory() == "true" || $control.isMandatory() == "True")
<span class="mandatory">${mandatory-text}</span> 
#end
&nbsp;

Siebelites and other coders  will see the familiar pattern of HTML “<div>” and application “#parse” and “#if” that is reminiscent of the Web Templates we are used to handling for example in a Siebel project, but other Enterprise Applications use similar patterns to generate standard pages of output via templating.

The basic UI of Web Determinations is pretty, well, basic. The interface is static and rather plain, and almost all data controls are presented as text controls, even dates and numbers.

OPA - Boring Web Interface

 

Of course you can configure high-level visual elements to some degree using the different application properties files which we have covered in our popular blog, and these should be our first port of call, since they permit improvement without any coding or customization.

OPA - Less Boring Web Interface

Even with these changes however, the Web Determinations UI remains a rather plain Web 1.0 world. If you look at the example screenshot above, most of the changes (colors, images, logo text, links) have been achieved without any coding – for example using the appearances.properties file or the messages.properties files for your chosen locale.

OPA - Appearance Properties

OPA - Messages Properties

But looking more closely in the myriad template files we come across a very happy line :-

OPA - jQueryThe sign that jQuery is hanging out in the template files provides us with a new and effective way to improve them. For example, the standard date displays in the Web Determination do not offer the possibility to “choose” a date. The standard and familiar jQuery UI date picker makes things easier for the user even if this requires careful handling if your Web Determination is used in multiple locales. Three lines of <script> and <link> to link to the files and stylesheet, one line to instance the .datepicker and we are done.

 $(function() {
 $( "#date-${control.getEncodedID()}" ).datepicker({
 showOn: "both",
 buttonImage: "http://yourserver.com/calendar.gif",
 buttonImageOnly: true, dateFormat:"dd/mm/yy"
 });

OPA - jQuery Date Picker

We can even go so far as to implement some of the useful features found for example in the Siebel Open UI framework (which itself massively leverages jQuery). This will prove beneficial in the case of an integration between Siebel Open UI and OPA, as the two interfaces may appear together in the same CRM application and the OPA Web Determination will frankly look very ugly in comparison. Another example concerns the dropdown list of options used in the second image above.

Again, leveraging the autocomplete functionality in a combobox is achieved in just a few lines of code. For the sake of maintenance, these lines of code can be placed in files independent of the main templates. Aside from the habitual <script> and <link> tags to reference the necessary javascript files and stylesheet, the effect shown in the image below can be achieved in the following lines.

<script>
jQuery("#${control.getEncodedID()}").combobox(); // Velocity call
//for the correct ID wrapped by jQuery UI combobox call
</script>

The result is much nicer for the end users.

OPA - Combobox Typeahead3

 

 

 

Until next time, have fun!

 

 

Richard Napier

Author: Richard Napier

Richard Napier joined Siebel Systems in 1999 and took up the role of managing the nascent Siebel University in Southern Europe. He subsequently was Director of Business Development and Education for InFact Group (now part of Business & Decisions) for 8 years. He now runs his Consulting and mentoring company, On Demand Consulting & Education Ltd and has run ODCE since 2010. Owner of the OPA Hub, he also is Co-Founder of the Siebel Hub.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Worldwide
Logo by Southpaw Projects LLC