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

Source code and package install are available for download

Prerequisites

If you are new to CQ

1) Read this post on how to create a sample page component

2) Read this post on how to setup your IDE and create an OSGI component

3) Read this post on how to add a column to siteadmin grid

4) Read this post on how to add a column to siteadmin search panel grid

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) Login to CRXDE Lite, create folder (nt:folder) /apps/gridcolumnmodify

2) Create clientlib (type cq:ClientLibraryFolder) /apps/gridcolumnmodify/clientlib and set a property categories of String type to cq.widgets

3) Create file ( type nt:file ) /apps/gridcolumnmodify/clientlib/js.txt, add the following

                         templatename.js

4) Create file ( type nt:file ) /apps/gridcolumnmodify/clientlib/templatename.js, 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();
    }
};

(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);
    }
})();