Smartphone

Goal

Open a Touch UI component dialog using sample action config - cq:actionConfigs. For the same in Classic UI follow this post

For similar extension on AEM 63 check this post

Demo | Package Install

Thank you Kaushal Mall for the solution - 2 below

A sample toolbar action for opening component dialog

Solution - 1

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-open-component-dialog

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-open-component-dialog/clientlib, set a property categories of String type to cq.authoring.dialog

3) Create file ( type nt:file ) /apps/touchui-open-component-dialog/clientlib/js.txt, add the following

                         open.js

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

(function ($, author) {
 "use strict";

 if (typeof window.ExperienceAEM == "undefined") {
 window.ExperienceAEM = {};
 }

 ExperienceAEM.open = open;

 function open(editable, param, target){
 //Granite.author.store contains editables added on page
 author.DialogFrame.openDialog(editable);
 }
})($, Granite.author);

5) # 11 is for opening the component editables dialog

6) Add a sample action config cq:actionConfigs, open action in the components edit config cq:editConfig


7) Sample components open dialog action config as xml - /apps/touchui-open-component-dialog/touchui-open-component-dialog/cq:editConfig

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root   
 jcr_primaryType="cq:EditConfig">
 <cq:actionConfigs jcr_primaryType="nt:unstructured">
 <open
 jcr_primaryType="nt:unstructured"
 handler="ExperienceAEM.open"
 icon="coral-Icon--game"
 text="Open Dialog"/>
 </cq:actionConfigs>
</jcr:root>

8) #7 ExperienceAEM.open handler (added in step 4) is executed on clicking the open toolbar action

Solution - 2

To show ootb component actions and custom action  - open dialog, check this adobe doc for more details

Package Install

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.editor.hook

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(editable);
 },
 condition: function (editable) {
 return editable.type === "touchui-open-component-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);