AEM 62 - Touch UI Add Custom Columns to Assets Omni Search List View

Goal

Give AEM admin the flexibility to add additional columns in Assets Omni Search List View - http://localhost:4502/assets.html

Thank you ACS Commons for the Generic Lists

For adding custom columns to Assets List Viewcheck this post

For adding custom columns to Reports Consolecheck this post

Demo | Package Install | Source Code | GitHub


Configure Columns

                http://localhost:4502/etc/experience-aem/omni-search-columns.html



Custom Omni Search Columns

Solution

1) Create the extension nt:folder /apps/eaem-omni-search-dynamic-columns

2) Add the ACS Commons Generic List in nt:folder /apps/eaem-omni-search-dynamic-columns/components, /apps/eaem-omni-search-dynamic-columns/templates (available in Package Install if installing the extension)

3) Create OSGI servlet apps.experienceaem.omnisearch.MetadataResultsServlet with the following code, to get the custom column values; eg. http://localhost:4502/bin/eaem/metadataResults.json?paths=/content/dam/geometrixx/shapes/cir_circle.png,/content/dam/geometrixx/shapes/sq_cube.png

package apps.experienceaem.omnisearch;

import org.apache.commons.lang3.StringUtils;
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.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.apache.sling.commons.json.JSONArray;
import org.apache.sling.commons.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.jcr.Node;
import javax.jcr.RepositoryException;
import javax.servlet.ServletException;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

@SlingServlet(paths = "/bin/eaem/metadataResults",
        methods = "GET",
        metatype = true,
        label = "Experience AEM Metadata Results Servlet",
        extensions = "json")
public class MetadataResultsServlet extends SlingAllMethodsServlet{
    private static final Logger log = LoggerFactory.getLogger(MetadataResultsServlet.class);

    private static String OMNI_SEARCH_COL_CONFIG = "/etc/experience-aem/omni-search-columns/jcr:content/list";

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response)
            throws ServletException, IOException {
        ResourceResolver resourceResolver = request.getResourceResolver();

        try{
            JSONObject jsonResponse = new JSONObject();

            String paths = request.getParameter("paths");

            if(StringUtils.isEmpty(paths)){
                return;
            }else{
                List<String> configList = getOmniSearchConfigValues(resourceResolver.getResource(OMNI_SEARCH_COL_CONFIG));

                Resource resource, propResource;
                String parentPath, propName, propValue;

                JSONObject valueObj;

                for(String path : paths.split(",")){
                    resource = resourceResolver.getResource(path);

                    if(resource == null){
                        continue;
                    }

                    valueObj = new JSONObject();

                    for(String relPath : configList){
                        parentPath = relPath.substring(0, relPath.lastIndexOf("/"));
                        propName = relPath.substring(relPath.lastIndexOf("/") + 1);

                        propResource = resource.getChild(parentPath);

                        if(propResource == null){
                            continue;
                        }

                        propValue = propResource.adaptTo(ValueMap.class).get(propName, "");

                        valueObj.put(relPath, propValue);
                    }

                    jsonResponse.put(path, valueObj);
                }
            }

            jsonResponse.write(response.getWriter());
        }catch(Exception e){
            log.error("Error reading collections", e);
        }

    }

    public List<String> getOmniSearchConfigValues(Resource managedListResource) {
        List<String> configList = new ArrayList<String>();

        try {
            Iterator<Resource> managedList = managedListResource.listChildren();

            while (managedList.hasNext()) {
                Resource r = managedList.next();
                Node resNode = r.adaptTo(Node.class);

                if (!resNode.hasProperty("value")) {
                    continue;
                }

                configList.add(resNode.getProperty("value").getString());
            }

        } catch (RepositoryException re) {
            log.error("Error getting list values", re);
        }

        return configList;
    }
}

3) Create cq:ClientLibraryFolder /apps/eaem-omni-search-dynamic-columns/clientlib with categories dam.gui.admin.util and dependencies underscore

4) Create nt:file /apps/eaem-omni-search-dynamic-columns/clientlib/js.txt with the following content

                  dynamic-columns.js

