Subscribe via Feed

Adding controls inside a pager

Tommy Valand, Apr 6, 2010 3:38:21 PM

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



8 responses to Adding controls inside a pager

Tommy Valand, November 17, 2010 5:37 AM

I think it should work in 8.5.1.

I posted a demoapp at my blog a couple of days ago:
http://dontpanic82.blogspot.com/2010/11/xpages-demoapp-adding-controls-to-pager.html


Alan, November 15, 2010 10:20 AM

Hi, do you have a working example of the view filtering?


Atul Saxena, August 5, 2010 6:50 PM

Can we achieve the same result in 8.5.1? As I am trying to replicate the same but it does not work.


Tommy Valand, May 4, 2010 5:19 PM

Sorry for not replying. I thought I was subscribing to the comments to my posts.

As Nathan wrote, the "wrapper panel" is put inside a <xp:this.facets> node.

E.g.
<xp:viewPanel>
<xp:this.facets>
<xp:panel xp:key="headerPager"><!-- Header area controls --></xp:panel>
<xp:panel xp:key="footerPager"><!-- Footer area controls --></xp:panel>
</xp:this.facets>
<!-- The columns/etc -->
</xp:viewPanel>


Jeremy Hodge, April 27, 2010 5:36 PM

You are correct ... You can view a sample here: http://www.xpagecontrols.com/xpagesblog.nsf/adding-controls-inside-a-pager.xsp


Nathan, April 27, 2010 5:24 PM

Update: I figured it out.........I think

<xp:panel xp:key="footerPager">Put Additional Code or controls here....<xp:pager
layout="Previous Group Next" id="pager1">

</xp:pager></xp:panel>


Nathan, April 27, 2010 5:16 PM

Source would be appreciated, can't quite figure out where to put this....


Gerald Mengisen, April 7, 2010 9:25 AM

Great tip - unfortunately, I have some trouble implementing it. Do you add the panel just before <xp:this.facets> if there is a pager on the page? Or can you post the source, please?