AEM 62 - Touch UI Sort Components by Title in Insert New Component Dialog

Goal

Sort the components alphabetically in Insert New Component dialog of Touch UI Editor

Demo | Package Install | GitHub


Product

Extension

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touch-parsys-insert-comp-sort-title

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touch-parsys-insert-comp-sort-title/clientlib and set property categories of String[] type to cq.authoring.dialog and dependencies to underscore

3) Create file ( type nt:file ) /apps/eaem-touch-parsys-insert-comp-sort-title/clientlib/js.txt, add the following

                         sort-components.js

4) Create file ( type nt:file ) /apps/eaem-touch-parsys-insert-comp-sort-title/clientlib/sort-components.js, add the following code

(function ($document, gAuthor) {
    $(extendComponentInsert);

    function extendComponentInsert(){
        gAuthor.edit.ToolbarActions.INSERT.handler = function eaemOpenInsertDialog(executeDlgFn){
            return function (editable) {
                gAuthor.components.allowedComponents.sort(sortFn);

                executeDlgFn.call(this, editable);
            }
        }(gAuthor.edit.ToolbarActions.INSERT.handler);
    }

    function sortFn(comp1, comp2){
        try{
            return comp1.componentConfig.title.localeCompare(comp2.componentConfig.title)
        }catch(err){
            console.log("Error doing compare", err);
        }
    }
})($(document), Granite.author);