Wednesday, April 7, 2010

XPages: Adding controls inside a pager

I haven't read anyone else writing about this, so I thought I should share this technique with you.

While working on a custom search data table, I wanted to show the number of entries in the result. I wanted the pagination links to be on the left of the pager bar, and the number of entries on the right side.

At first I started mucking about with CSS, but that ended up being a maintenance nightmare as the search control I was developing was to be used in a number of pages. I noticed that the pager control had the xp:key attribute. This attribute is also used by the editable area control that you can put inside a custom control. I noticed when adding multiple controls to the editable area, that the generated source code wrapped the controls inside a panel with an xp:key attribute.

Tried the same in the data table control and the view control, and it works. If you want to have your own controls in the header pager area, simply add an xp:panel-tag in the source code, with the attribute, xp:key="headerPager". If you want a custom footer, create an xp:panel-tag with the attribute xp:key="footerPager". If you already have a pager there, simply wrap it in the aforementioned panel, and remove the xp:key attribute from it, and it should work without the need for further modification.

Example of use:

Unfiltered view


Filtered view

2 comments:

Anonymous said...

Hi Tommy, do you have a sample-db? Regards Alan

Unknown said...

I made a simple demoapp for you. Posted here.

Hope it helps :)