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