AEM 62 - Classic UI Extend Create Paragraph For Custom Name Hint

Goal

Extend Create Paragraph of Classic UI Editables to provide custom names for par nodes, say eaem_

Demo | Package Install | GitHub

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-classicui-par-node-name

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-classicui-par-node-name/clientlib and set property categories of String type to cq.widgets and dependencies to lodash

3) Create file ( type nt:file ) /apps/eaem-classicui-par-node-name/clientlib/js.txt, add the following

                         node-name.js

4) Create file ( type nt:file ) /apps/eaem-classicui-par-node-name/clientlib/node-name.js, add the following code

(function(){
    var PREFIX = "eaem_";

    CQ.Ext.onReady(function () {
        if(!CQ.WCM.isEditMode()){
            return;
        }

        CQ.WCM.on("editablesready", iterateEditables, this);
    });

    function iterateEditables(){
        var editables = CQ.utils.WCM.getEditables();

        _.each(editables, function (editable) {
            extendCreateParagraph(editable);
        });
    }

    function extendCreateParagraph(editable){
        if(!editable.createParagraph){
            return;
        }

        var cqCreateParagraph = editable.createParagraph;

        editable.createParagraph = function extCreateParagraph(definition, extraParams, noEvent, loadAnnotations,
                                               ignoreTemplate, preventUndo, undoCfg) {
            var resType = definition.virtual ? definition.virtualResourceType : definition.resourceType;

            if (!resType || !this.isInsertAllowed(resType)) {
                return null;
            }

            extraParams = extraParams || {};

            extraParams[":nameHint"] = getNameHint(resType);

            cqCreateParagraph.call(this, definition, extraParams, noEvent, loadAnnotations,
                                        ignoreTemplate, preventUndo, undoCfg);
        }
    }

    function getNameHint(resType){
        return (PREFIX + resType.substring(resType.lastIndexOf('/') + 1));

        //var nameHint = PREFIX + resType.substring(resType.lastIndexOf('/') + 1);
        //return _.camelCase(nameHint); AEM includes lodash 2.4.1, camelCase is available in 3.0.0
    }
})();