Posts tagged "sling selector"

August 19, 2012

CQ Selector driven results page

In this article I would like to talk about CQ pages where content is based on the Sling selectors. Recently I have worked on a simple requirement for a customer project where a page would have a drop-down (or multiple) menu to filter certain types of content. In the demo below I have a simple set of Adobe products where I want to be able to filter by the product name and/or the product version. Let’s check out the demo first (focus on the selection and the URL changes):

Selector driven content demo

As you can see from the quick demo. Dropdown selection would trigger a URL redirection where content is filtered based on the sling selector. For example:

products.illustrator.all.html displays only Adobe Illustrator products, all versions.
products.illustrator.cs4.html displays only the Adobe Illustrator CS4 product.
products.photoshop.cs6.html displays only the Adobe Photoshop CS6 product.
…so on and so on…

And for demo purposes, we have created pages with a Product component with the following fields:

Now let’s get to see how the filtering works. Here I will provide code pertaining to the sling selector processing and query only.

Sling selector processing (Pagination also factored in):

    // page number should be request param not selector
    int pageNum = 0;
    if (request.getParameter("page") != null) {
            pageNum = new Integer(request.getParameter("page")).intValue();
        } catch(NumberFormatException e){}
    if(pageNum  0){
        // if product and version present
        if (selectors.length == 2) {
            selectedProduct = selectors[0].trim();
            selectedVersion = selectors[1].trim();
        } else if (selectors.length == 1) {
            if (selectors[0].trim().equalsIgnoreCase("cs4")) selectedVersion = "cs4";    
            else if (selectors[0].trim().equalsIgnoreCase("cs5")) selectedVersion = "cs5";    
            else if (selectors[0].trim().equalsIgnoreCase("cs6")) selectedVersion = "cs6";     
            else if (productsMap.containsKey((String) selectors[0].trim())) {
                selectedProduct = selectors[0].trim();
            } else {
                selectedProduct = "all";
                selectedVersion = "all";
        } else {
            selectedProduct = "all";
            selectedVersion = "all";

The above code would determine the product and the version selected by the user (since they are passed in the URL). And once we have the product, version determined, we can run the following query and display the results in tabular format just like in the demo:


    QueryBuilder builder = null;
    Map<String, Object> map = null;
    Query query = null;
    SearchResult result = null;
    map = new HashMap<String, Object>();
    map.put("path", "/content/demo/en/products");
    map.put("1_property.value","/apps/demo/templates/productspage"); // query only productspage
    map.put("2_property","jcr:content/par_main/product/sling:resourceType"); // query for pages with product component
    if (!selectedProduct.equals("all") && !selectedVersion.equals("all")) {
    } else if (!selectedProduct.equals("all")) {
    } else if (!selectedVersion.equals("all")) {
    builder = resource.getResourceResolver().adaptTo(QueryBuilder.class);
    query = builder.createQuery(PredicateGroup.create(map), currentNode.getSession());
    result = query.getResult();

And the above queries for pages that are using the product template, with a product component in it, and filter by either product category or the version if they are passed in.


10:32 PM Permalink
  • Authors

  • Archives

  • Developer Resources