5) Create nt:file /apps/eaem-omni-search-dynamic-columnss/clientlib/dynamic-columns.js with the following code

(function ($, $document) {
    var FOUNDATION_CONTENT_LOADED = "foundation-contentloaded",
        ROW_SELECTOR = "tr.foundation-collection-item",
        GRANITE_OMNI_SEARCH_RESULT = "#granite-omnisearch-result",
        COLUMN_LIST = "/etc/experience-aem/omni-search-columns/_jcr_content.list.json",
        COLUMN_CONFIG = {},
        METADATA_MAPPING = "data-metadata-mapping",
        RESULTS_URL = "/bin/eaem/metadataResults.json",
        GRANITE_OMNI_SEARCH_CONTENT = ".granite-omnisearch-content";

    loadColumnsConfiguration();

    $document.on(FOUNDATION_CONTENT_LOADED, GRANITE_OMNI_SEARCH_CONTENT, function(event){
        _.defer(function(){
            handleContentLoad(event);
        });
    });

    function handleContentLoad(event){
        var layout = $(GRANITE_OMNI_SEARCH_RESULT).data("foundationLayout");

        if(!layout || (layout.layoutId !== "list")){
            return;
        }

        addColumnHeaders();

        fillColumnData();
    }

    function fillColumnData(){
        var $fui = $(window).adaptTo("foundation-ui");

        $fui.wait();

        $.ajax({
            type: "POST",
            dataType: "json",
            url: RESULTS_URL,
            data: {
                paths: getPaths().join(",")
            }
        }).done(collectionIterate);

        function collectionIterate(data){
            $(ROW_SELECTOR).each(function(index, item){
                itemHandler(data, $(item) );
            });

            $fui.clearWait();
        }

        function itemHandler(data, $row){
            if(!_.isEmpty($row.find("[" + METADATA_MAPPING + "]"))){
                return;
            }

            var itemPath = $row.data("foundation-collection-item-id"), metaValue;

            _.each(COLUMN_CONFIG, function(colName, colMetaPath){
                metaValue = data[itemPath][colMetaPath] || "";
                $row.append(getListCellHtml(colMetaPath, metaValue));
            });
        }
    }

    function getPaths(){
        var paths = [], $item;

        $(ROW_SELECTOR).each(function(index, item){
            $item = $(item);

            if(!_.isEmpty($item.find("td[" + METADATA_MAPPING + "]"))){
                return;
            }

            paths.push($item.data("foundation-collection-item-id"));
        });

        return paths;
    }

    function addColumnHeaders(){
        if(checkIFHeadersAdded()){
            return;
        }

        var headerHtml,
            $container = $(GRANITE_OMNI_SEARCH_CONTENT),
            $headRow = $container.find("thead > tr");

        _.each(COLUMN_CONFIG, function(headerText, metaRelPath){
            headerHtml = getTableHeader(metaRelPath, headerText);
            $headRow.append(headerHtml);
        });
    }

    function checkIFHeadersAdded(){
        return !_.isEmpty($(GRANITE_OMNI_SEARCH_CONTENT).find("tr").find("[" + METADATA_MAPPING + "]"));
    }

    function getListCellHtml(colMapping, colValue){
        return '<td is="coral-td" class="coral-Table-cell coral-Table-cell--left" alignment="column"'
                    + METADATA_MAPPING + '="' + colMapping + '">' +
'<coral-td-label class="coral-Table-cellLabel">'
                        + colValue +
'</coral-td-label>' +
'</td>';
    }

    function getTableHeader(colMapping, colText) {
        return '<th is="coral-th"'
            + METADATA_MAPPING + '="' + colMapping + '">'
            + colText
            + '</th>';
    }

    function loadColumnsConfiguration(){
        $.ajax({
            url: COLUMN_LIST
        }).done(function(data){
            _.each(data, function(item){
                COLUMN_CONFIG[item.value] = item.text;
            })
        });
    }
})(jQuery, jQuery(document));