Improve usability of APEX pages with YUI 2

The usability of a website is simply how easy it is to use your website. Obviously, the easier it is to use, the longer a visitor will stay and the better chance that they will return.

To improve usability of your APEX pages it is advisable to use one of the free javascript libraries available on the internet. In this example I use the YUI 2 library of Yahoo. YUI 2 is a JavaScript and CSS library with more than 30 unique components including low-level DOM utilities and high-level user-interface widgets. One of the advantages of using the YUI library is that you don’t actually need to download the javascript files. You can simply reference the files in your page directly from the Yahoo website.

One of the usefull YUI library features is an AutoComplete control. This control provides feedback as users type something into a field, allowing them to choose from a list of words, so they don’t need to type the full word.

Create the right references to the library files in the HTML Header:

<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"></script>
<!-- OPTIONAL: Get (required only if using ScriptNodeDataSource) -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/get/get-min.js"></script>
<!-- Source file -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/autocomplete-min.js"></script>

The next step is to add an on demand application process. Go to the Shared Components, Logic, Application Processes. Create a new process, named ‘search_employees’ (process text below). Important, the process point is ‘On Demand’, because we will call this process via Ajax. This process will return some XML containing the names of our employees.

begin
  owa_util.mime_header('text/xml',FALSE);
  htp.p('Cache-Control: no-cache');
  htp.p('Pragma: no-cache');
  owa_util.http_header_close;
  htp.prn('<RECORDS>');
  for r_emp in ( select last_name||', '||first_name name from employees ) loop
    htp.prn('<RECORD value="' ||
                       r_emp.name ||
                       '">' ||
                       r_emp.name ||
                       '</RECORD>');
  end loop;
  htp.prn('</RECORDS>');
end;

Now we have an application process. To use this process on our page we have to define a page process which refers to this application process. Create an new on demand page process, name ‘search_employees’, and select the right application level process to refer to. Important, set the conditional type to ‘never’, because will call this process via Ajax.

The AutoComplete control also requires that you create an empty DIV section somewhere in your document, which will act as a placeholder for the control at runtime. Create a new HTML region on the page and make it minimal with no template, no region header and with the following text as the region source:

<div id="myAutoComplete">
  <div id="myContainer">
  </div>
</div>

We also need a Page Item, display as text field, where the user can enter the input. For this case we name it, P7_SEARCH and place it on the same HTML region where we put the placeholder.
The next step is to add another javascript function to the page.

<script type="text/javascript">
function get_employees(pThis){
  var l_Return = null;
  var myArr = new Array();
  var get   = new
     htmldb_Get(null,html_GetElement('pFlowId').value,
               'APPLICATION_PROCESS=search_employees' ,
               0);
  gReturn = get.get('XML');
  if(gReturn){
    var l_Count = gReturn.getElementsByTagName("RECORD").length;
    for(var i=0;i<l_Count;i++) {
      var l_Xml = gReturn.getElementsByTagName("RECORD")[i];
      myArr[myArr.length] = l_Xml.getAttribute('value');
    }
  }
  get = null;
  var myDataSource = new YAHOO.widget.DS_JSArray(myArr);
  var myAutoComp   = new YAHOO.widget.AutoComplete(
           'P7_SEARCH',
           'myContainer',
           myDataSource);

      myAutoComp.prehighlightClassName = "yui-ac-prehighlight";
      myAutoComp.useShadow = true;
      myAutoComp.typeAhead = true;

}
</script>

The myArr variable is a javascript array variable, which will eventually contain the search phrases that are returned in the xml via the on demand process. We use the htmldb_Get routine to perform a standard call to the ‘search_employees’ on demand process. Afterwards, in a loop, we fill the myArry array and we move on to the main core of the AutoComplete control’s functionality. First we set up a new data source to be used for the AutoComplete control. We use the javascript array so we can pass in the myArr, which was populated earlier with the entries from the xml returned by the on demand process.

As you can see, we also refer to a class named ‘yui-ac-prehighlight’. So we must have a reference to the Yahoo stylesheet. Put this link into the HTML header.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/assets/skins/sam/autocomplete.css" />

To prevent the widget to expand to fit its container, we have to set the width of the autocomplete DIV section. Place this also in the HTML header.

<style type="text/css">
#myAutoComplete {
    width:15em;
    padding-bottom:2em;
}
</style>

Hang on, we are almost there! We only have to call the javascrip function to do his job. For simplicity, we call this script in the onLoad trigger of this page. We also have to refer to the yui-skin-sam class. The page HTML Body attribute looks like this:

class="yui-skin-sam"  onload="get_addresses();"

The result looks amazing!  When you hit the ‘S’ button, you see all employees whose name starts with an ‘S’, you can navigate to the correct name, or hit another letter to reduce the number of names. It all looks initially much work to Implement this widget, but remember, you only have to do this once, your users are is eternally grateful. it’s all about usability!

Ratings:

VN:F [1.9.13_1145]

please wait...

Rating: 0.0/5 (0 votes cast)

Tags: Apex, autocomplete, usability, yahoo, YUI

• 

 Print This PDF Version