XPages Data Views – Part 5: Pager Add Rows Control

The Pager Add Rows control is simple to add, but it provides a great feature for navigation in your Data Views. In this post, I’ll show how to use it.

Data View Series

Pager Add Rows Control

The Pager Add Rows control provides a different way to navigate the data in your Data View. You’ve probably seen pagers in a lot of view controls (and that’s an option here as well), but the Pager Add Rows control provides a more modern interface.

When the user gets to the end of the number of rows shown on the page, there’s a link to add more. The user can continue to add more rows until the end of the data set is reached, at which point the link will be disabled (but still visible).

This is critical in a mobile application, but it can also be very useful in full browser applications as well. It allows you to limit the number of entries loaded initially, but still allow the user to continue viewing more data as needed.

DataView_5_0

Adding the Control

The Pager Add Rows control can be found in the Extension Library section of the Controls view.

DataView_5_A

Just drag and drop it into a facet of the Data View control. It does not need to be bound specifically — it will automatically work when added to a fact.
DataView_5_B

Properties

You can use the text property to change the text of the link that adds more rows.

There are several properties that allow you to adjust partial refresh and partial execution settings, but none of them are necessary for the control to work. I tested it with the default settings (all of those properties blank) and it appeared to only partially execute and partially refresh the data view itself. But there are exceptions to this rule, noted below.

When you click the Show more… link, it will display an additional set of rows. By default, the number of rows will be the same as the number of rows shown in the Data View (per the rows property). You can change this by setting the rowCount property of the Pager Add Rows control. However, it also seems to require the refreshPage property set to true or a custom setting does not take effect, regardless of whether you hard-code or compute the rowCount.

Enhancements

One minor enhancement is to hide the Pager Add Rows control if there aren’t more documents in the view than can be displayed, based on the Data View’s rows property. This code on the rendered property of the Pager Add Rows control will do the trick:

var dv = getComponent('dataView1');
return (dv.getRowCount() > dv.getRows());

It reads the rows property of the Data View, so it can be used as is on any Pager Add Rows control.

This will work on the initial page display without the refreshPage property being set. However, if that property is set, it will also hide the control when the end of the data set is reached.

It’s interesting to note that the getRows() method of the Data View always seems to return a number slightly higher than the number currently being displayed. That seems like good design for performance.

Another enhancement you can provide is to give the user a way to define how many rows the pager will add. If you compute the rowCount property to read a value from a combobox on the page, you can make this work. The combobox’s onchange event must trigger a partial refresh on the Pager Add Rows control (to update the computed row count) and the refreshPage property of the Pager Add Rows control must be set to true.

Here’s the source code for a combobox and Pager Add Rows control where this works (and also includes the code to hide the control when there are no more rows):

<xp:comboBox id="cbNumRows" xp:key="pagerBottomLeft" defaultValue="10">
  <xp:selectItem itemLabel="10"></xp:selectItem>
  <xp:selectItem itemLabel="25"></xp:selectItem>
  <xp:selectItem itemLabel="50"></xp:selectItem>
  <xp:eventHandler event="onchange" submit="true"
    refreshMode="partial" refreshId="pagerAddRows1">
  </xp:eventHandler>
</xp:comboBox>
<xe:pagerAddRows id="pagerAddRows1" xp:key="pagerBottom" refreshPage="true">
  <xe:this.rendered><![CDATA[#{javascript:var dv = getComponent('dataView1');
return (dv.getRowCount() > dv.getRows());}]]>
  </xe:this.rendered>

  <xe:this.rowCount><![CDATA[#{javascript:print ('row count: ' + parseInt(getComponent('cbNumRows').getValue()));
return parseInt(getComponent('cbNumRows').getValue());}]]>
  </xe:this.rowCount>
</xe:pagerAddRows>

Up Next

In the next post, I’ll show how to use the Pager Save State control to allow users to restore the previous state of expanding/collapsing when returning to the view later in the session.

Advertisements

4 responses to “XPages Data Views – Part 5: Pager Add Rows Control”

  1. bryanschmiedeler says :

    I really like this control and have enjoyed your article, BUT how can I make extra columns NOT be right justified. This seems to be a huge problem with this control.

    • Brad Balassaitis says :

      Thank you!

      It’s just designed that way. It’s not intended to have a lot of extra columns.

      The other problem is that the details section cannot take up space under the extra columns, so if you moved them over, you’d have that much less room for details.

      If you don’t want them so far over on the screen, maybe you could enclose the entire data view in a panel that has a smaller width than the screen. That way, the columns wouldn’t be all the way off to the side of the screen — you could keep them closer to the summary column.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: