Smartphone

Goal

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

Solution

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

                         par-node-name.js

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

(function(){
 var PREFIX = "eaem_",
 PostRequest = Granite.author.persistence.PostRequest,
 prepareCreateParagraph = PostRequest.prototype.prepareCreateParagraph;

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

 return prepareCreateParagraph.call(this, 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
 }
}());