AEM 6 SP2 - Touch UI Open Component Dialog Programmatically


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


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 = {};
    } = open;

    function open(editable, param, target){
        // contains editables added on page

5) # 11 is for opening the component editable's dialog

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

7) Sample component's 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 xmlns:cq="" xmlns:jcr="" xmlns:nt=""
    <cq:actionConfigs jcr:primaryType="nt:unstructured">
            text="Open Dialog"/>

8) #7 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


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) {
        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);


  1. Hi,
    its not working in my side.
    I am getting error:

    An error has occured during execution of the selected action: dialog.getConfig is not a function -> TypeError: dialog.getConfig is not a function
    at Object.ns.DialogFrame.self.openDialog (http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.js:16736:30)
    at constructor.handler (http://localhost:4502/apps/touchui-open-component-dialog-register-action/clientlib.js:6:32)
    at constructor.handleEvent (http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.js:19321:41)
    at HTMLDivElement.dispatch (http://localhost:4502/etc/clientlibs/granite/jquery.js:4665:9)
    at HTMLDivElement.elemData.handle (http://localhost:4502/etc/clientlibs/granite/jquery.js:4333:28)(anonymous function) @ core.js:16442

    1. 63? -

    2. Change author.DialogFrame.openDialog(editable); to author.DialogFrame.openDialog(new author.edit.Dialog(editable)); It will work

    3. thanks bro. it worked. however I have added a different action in component. now I want to open a different dialog or section by custom actions. how I can achieve that?