FROM THE BLOG

ADF Tutorial: Implementing custom pagination.

Recently, we had a requirement were we need to implement a custom pagination for a content presenter template (integrating UCM into WC Portal). From there, we found useful information about how to achieve this on Yannick Ongena’s blog entry. Also, while researching for other requirements, we saw this Timo Hahn’s blog entry were he’s got a point:

Most users don’t use this feature which, or don’t know how to define a page variable.

So we decided to mix the two posts and now you are just reading the result as consequence of the explicit request from Yannick where he stated that if someone could implement the pagination without a bean let that know since that would make very easy the deployment of the component in Webcenter Spaces (what is known in PS7 as Portal now).

You can download the sample here. (just change the extension to .zip):

http://oralublog.files.wordpress.com/2013/12/custompagination.jpeg

So, how does the custom pagination would look like?

We’ve got the page size, the number of pages availiable according to the page size and the total result, next and previous buttons and a message indicating where are you at in the pagination. Having said this, the important fields are PageSize and CurrentPage. As previously stated, we are using of page variables instead a bean to take care of the logic. This is how it looks the page definition:

We have created two page variables and created the attribute binding to them. You can specify the default value (how are they going to be initialized). For this, we selected pageSize = 10 and currentPage = 1. The other field is the employee tree binding for our iterator. So let’s see how it loos like in the page:

As we can see, we show as many rows as we have indicated in or pageSize, and the key point for the pagination is to determine, which is going to be the first row to be shown. This value is

pageSize * (currentPage – 1)

We simply control the page size by putting setPropertyListener in the pageSize buttons:

Also, we want to restart the currentPage when changing the pageSize to avoid any inconsistency;

So, how do we know how many buttons to show (pages) ? Using a little of Maths;

We need to round up the division of the total results and the page size. That gives our iterator as many rounds as buttons we need. We just need to insert a new button and use the status variable from our iterator to print the buttons number;

And basically, each button will have its own setPropertyListener to update the currentPage;

What about our Previous and Next buttons? For our previous button just subtract one to current page and for next button add one;

And finally, we have our custom pagination in place;