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?

adf_custom_pagination_02

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:

adf_custom_pagination_11 adf_custom_pagination_12

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:

adf_custom_pagination_06

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:

adf_custom_pagination_03

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

adf_custom_pagination_04

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

adf_custom_pagination_07

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;

adf_custom_pagination_08

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

adf_custom_pagination_09

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

adf_custom_pagination_05

And finally, we have our custom pagination in place;

adf_custom_pagination_10

3 comments

  1. bhargav

    on

    Reply

    Hi your blog post is interesting can i get sample code for this implementation.

    Thanks in advance.

    • oralution

      on

      Reply

      Hi,

      We have uploaded the zip. The file is displayed as an image, so click on it, the save the “image” and just change the extension to .zip.

      • suresh

        on

        Reply

        Hi,

        Nice Explanation!! I can not find out any image to download the code.Could you please send the code to my mail suresh.adfc@gmail.com.

        Thank you,
        Suresh.

Leave a comment

Your email address will not be published. Required fields are marked *

Social Media

Stay up-to-date with our latest ADF and related technical posts via your favourite social network services.