In this article I will show you how to add a jQueryUI accordion to your XPage as a menu.

Demonstration site

This article is published in conjunction with the original post and the demonstration site

Download

The sample database is available from the link above and (here)

Rolling my theme

Using the jQueryUI themeroller I modified the darkness ui theme to match the colors used by the oneui2.1_onyx CSS which the site now uses

Once complete I downloaded the theme via the download builder. I included everything in the download because if I use jQueryUI at a later date I don’t want to have to go through this again – it is a demo site after all and page load time is not on my list of priorities (or I am lazy).

Being serious for a moment:

If you are going to use only one of the capabilities included in the builder for production you should remove everything else. The difference can be as much as over 150k and that will make a huge difference in pageload time.

The download

The contents of the jquery-ui-1.8.18.custom.zip are the necessary javascript and css files to create the visual effect and stylize the webpage. The folder content must be maintained with the structure and the css files refer to the images within the folder structure. You can change this at your own risk but I strongly suggest you don’t. The contents of the folder are as follows:

• js folder
  • jquery-ui-1.8.18.custom.min.js
  • jquery-1.7.1.min.js
• css
  • custom-theme
    • jquery-ui-1.8.18.custom.css
    • images
      • 14 images supporting the style

Adding the files to your database

The js file and the css file should be dragged and dropping into the WebContent folder of your database. Visible from the package explorer view of your database.

Adding the file references to your XPage

Within my demo database I have a commonContainer Custom Control that controls my look and feel. I am going to add the file references to that custom control in the following manner. In the source panel at the top of the page I add a reference to each of the necessary js and css files (the paths are relative the XPage)

Adding the Accordion to the menu

Currently the menu is created using this XML markup

<ul>
	<li><strong>#1 High Charts</strong></li>
	<li></li>
	<li></li>
	<li>
</li>
</ul>
etc etc.........

which generates the following HTML when viewed through the webpage

<div class="lotusMenu">
<div class="lotusBottomCorner">
<div class="lotusInner">
<ul>
	<li><a id="view:_id1:_id2:link9" class="xspLink" href="SampleDB/jQInX.zip">Download the Sample DB</a></li>
</ul>
<ul>
	<li><strong>#1 High Charts</strong></li>
	<li><a id="view:_id1:_id2:link1" class="xspLink" href="/xomino/jQinX.nsf/xFruit_Data.xsp">Binding to a Data Table</a></li>
	<li><a id="view:_id1:_id2:link2" class="xspLink" href="/xomino/jQinX.nsf/xFruit.xsp">Binding to a View Panel</a></li>
	<li><a id="view:_id1:_id2:link3" class="xspLink" href="http://www.highcharts.com/demo" target="_blank">Highcharts.com Demos</a></li>
</ul>
<ul>
	<li><strong>#2 Labelify</strong></li>
	<li><a id="view:_id1:_id2:link4" class="xspLink" href="/xomino/jQinX.nsf/xLabelify.xsp">Visual Field Enhancement</a></li>
</ul>
 etc.....</div>

looking at the jQueryUI Accordion example page the menu is created from HTML looking like this….

<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</div>
<h3><a href="#">Section 2</a></h3>
<div>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</div>
</div>

The critical thing to grasp is that the HTML for each part of the must eventually look like this

<h3><a href="#">Section 1</a></h3>
<div>Text of the link - can be HTML here</div>

And my menu currently does not – time for some basic re-coding. Not hard just tedious (and like the good programmer I am – I am so glad I planned out the website before I started coding it) (*coughs politely*) As this menu is going to grow each week (I assume) it would be foolish to hard code it every week – so I am going to create some documents to represent the menu items and using a Repeat Control I am going to display the documents as HTML to build the Accordion.

Creating the Menu documents

I am going to use a “menu” form to create the documents (not worth an XPage as I am doing this through the client on the back end), and a vwMenu view. The form is very basic (like I said – this is back end only for me, not a production-worthy creation).

The view is categorized with the HTML I am going to need already written into the view columns. Because some of the links are to external websites we have to make a check and if so include the whole URL and not a relative one to the XPage

To generate the HTML for the menu I used a repeat control – I use the repeat control to @DbColumn() the first column of vwMenu and then for each value in that list I am @DbLookup() the values in the 2nd column.

I was doing this with a computed text field and that initially caused me a problem. As you can see from the image below there is a lot more HTML generated that I need for the accordion…..there are way too many SPANS and DIVS

<span class="xspTextComputedField">
</span>
<h3><a href="#">#1 HighCharts</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xFruit_Data.xsp">Binding to a Data Table</a>

<a href="/xomino/jQinX.nsf/xFruit.xsp">Binding to a View Panel</a>

<a href="http://www.highcharts.com/demo">Highcharts.com</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#2 Labelify</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xLabelify.xsp">Visual Field Enhancement</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#3 Masked Input</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xMaskedInput.xsp">Visual Field Enhancement</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#4 prettyPhoto</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xPrettyPhoto.xsp">A lighbox</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#5 jQueryUI</a></h3>
<div>
<a href="http://jqueryui.com/demos/accordion/#collapsible">jQueryUI.com accordion</a></div>
<span class="xspTextComputedField">
</span>

This would not work for the accordion which needs a very specific format to work – so thanks to Mark Leusink – I have a new XPages *Best Friend Forever* – disableTheme=”true”.

To remove the <span id=”blah” and return to the HTML I really want from the view there are two steps:

1. Remove the id from the field
2. In the All Properties tab select disabledTheme=true