Expand my Community achievements bar.

SOLVED

Search and Pagination Component

Avatar

Level 3

Hi,

I am a beginner in AEM,I want to implement the following function as in screenshot. This site has a paging function. How can I implement it.

1697524020071.jpg

Best regards!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @krist_wang ,

From your Ajax call, call the servlet,

 

bin/public/aem-demo/blog?page=2

 

Where the page params will be the page number.

Try with the following Java code and change them according to your logic.

 

@Component(service = Servlet.class,
        property = {
                Constants.SERVICE_DESCRIPTION + "= Servlet",
                ServletResolverConstants.SLING_SERVLET_METHODS + "=" + HttpConstants.METHOD_GET,
                ServletResolverConstants.SLING_SERVLET_PATHS + "=bin/public/aem-demo/blog"
        })
public class PaginationServlet extends SlingAllMethodsServlet {

    @Reference
    private QueryBuilder queryBuilder;

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
        String pageNumber = request.getParameter("page") != null ?request.getParameter("page") : "1";

        Map<String, String> searchPredicates = searchPredicates("10", pageNumber);
        Query query = queryBuilder.createQuery(PredicateGroup.create(searchPredicates), request.getResourceResolver().adaptTo(Session.class));
        SearchResult searchResult = query.getResult();

        // Convert search results to a list of pages
        List<MyModel> items = new ArrayList<>();
        for (Hit hit : searchResult.getHits()) {
            try {
                Page page = hit.getResource().adaptTo(Page.class);
                // Put necessary Items into your model
                MyModel model = new MyModel(page.getTitle(), page.getPath());
                items.add(model);
            } catch (RepositoryException e) {
                log.error("Error Happened {}", e, e.getMessage());
            }

        }

        response.setHeader("content-type", "application/json;charset=UTF-8");
        response.setStatus(response.SC_OK);
        response.getWriter().write(new ObjectMapper().writeValueAsString(items));
    }

    private Map<String, String> searchPredicates(String itemPerPage, String pageNum) {
        Map<String, String> predicateMap = new HashMap<>();
        predicateMap.put("path", "/content/aem-demo/master");
        predicateMap.put("property", "cq:Page");
        predicateMap.put("p.limit", itemPerPage);
        predicateMap.put("p.offset", pageNum);

        return predicateMap;
    }
}

 

Hope this helps you.

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @krist_wang ,

From your Ajax call, call the servlet,

 

bin/public/aem-demo/blog?page=2

 

Where the page params will be the page number.

Try with the following Java code and change them according to your logic.

 

@Component(service = Servlet.class,
        property = {
                Constants.SERVICE_DESCRIPTION + "= Servlet",
                ServletResolverConstants.SLING_SERVLET_METHODS + "=" + HttpConstants.METHOD_GET,
                ServletResolverConstants.SLING_SERVLET_PATHS + "=bin/public/aem-demo/blog"
        })
public class PaginationServlet extends SlingAllMethodsServlet {

    @Reference
    private QueryBuilder queryBuilder;

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
        String pageNumber = request.getParameter("page") != null ?request.getParameter("page") : "1";

        Map<String, String> searchPredicates = searchPredicates("10", pageNumber);
        Query query = queryBuilder.createQuery(PredicateGroup.create(searchPredicates), request.getResourceResolver().adaptTo(Session.class));
        SearchResult searchResult = query.getResult();

        // Convert search results to a list of pages
        List<MyModel> items = new ArrayList<>();
        for (Hit hit : searchResult.getHits()) {
            try {
                Page page = hit.getResource().adaptTo(Page.class);
                // Put necessary Items into your model
                MyModel model = new MyModel(page.getTitle(), page.getPath());
                items.add(model);
            } catch (RepositoryException e) {
                log.error("Error Happened {}", e, e.getMessage());
            }

        }

        response.setHeader("content-type", "application/json;charset=UTF-8");
        response.setStatus(response.SC_OK);
        response.getWriter().write(new ObjectMapper().writeValueAsString(items));
    }

    private Map<String, String> searchPredicates(String itemPerPage, String pageNum) {
        Map<String, String> predicateMap = new HashMap<>();
        predicateMap.put("path", "/content/aem-demo/master");
        predicateMap.put("property", "cq:Page");
        predicateMap.put("p.limit", itemPerPage);
        predicateMap.put("p.offset", pageNum);

        return predicateMap;
    }
}

 

Hope this helps you.

Avatar

Administrator

@krist_wang Did you find the suggestions from Sady helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni