A lot has been written about the content presenter and many people say it is a very powerful tool to integrate content from WebCenter Content into your portal. I fully agree with this but sometimes the content presenter lacks functionality that you would think would be out of the box.
One of those functionalities is having pagination when you have a lot of items to display. Suppose that you want to display the contents of a folder or the result of a query and the number of results can be very large, how will you display this in a proper way to your users? Simple, use pagination! But the content presenter does not support this so we will have to build it ourselves.
In this post I will explain how we can create pagination for the content presenter by building a custom content presenter template.
You can download the example application from here.
It requires only a few steps:
I've been thinking on a way of doing this without using a managed bean because this would be easier when you want to use the template in WebCenter Spaces. Unfortunately, I don't think this is possible... If someone can think of a way to replace the functionality of the managed bean by putting it in the template, please let me know!
The managed bean will handle the action for the Next and Previous button. It will also check if there is a next or previous page so we can disable the buttons accordingly. In order to do so, we need to keep track of the currentPage and pageSize. Based upon those two attributes we can make our calculations.
Here's the handler for the next button:
The code is quite straight forward. We set the currentPage to its new value and we check if the next page button should be disabled or not.
The same logic applies to the previousButton:
In this case the check is easier because we only need to disable the previous page if we are on the first page.
Another piece of code to notice is the getFirst method:
This will be used to drive the pagination to the iterator. In our template, the af:iterator has a first attribute which tells the iterator which index is the first one to show.
These are the most important parts of the code.
The next step is to create the content template. Here's the code from the example application:
Most of the code is layout. One of the most important parts is the definition of the iterator:
As told previously, the first attribute will calculate the actual starting element. The rows attribute will tell the iterator how many rows it should display. Because we need to know this, we have created the attribute in our managed bean and bound this to the iterator.
I also bound the iterator to an object in my managed bean. This is because I need to know how many elements the iterators holds in order to know when to disable to next page button.
There is also a panelGroupLayout surrounding the iterator. This is required because we need to have a component with the partialTriggers attribute. The af:iterator does not support this attribute so we surround it with the panelGroupLayout. This group will be refreshed whenever we click on the Previous or Next button.
The next important part is the section with the two buttons:
The most important part about these buttons is that there is a disabled attribute that will set the initial state of the buttons. We need to have it for both buttons just in case the content presenter does not provide more elements then 1 page can handle. In that case, both buttons need to be disabled and this is exactly what the disabled attribute will do.
That's it. Create a portlet resource from the fragment.
Run the application and don't forget to set the Show flag for the content presenter template in the resource manager:
Add the content presenter to whatever page you like and add content:
After clicking on Next:
Here's the download link to the application.
That's it. Hope you enjoyed this.