Mythics Blog

Alphabetize Option Lists in WebCenter Content

Posted on October 31, 2012 by Jonathan Hult

Tags: Mythics Consulting, Oracle, Oracle Software, WebCenter

With multiple devices and platforms, it can take time to get acquainted with a user interface. However, as you begin to navigate it with skill, this tool can become a convenient way to manage the items you are searching for. Whether you manage your menu based on popular items, or list items in alphabetical order, there are many ways to sort a menu or list based on your user needs.

If you are not familiar with a menu, managing items based on popularity can be difficult to navigate through. I find that having a menu alphabetized is a quicker and more effecient way of finding information. The Yahoo! Menu is a good example of how items are alphabetized. Yahoo! Menu: Autos, Dating, Finance, Flickr, Games, Horoscopes, Jobs, Mail, Messenger, Movies, Music, My Yahoo!, News.

This is one reason I helped write AlphabetizeMenus for WebCenter Content. Option lists in WebCenter Content are not always in alphabetical order. When creating an option list, the user is presented with the button Sort Now, which allows the list to be alphabetized. However, I often find that these lists have not been alphabetized.

I have written a component that will alphabetize all the option lists on a page. It uses JavaScript and the YUI library built-in to WebCenter Content to accomplish this (no jQuery required). The functionality can be enabled/disabled at a rule level by setting a rule side effect of <$AlphabetizeOptionLists=”0|1?$> or setting AlphabetizeOptionLists=0|1 in the URL.

I wanted to do this server side. However, had a hard time finding the correct filter to hook into (to get all option lists) or the correct ResultSets to modify. I also wanted something that did not actually change the ordering of the option lists in the database. This way it can be disabled and the original ordering will be used.

You can see how this is accomplished by viewing the code below, or by simply downloading the component AlphabetizeOptionLists.


I created a new custom component in which I overrode the dynamichtml include: std_html_head_declarations (shown below). I also added the preference prompt AlphabetizeOptionLists_ComponentEnabled, which allows the enabling/disabling of the component. Instructions for how to create a component, override a dynamichtml, include and add a preference prompt can be found here.

[[% Start override by Jonathan Hult on 8/31/12 %]]
<@dynamichtml std_html_head_declarations@>
<$include super.std_html_head_declarations$>
<$if isTrue(#env.AlphabetizeOptionLists_ComponentEnabled) and (not AlphabetizeOptionLists or (AlphabetizeOptionLists and not isFalse(AlphabetizeOptionLists)))$>
  <script type="text/javascript">
    [[% Must wait at least 1 second to ensure all option lists are fully loaded %]]
    setTimeout('alphabetizeOptionLists.getAllSelectElements()', 1500);
   [[% Get all select elements and sort them %]]
   var alphabetizeOptionLists = {
    getAllSelectElements: function() {
     [[% Get nodeList of all select elements %]]
     var selectElements = document.getElementsByTagName('select');
     for (var i = 0; i < selectElements.length; i++) {
    [[% Sort select element %]]
    sortSelectElements: function(el) {
     [[% Get options from select element %]]
     var options = YAHOO.util.Dom.getElementsBy(function(el) {return true}, 'option', el);
     [[% Sort alphabetically %]]
     for (var i = 0; i < options.length; i++) {
      if (options.innerHTML.indexOf("---")) {
      } else {
   [[% Function to alphabetically sort array %]]
   Array.prototype.humanSort = function() {
    return this.sort(function(a, b) {
     aa = a.innerHTML.split(/(\d+)/);
     bb = b.innerHTML.split(/(\d+)/);
     for(var x = 0; x < Math.max(aa.length, bb.length); x++) {
      if (aa[x] != bb[x]) {
       var cmp1 = (isNaN(parseInt(aa[x],10)))? aa[x] : parseInt(aa[x],10);
       var cmp2 = (isNaN(parseInt(bb[x],10)))? bb[x] : parseInt(bb[x],10);
       if (cmp1 == undefined || cmp2 == undefined) {
        return aa.length - bb.length;
       } else {
         return (cmp1 < cmp2) ? -1 : 1;
     return 0;
[[% End override by Jonathan Hult on 8/31/12 %]]


  • ! No comments yet

Leave a Comment