AEM 62 - Touch UI Show Folders or Assets Alphabetically in List View on Page Load

Goal

TouchUI folders are by default sling:OrderedFolder; so user defines the order and can reorder the way they showup in List View. To sort them alphabetically on page load or mode change to list view, this extension can help...

For AEM 6 SP1 check this post

Demo | Package Install | GitHub

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-assets-list-load-alpha

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-assets-list-load-alpha/clientlib and set a property categories of String type to dam.gui.admin.coral, dependencies of type String[] with value underscore

3) Create file ( type nt:file ) /apps/eaem-touchui-assets-list-load-alpha/clientlib/js.txt, add the following

                         sort-alpha.js

4) Create file ( type nt:file ) /apps/eaem-touchui-assets-list-load-alpha/clientlib/sort-alpha.js, add the following code

(function ($, $document) {
    var FOUNDATION_CONTENT_LOADED = "foundation-contentloaded",
        FOUNDATION_MODE_CHANGE = "foundation-mode-change",
        LAYOUT_LIST_VIEW = "list",
        TITLE_COLUMN = "Title",
        DAM_ADMIN_CHILD_PAGES = ".cq-damadmin-admin-childpages";

    $document.on(FOUNDATION_CONTENT_LOADED, sortListItems);

    $document.on(FOUNDATION_MODE_CHANGE, sortListItems);

    function sortListItems(event){
        var $childPage = $(DAM_ADMIN_CHILD_PAGES),
            foundationLayout = $childPage.data("foundation-layout");

        if(_.isEmpty(foundationLayout)){
            return;
        }

        var layoutId = foundationLayout.layoutId;

        if(layoutId !== LAYOUT_LIST_VIEW){
            return;
        }

        var $listViewHead = $childPage.find("thead");

        var $colSpan = $listViewHead.find("coral-th-label:contains('" + TITLE_COLUMN + "')").filter(function(){
            return ($(this).text() === TITLE_COLUMN);
        });

        $colSpan.closest("th").click();
    }
})(jQuery, $(document));