AEM Server side Pagination | Community
Skip to main content
Level 6
May 19, 2023
Solved

AEM Server side Pagination

  • May 19, 2023
  • 2 replies
  • 1462 views

I have a scenario where I have 50-100 news pages now I want to create news listing component with the server side pagination using servlet or sling model with the limit of 10 news. I want to know can I achieve this if have any example of code. It would be great.

 

Thanks

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Vaibhavi_J

Hi @ronnie09 ,

Query builder API is one good option to achieve server-side pagination. Querybuider provides the flexibility of requesting particular records with offset values.
So implementation would be, call a service with a user click where pass the offset value to service and pull the required records using query builder API

 

For more details about query builder API , please have a check 
https://experienceleague.adobe.com/docs/experience-manager-65/developing/platform/query-builder/querybuilder-api.html 

Also, please check the below tutorial for a detailed implementation of pagination using Query Builder
https://www.youtube.com/watch?v=HXHsYKkl2ww 

2 replies

Vaibhavi_J
Vaibhavi_JAccepted solution
Level 7
May 19, 2023

Hi @ronnie09 ,

Query builder API is one good option to achieve server-side pagination. Querybuider provides the flexibility of requesting particular records with offset values.
So implementation would be, call a service with a user click where pass the offset value to service and pull the required records using query builder API

 

For more details about query builder API , please have a check 
https://experienceleague.adobe.com/docs/experience-manager-65/developing/platform/query-builder/querybuilder-api.html 

Also, please check the below tutorial for a detailed implementation of pagination using Query Builder
https://www.youtube.com/watch?v=HXHsYKkl2ww 

MayurSatav
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
May 21, 2023

Hi @ronnie09 ,

 

Yes, you can achieve server-side pagination in AEM using either a Sling Servlet or a Sling Model. Here's an example of how you can implement it:

1. Create a Sling Servlet or a Sling Model to handle the request for the news listing component.
- If you're using a Sling Servlet, create a Java class that extends `SlingAllMethodsServlet` and register it as a service using the `@SlingServlet` annotation.
- If you prefer using a Sling Model, create a Java class with the necessary logic for fetching the news data.

2. In the Sling Servlet or Sling Model, retrieve the news pages from the AEM repository based on your criteria (e.g., page properties, tags, etc.).
- You can use the AEM Query Builder API, JCR API, or AEM's Resource API to fetch the news pages.

3. Implement the server-side pagination by specifying the desired page size (e.g., 10 news per page) and the current page number.
- You can calculate the offset and limit values based on the page size and current page number to fetch the appropriate subset of news pages.

4. Return the paginated news data as a JSON response from the Sling Servlet or Sling Model.
- Serialize the retrieved news data into a JSON format and return it as the response.

Here's a sample code snippet using a Sling Servlet:

@Component(service = Servlet.class, property = { "sling.servlet.paths=/bin/newslisting" }) public class NewsListingServlet extends SlingAllMethodsServlet { @Override protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException { // Get the current page number and page size from the request parameters int pageNumber = Integer.parseInt(request.getParameter("page")); int pageSize = Integer.parseInt(request.getParameter("size")); // Calculate the offset and limit values based on the page size and current page number int offset = (pageNumber - 1) * pageSize; int limit = pageSize; // Fetch the news pages from the AEM repository using the offset and limit // You can use the Query Builder API or any other method to retrieve the news pages // Serialize the retrieved news data into a JSON format JSONArray jsonArray = new JSONArray(); for (NewsPage newsPage : newsPages) { JSONObject jsonObject = new JSONObject(); // Populate the JSON object with the necessary properties from the news page jsonObject.put("title", newsPage.getTitle()); jsonObject.put("date", newsPage.getDate()); // Add the JSON object to the JSON array jsonArray.put(jsonObject); } // Return the JSON response response.setContentType("application/json"); response.getWriter().write(jsonArray.toString()); } }