Smartphone

Goal

Register a editable component action to open dialog programatically

For similar extension on AEM 6 check this post

Demo | Package Install | Github

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touchui-open-component-dialog-register-action

2) Create node /apps/touchui-open-component-dialog-register-action/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog.all

3) Create file (nt:file) /apps/touchui-open-component-dialog-register-action/clientlib/js.txt and add

                       open.js

4) Create file (nt:file) /apps/touchui-open-component-dialog-register-action/clientlib/open.js and add the following code

(function ($document, author) {
 var openDialog = {
 icon: coral-Icon--game,
 text: Open Dialog,
 handler: function (editable, param, target) {
 author.DialogFrame.openDialog(new author.edit.Dialog(editable));
 },
 condition: function (editable) {
 //show this action only for component type eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog
 return editable.type === "eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog";
 },
 isNonMulti: true
 };

 $document.on(cq-layer-activated, function (ev) {
 if (ev.layer === Edit) {
 author.EditorFrame.editableToolbar.registerAction(EAEM_OPEN_DIALOG, openDialog);
 }
 });
})($(document), Granite.author);