How to navigate/browse on next/previous page in aem?

2
votes

I'm developing pages in AEM 6.3. Right now I have a situation to develop a page containing 2 links that browse to next and previous page with respective to current page. Let's say I have 3 pages under my project site /content/project/en.

  • Page A
  • Page B
  • Page C

Let's assume, if I'm on Page B, then my next page should be Page C and previous page should be Page A. Those two links(next/previous) should redirect me to Page A and Page B.

There might be many approaches to do that but what I have in mind is that, I'll be making an ajax get request which will return me next and previous pages in key/value format. To do this I'll be using sling servlet object to get the page path and query builder to make query on that path to get the next and previous page. This approach works fine if there is very limited number of pages but would be time consuming if pages increases.

I want simple solution to implement this. Or is there any plugin in aem to do this? I also tried to do that with currentPage.nextSibling() in sightly but there is no such thing exist in aem.

2
javaaem
you can use page.listChildren() helpx.adobe.com/experience-manager/6-3/sites/developing/using/… and then move across the pages – karthick
yes can use that, but I have to iterate on page.listChildren() on each page. That would be time consuming too, if I'm not wrong. – Junaid Zubair
@JunaidZubair nope, listChildren() would be faster than querying in this case, as you are listing only the first level children. See when to use JCR queries outlined in the best practices. – rakhi4110
@JunaidZubair your pages are going to be cached eventually in dispatcher. so this will be a single time activity per cache creation if the path;s are set properly. – karthick

2 Answers

0
votes

One possible solution is to create an end point that -

  • can be called upon a page
  • returns page paths (use page.listChildren())as JSON array

Two ways to do that -

  1. In your app’s base page, add a jsp listChildren.jsp that renders json
  2. Create a resourceType based servlet with selector listChildren and extension json. ResourceType being page’s resourceType myapp/page/testpage

Call this endpoint on parent page of the page being rendered, thus you get list of all siblings page path and current page’s path. You can get this endpoint to be catchable so as to avoid multiple publish hit.

Once you get JSON, use it in JS to get the index of current page path (use find(‘path/to/current/page)). once you have index, you could use index-1 & index+1 to get previous and next page path.

Note - in case you are using short path for website url make sure JSON also return short path

0
votes

As addition with new requirement which was page on next/previous link should be sorted in created date with respective of current page. So I came up with following solution.

I have created a component name 'Next Previous Pagination' and used a WCMUsePojo model in htl language. This model is responsible to get next and previous page of the current page. Following are the jcr queries to get next and previous page.

For next Page,

select page.* from [cq:Page] AS page WHERE 
ISDESCENDANTNODE(page,'/content/project/myCurrentPage') 
AND page.[jcr:content/jcr:created] >= CAST('${createdDateOfCurrentPage}' AS 
DATE) AND NAME(page) <>'${currentPageName}' ORDER BY page. 
[jcr:content/jcr:created] asc Limit 1

For previous page,

select page.* from [cq:Page] AS page WHERE 
ISDESCENDANTNODE(page,'/content/project/myCurrentPage') 
AND page.[jcr:content/jcr:created] <= CAST('${createdDateOfCurrentPage}' AS 
DATE) AND NAME(page) <>'${currentPageName}' ORDER BY page. 
[jcr:content/jcr:created] desc Limit 1