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.coraldependencies 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));



1 comment:

  1. Thank you for sharing such a nice and interesting blog with us. I have seen that all will say the same thing repeatedly. But in your blog, I had a chance to get some useful and unique information. I would like to suggest your blog in my dude circle.
    Jobs in Chennai
    Jobs in Bangalore
    Jobs in Delhi
    Jobs in Hyderabad
    Jobs in Kolkata
    Jobs in Mumbai
    Jobs in Noida
    Jobs in Pune

    ReplyDelete