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


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

For Classic UI check this post

Demo | Package Install | GitHub


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

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

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


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

    var PREFIX = "eaem_",
        PostRequest =,
        prepareCreateParagraph = PostRequest.prototype.prepareCreateParagraph;

    PostRequest.prototype.prepareCreateParagraph = function(config){
        config.nameHint = getNameHint(config.resourceType);

        return, config);

    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

No comments:

Post a Comment