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

2 comments:

  1. Hi Sreekanth, If I have to show a list of particular components inside a parsys of a component. How can I achieve the same in 6.5 ? on which file or events I have to do the customisation. I can't achieve it using design "/etc/designs//jcr:content" since this parsys is getting generated dynamically. Can you help me with that . I want to restict the list of a components for a particular parsys.

    ReplyDelete
  2. This doesn't work when we double click on parsys for the first time but works when we click on + icon.

    ReplyDelete