Learning XPages Part 39 : Adding Pagers To Our Repeats
Tags : Lotus Domino XPages Pagers
Bookmark :
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.
Bookmark :
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.
