AEM CQ 56 - Modifying SiteAdmin Search Panel Grid Template Column

Goal

Here we are going to work on the Siteadmin Search Panel grid columns. By default in the search grid, template paths are shown



With changes explained in this post, we are going to modify the Template column to show template name in column and path in tooltip, as follows



Source code and package install are available for download

Prerequisites

If you are new to CQ

Solution

1) We need a servlet for template names returned as json

2) Search panel UI changes to modify the grid column

The Servlet

A simple Templates servlet is needed. With a JCR SQL query, it returns all templates in the system ordered by jcr:title. Add the following code to servlet source and deploy it as an OSGI component

package apps.mysample.siteadmin;

import org.apache.felix.scr.annotations.sling.SlingServlet;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.apache.sling.commons.json.io.JSONWriter;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.jcr.Node;
import javax.jcr.NodeIterator;
import javax.jcr.Session;
import javax.jcr.query.Query;
import javax.jcr.query.QueryManager;
import javax.servlet.ServletException;
import java.io.IOException;

@SlingServlet(
        paths="/bin/mycomponents/templates",
        methods = "GET",
        metatype = false,
        label = "Templates Servlet"
)
public class Templates extends SlingAllMethodsServlet {
    private static final Logger log = LoggerFactory.getLogger(Templates.class);

    @Override
    protected void doGet(final SlingHttpServletRequest request, final SlingHttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("application/json");
        response.setCharacterEncoding("utf-8");

        JSONWriter jw = new JSONWriter(response.getWriter());

        try{
            ResourceResolver resolver = request.getResourceResolver();
            Session session = resolver.adaptTo(Session.class);

            QueryManager qm = session.getWorkspace().getQueryManager();

            jw.object();
            jw.key("data").array();

            String stmt = "select * from cq:Template order by jcr:title";

            Query q = qm.createQuery(stmt, Query.SQL);

            NodeIterator results = q.execute().getNodes();
            Node node = null;

            while(results.hasNext()){
                node = results.nextNode();

                jw.object();
                jw.key("id").value(node.getPath());
                jw.key("name").value(node.getProperty("jcr:title").getString());
                jw.endObject();
            }

            jw.endArray();
            jw.endObject();
        }catch(Exception e){
            log.error("Error getting templates",e);
            throw new ServletException(e);
        }
    }
}

UI Changes

1) Siteadmin Search Panel is created using the logic in /libs/cq/ui/widgets/source/widgets/wcm/SiteAdminSearchPanel.js. Access CRXDE Lite (http://localhost:4502/crx/de/index.jsp), overly this file by creating /apps/cq/ui/widgets/source/widgets/wcm/SiteAdminSearchPanel.js and add the following code

CQ.Ext.ns("MyClientLib");

MyClientLib.SearchPanel = {
    templatesStore: null,
    SA_SEARCH_PANEL_GRID: "cq-siteadminsearchpanel-grid",

    setTemplateName: function(grid){
        //read the templates when siteadmin is loaded in browser
        if(!this.templatesStore){
            this.templatesStore = new CQ.Ext.data.Store({
                proxy: new CQ.Ext.data.HttpProxy({
"autoLoad":false,
                    url: "/bin/mycomponents/templates.json",
                    method: 'GET'
                }),
                reader: new CQ.Ext.data.JsonReader({
                    root: 'data',
                    fields: [
                        {name: 'id', mapping: 'id'},
                        {name: 'name', mapping: 'name'}
                    ]
                })
            });

            this.templatesStore.load();
        }

        //get the template column
        var tColumn = grid.getColumnModel().getColumnById("template");
        var store = this.templatesStore;

        if(tColumn){
            tColumn.renderer = function(v, params, record) {
                var template = store.getById(v);

                //set the path as tooltip
                params.attr = ' ext:qtip="'  + v + '"';

                //return template name
                return template ? template.data.name : v;
            };
        }

        grid.doLayout();
    }
};

$.getScript("/libs/cq/ui/widgets/source/widgets/wcm/SiteAdminSearchPanel.js", function(){
    var s = MyClientLib.SearchPanel;

    if(window.location.pathname == "/siteadmin"){
        var SA_INTERVAL = setInterval(function(){
            var grid = CQ.Ext.getCmp(s.SA_SEARCH_PANEL_GRID);

            if(grid){
                clearInterval(SA_INTERVAL);
                s.setTemplateName(grid);
            }
        }, 250);
    }
}).fail(function(jqxhr, settings, exception){
    console.log("Error parsing /libs/cq/ui/widgets/source/widgets/wcm/SiteAdminSearchPanel.js");
    console.log(exception);
});