AEM 6 SP2 - Touch UI Open Component Dialog Programmatically

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 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="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    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);



4 comments:

  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

    ReplyDelete
    Replies
    1. 63? - http://experience-aem.blogspot.com/2017/08/aem-63-touch-ui-register-component-action-open-dialog-programatically.html

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

      Delete
    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?

      Delete