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
Solved! Go to Solution.
Views
Replies
Total Likes
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/quer...
Also, please check the below tutorial for a detailed implementation of pagination using Query Builder
https://www.youtube.com/watch?v=HXHsYKkl2ww
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/quer...
Also, please check the below tutorial for a detailed implementation of pagination using Query Builder
https://www.youtube.com/watch?v=HXHsYKkl2ww
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());
}
}
Views
Likes
Replies