>I recently completed my first "Production" XPages application. Messing with the XPages calendar really helped but I learned that too long away from something after just learning it is bad. But anyways, while researching for said application I came across the IBM Lotus User Interface Developer Documentation site. I don't know where or how I found it but it contains a wealth of information on the oneUI classes with examples using them. On this site I found a Menu with Sections and the app needed a sectioned navigational menu. Since I was using the XPages Framework for this application (BTW, this is a great package and makes it VERY easy to come up with a very nice looking, functional app very quickly) I decided to just make a few modifications to add the required navigational menu. I sent these changes over to Steve Castledine for inclusion in the XPages Framework. Whether or not he'll use it, I don't know, but hopefully he will.

To make this I created a new custom control and called it ccSectionSideMenu. This very closely resembles the ccSideMenu custom control within the XPages Framework.
<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <div class="lotusMenu" role="menu"> <div class="lotusBottomCorner"> <div class="lotusInner"> <xp:panel id="Image" rendered="#{javascript:compositeData.imageSRC!=null}" styleClass="lotusCenter lotusInlinePhoto"> <xp:link escape="true"> <xp:this.value><![CDATA[#{javascript:if(compositeData.imageLink!=null){ compositeData.imageLink; }else{ database.getHttpURL(); }}></xp:this.value> <xp:image url="#{javascript:compositeData.imageSRC}" id="image1" alt="#{javascript:compositeData.imageTitle}"> <xp:this.style><![CDATA{javascript:var css="border:1px solid #666666;margin:5px 0 10px;"; if(compositeData.imageHeight!=null){ css+="height:"+compositeData.imageHeight+";"; } if(compositeData.imageWidth!=null){ css+="width:"+compositeData.imageWidth+";"; } return css }></xp:this.style> </xp:image> </xp:link> </xp:panel> <xp:text escape="false" rendered="#{javascript:applicationScope.baseSideMenuSections != null}"> <xp:this.value><![CDATA{javascript:var html=""; var secStyleClass=""; var subStyleClass=""; var sessionID=""; if(sessionScope.sessionID!=null){ sessionID="?SessionID="+sessionScope.sessionID; } for (var x=0;x<applicationScope.get("baseSideMenuSections").length;x++){ /** * Get the style of the section item */ if (@RightBack(context.getUrl().getPath(),"/").toString() == applicationScope.get("baseSideMenuSections")[xlink.toString()) { secStyleClass = " selected"; }else{ secStyleClass = ""; } /** * Build the section link. Be sure to include the div and ul for submenus */ html += "<div class=\"lotusMenuSection\">" if (@Left(@LowerCase(applicationScope.get("baseSideMenuSections")link),4) === "http"){ html+="<h3 class=\""+secStyleClass+"\"><a href=\""+applicationScope.get("baseSideMenuSections")link+sessionID+"\" title=\""+applicationScope.get("baseSideMenuSections")title+"\">"+applicationScope.get("baseSideMenuSections")title+"</a></h3>"; }else{ html+="<h3 class=\""+secStyleClass+"\"><a href=\""+sessionScope.path + "/" + applicationScope.get("baseSideMenuSections")link+sessionID+"\" title=\""+applicationScope.get("baseSideMenuSections")title+"\">"+applicationScope.get("baseSideMenuSections")title+"</a></h3>"; } /** * Now build the div that will contain the submenus */ if (applicationScope.get("baseSideMenuSections")linkArray.length > 0){ html += "<div class=\"lotusMenuSubsection\"><ul>"; for (i = 0;i < applicationScope.get("baseSideMenuSections")linkArray.length;i++) { /** * Get the style of the sub section item */ if (@RightBack(context.getUrl().getPath(),"/").toString() == applicationScope.get("baseSideMenuSections")linkArraylink.toString()) { subStyleClass = " lotusSelected"; }else{ subStyleClass = ""; } if (@Left(@LowerCase(applicationScope.get("baseSideMenuSections")linkArraylink),4) === "http"){ html+="<li class=\""+subStyleClass+"\" role=\"menuitem\"><a href=\""+applicationScope.get("baseSideMenuSections")linkArraylink + sessionID+"\" title=\""+applicationScope.get("baseSideMenuSections")linkArraytitle+"\">"+applicationScope.get("baseSideMenuSections")linkArraytitle+"</a></li>"; }else{ html+="<li class=\""+subStyleClass+"\" role=\"menuitem\"><a href=\""+sessionScope.path + "/" + applicationScope.get("baseSideMenuSections")linkArraylink + sessionID+"\" title=\""+applicationScope.get("baseSideMenuSections")linkArraytitle+"\">"+applicationScope.get("baseSideMenuSections")linkArraytitle+"</a></li>"; } } html += "</ul></div>"; //Close list and lotusMenuSubsection } html += "</div>"; //Close lotusMenuSection } return html;}]]></xp:this.value> </xp:text> <!-- </ul> --> </div></div></div></xp:view>

Now, to support the computed field in the code above, I had to make some changes to the xpUtil Server Javascript script libaray. These are the 2 functions I added:
var baseSideMenuSections = new Array(); // Contains Side Menu sections for framework function menuSection(link,title){ //Menu Section object this.linkArray=new Array(); this.title=title; this.link=link; this.prototype.addLink = function(link,title){ this.linkArray[this.linkArray.length]=new baseLink(link,title); } } function newSideBarSection(link,title) { baseSideMenuSections[baseSideMenuSections.length]=new menuSection(link,title); applicationScope.baseSideMenuSections=baseSideMenuSections; return baseSideMenuSections[baseSideMenuSections.length-1]; }

And I modified the createFromProperties function and just added this code in between Side Bar and Footer Column blocks:
var o = null; errorMsg="Side Bar Sections"; titles=layout.getString("sideBarSectionMenu.title").split(","); links=layout.getString("sideBarSectionMenu.link").split(","); for(var x=0;x<titles.length;x++){//Create Side Bar Sections o = newSideBarSection(links[x],titles[x]); var subLinks = layout.getString("sideBarSectionMenu" + (x+1) + ".link").split(","); var subTitles = layout.getString("sideBarSectionMenu" + (x+1) + ".title").split(","); for (var y=0;y<subTitles.length;y++){ o.addLink(subLinks[y],subTitles[y]); } }

I really can't take a lot of credit for all the Javascript code I listed above. This code was just adapted from other functions and code blocks already in that script library. So I guess Steve Castledine and/or Niklas Heidloff wrote this code and really deserve the credit as all I did was re-task it to meet my needs. But the last piece of this puzzle is the layout.properties file. I added the following:

#Side Bar Menu Sections
sideBarSectionMenu.title=Section1,Section2
sideBarSectionMenu.link=Section1.xsp,Section2.xsp
sideBarSectionMenu1.title=subMenu1.1,subMenu1.2,subMenu1.3
sideBarSectionMenu1.link=subMenu1-1.xsp,subMenu1-2.xsp,subMenu1-3.xsp
sideBarSectionMenu2.title=subMenu2.1,subMenu2.2,subMenu2.3
sideBarSectionMenu2.link=subMenu2-1.xsp,subMenu2-2.xsp,subMenu2-3.xsp

This just sets up the data to be parsed and turned into the sectioned menu and follows the same format as the footer columns section.

Here's what you end up with:

And that's it, hopefully you'll get some mileage out of this. I didn't have time to give it twisty support where the menus collapse when you close the section, but I do plan on adding that in the future when time permits or the absolute need arises. But as long as you don't have a ton of menu items to display this actually works really well. Enjoy!