Smartphone

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