AEM 6 SP2 - Add Column to List View of Touch UI (Coral UI)

Goal

Add a column Path, to the Sites List View (the other two views are Card and Column) of Touch UI. Check this post for adding a column to the SiteAdmin grid of Classic UI

For adding a column to AEM 61 List View check this post

Demo | Package Install

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-add-column-to-sites-list

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-add-column-to-sites-list/clientlib and set a property categories of String type to granite.ui.foundation.admin

3) Create file ( type nt:file ) /apps/touchui-add-column-to-sites-list/clientlib/css.txt, add the following

                         add-path-column.css

4) Create file ( type nt:file ) /apps/touchui-add-column-to-sites-list/clientlib/add-path-column.css, add the following code (style for Path column)

.list .card-page .eaem-path-column{
    position:relative;
    float:left;
    width: 32%;
}

5) Create file ( type nt:file ) /apps/touchui-add-column-to-sites-list/clientlib/js.txt, add the following

                         add-path-column.js

6) Create file ( type nt:file ) /apps/touchui-add-column-to-sites-list/clientlib/add-path-column.js, add the following code

(function (document, $) {
    "use strict";

    var FOUNDATION_LAYOUT_LIST = ".foundation-layout-list";
    var SITE_ADMIN_CHILD_PAGES = "cq-siteadmin-admin-childpages";
    var TITLE_SELECTOR = "[data-title='Title']";
    var ARTICLE_TITLE_SELECTOR = ".label .main";

    $(document).on("foundation-mode-change", function(e, mode, group){
        //not on sites list, may be assets, return
        if((group != SITE_ADMIN_CHILD_PAGES) || (mode == "selection") ){
            return;
        }

        //group is cq-siteadmin-admin-childpages for sites
        var $collection = $(".foundation-collection[data-foundation-mode-group=" + group + "]");

        if (!$collection.is(FOUNDATION_LAYOUT_LIST)) {
            return;
        }

        //adjust the width of title column to accommodate Path column
        $(".list .card-page .main").css("width", "33%");

        var $hTitle = $("." + SITE_ADMIN_CHILD_PAGES).find("header").find(TITLE_SELECTOR);

        //add Path column to header
        $hTitle.after( $("<div/>").attr('class', 'eaem-path-column')
                    .attr('data-sort-selector', ".label .eaem-path-column h4")
                    .attr('data-title', "Path").html("Path"));

        var $pathElement;

        $("article").each(function(index, article){
            var $article = $(article);

            $pathElement = $("<div/>").attr('class', 'eaem-path-column')
                                .append($("<h4/>").attr("class", "foundation-collection-item-title")
                                            .html($article.data("path")));

            //insert path after title
            $article.find(ARTICLE_TITLE_SELECTOR).after($pathElement);
        })
    });
})(document, jQuery);