Dec 15, 2010

Create a hierachical navigator in IBM Lotus WCM

I googled for long time for a solution that could produce hierarchical unordered list corresponding to site areas. Something like:
<ul>

<li>A
<ul>
<li>A.1</li>
<li>A.2</li>
</ul>
</li>

<li>B
<ul>
<li>B.1</li>
<li>B.2</li>
<li>B.3
<ul>
<li>B.3.1</li>
<li>B.3.2</li>
<li>B.3.3</li>
</li>
</ul>
</li>

</ul>


I follow the method introduced here. However I found it does not work out the whole hierarchies. I guess the NAV--SubNavigation with StartType equals to "Current Site Area" prevent it from happening.

The final solution is to use navigator to generate a linear list of nodes and use javascript to reconstruct the hierarchies.

Here is navigator definition:

Start Type: selected
Include Start: false
Ancestor Level: none
Descendant Level: All (or choose the level of hierarchies you want)
Preceding Siblings Level: none
Next Siblings Level: none
Show Site: false
Show content: false
Expand current navigator branch one level: false
Expand navigator to display current site area: false
Results per page: 1000 (or choose a number that is larger than the maximum items)
Start page: 1
Maximum pages to include: 1000 (or choose a number large enough)
Pages to read ahead: 1000 (or choose a number large enough)
Distinguish items with no children using the final navigator result design: false
Header: <url>
Footer: </ul>
Separator:
Navigator result design 1:
<li class="l1" id="<Placeholder tag="idnum"/>"><a href="<Placeholder tag="href"/>" target="_self" title="<Placeholder tag="Title"/>"><Placeholder tag="Title"/></a></li>

Navigator result design 2:
<li class="l2" id="<Placeholder tag="idnum"/>"><a href="<Placeholder tag="href"/>" target="_self" title="<Placeholder tag="Title"/>"><Placeholder tag="Title"/></a></li>

Navigator result design 3:
...

And this navigator gives the following html code:
<ul>
<li class="l1">A</li>
<li class="l2">A.1</li>
<li class="l2">A.2</li>
<li class="l1">B</li>
<li class="l2">B.1</li>
<li class="l2">B.2</li>
<li class="l2">B.3</li>
<li class="l3">B.3.1</li>
<li class="l3">B.3.2</li>
<li class="l3">B.3.3</li>
</ul>


Now it's javascript's work. In order to re-constructure the hierarchies, I write the following codes:

function process(level) {
var sel = 'li.l' + (level - 1);
jQuery.each(root.children(sel), function(id, el){
var pe = jQuery(this);
var dock;
var nl = pe.nextUntil(':not(li.l' + level + ')');
jQuery.each(nl, function(id, el){
if (!dock) dock = getDock(pe, level - 1);
jQuery(el).appendTo(dock);
});
});
}

function getDock(pe, level) {
var ul = pe.children('ul');
if (ul.size() == 0) {
ul = jQuery('<ul class="l' + level + 'ul"></ul>').appendTo(pe);
} else {
ul = ul[0];
}
return ul;
}

var root = null;
jQuery(function(){
root = jQuery('#ul'); //you should update #ul accordingly
jQuery.each([5,4,3,2], function(id, val){process(val)});
});


Now a good rendered hierarchies presented in my final html page.

No comments: