Learning XPages Part 39 : Adding Pagers To Our Repeats

By now our application is really starting
to look complete however in our ‘location’ XPage we are currently only
displaying the first 30 people in each location. If you have more then
30 people in a location you’ll need some way to display the next 30 people
and so on till you reach the end of the view. In XPages there is a new
control called the ‘Pager’ which we can add to the XPage to give us this
functionality.

Let’s start by opening the ‘content_location’
custom control that we created earlier. At the moment it is just a table
with a repeat control inside of it to repeat the rows of the table. Lets
drag in a ‘pager’ control from the controls pane on the right of your domino
designer screen. Drag it up to the top of the custom control and then switch
to the source view and make sure that it appears inside the ‘lotusContent’
div.

Staying in the source view scroll down
to the repeat control that we created earlier and select it. In an earlier
part of the series I mentioned that having a repeat control inside a table
would produce invalid HTML if the repeat control had a name, however for
a pager to be able to connect to the repeat control we need to give it
a name. I’ve called mine ‘peopleRepeat’

Now go back to the pager we just added
and have a look at the properties for it. In the ‘Attach to’ section we
select the name of the repeat control and for the Phonebook application
I have also selected to enable the ‘partial refresh’ option.

If we save the custom control at this
stage and preview our page in the browser you’ll see the pager appear at
the top of the page.

This pager is very basic right now and
I have not given it any CSS classes from the OneUI CSS file. I’d like a
more detailed pager so back on the properties of the pager I have decided
to create a custom pager.

You can also select any of the sample
pages that lotus provides you with but a custom pager might be more powerful
and allows for greater styling. From the custom pager options I added a
couple of pager types in the order specified above. While it may not look
like a great order once I apply my CSS you’ll see why I selected them in
that order. Speaking of applying some CSS let’s add the ‘lotusPaging’ styleClass
to the overall pager control.

Now, the the source view you’ll see
some new controls called xp:pagerControl. You’ll see one for each of the
options you selected in the custom pager section above.

The first one has a type of ‘Status’.
By default this will display the current page number but if you go to it’s
all properties section you can set the value to ‘Page {0} or {1}’ and at
run time the XPages processor will convert this to display the current
page number where {0} appears and the total number of pages where {1} appears.

I have also given this a style class
of ‘lotusLeft’

The next three pagerControls I’ve given
a styleclass of ‘lotusRight’ and the last one I have left alone.

Now if we save and preview the XPage
our pager looks like this :

Left

Middle

Right

Pagers are very powerful and as you
can see a custom pager allows you more control over the CSS to position
the pager over your table or data view. I wasn’t happy with the way everything
was pushed together in the page group in the middle of the screen so after
examining the html that was generated by XPages I noticed that everything
was inside a <span> tag so I added some custom CSS to the custom.css
file

.lotusPaging span{padding-left:2px;padding-right:2px;}

Now any <span> tag inside the
lotusPaging class will have some extra spacing on either side. Here’s how
my pager looks now :

Much nicer.