Learning XPages Part 13 : Listing The Locations In The Sidebar

So our new custom control is ready and
is embedded in the layout, now comes the fun part, making it display some
real data from the backend domino database. This list of locations is like
the main menu in our application so I’m going to style it using OneUI and
then show you how to use a repeat control to display the list of locations.

Lets start by opening our sb_LocationsList
custom control again. Get rid of the placeholder text and drag over THREE,
yes 3, nested panels, you’ll need to give each of these panels a styleclass
in the following order : lotusMenu, lotusBottomCorner, and lotusInner.
Your current XPages code should look something like this :

and if you save and refresh your page
you should now see the basic menu layout appearing in your sidebar.

Lets add some content using one of the
most powerful features of XPages. The Repeat Control. The repeat control,
as it’s name implies, allows you to repeat whatever is inside the repeat
control any number of times. You can have a single control inside the repeat
control, you can have multiple controls inside a repeat control, you can
have custom controls inside and repeat control and you can even have repeat
controls inside repeat controls. Once you start working with repeat controls
you will NEVER go back to traditional Domino web application design, in
just minutes to you build part of your web application when it would have
taken days worth of view design, LotusScript and debugging the old way.

We are going to be repeating information
from one of the views that I created in the database so we need to tell
the XPage where to find the data. To do this we first need to define a
data source. If you look at the outline for the XPage on the left side
of your screen you will see one of the outline entries called ‘Custom Control’,
if we were dealing with an actual XPage then this would say ‘XPage’. They
are both the same. Select it and you’ll see the properties for the XPage/Control.

We are going to add a new data source
based on a domino view. Select the ADD button and select Domino View to
get started. A new section will appear to the right of the datasources
properties box where you can select the view that you want to use.

I have select the Locations lookup view
that I created and I have called my data source DominoView.

Now drag in a repeat control from the
control pane on the right of the screen into the panels that we created
earlier and then drag a computed field control into the repeat control.
We’ll just use the computed field control to explain how to use the repeat,
in the next part we’ll replace it with something a bit nicer that fits
in with the menu style.

Go back to the repeat control so you
can see it’s properties, it may already have the binding source listed,
we then need to add in some extra options so we can get to the data source.

The collection name is the variable
that we can use to get to the documents and the index name is a count of
the current entry. We are just going to be using rowData for this example
of the repeat control.

Now click on the computed field and
look at it’s value properties. we are going to bind the data using JavaScript
so click the JavaScript radio button and then click on the button to bring
up the editor. Here’s the JavaScript we are going to use :

rowData is the collection name we defined
in the repeat control’s properties and getColumnValue is exactly like the
lotusScript method that you can use on a NotesViewEntry.

Save and refresh the page and you should
see something similar to this depending on what data you have in your database.

As you can see it does not look great
yet so in the next part we will tidy it up and make if look more useful
even though it does not link to anything yet.