AEM CQ 56 - Programmatically open a component dialog

Goal

Open a component dialog programmatically. To open a component dialog you generally do a double click, here a custom button click also opens the same dialog. Check the demo

Solution

1) In your jsp or where ever you want to open component dialog add the below simple js function. Here i added it in a text component jsp, and the button opens it's component dialog

<%@include file="/libs/foundation/global.jsp"%>

<cq:text property="text"/>

<input type=button onClick="openComponentPropertiesDialog('<%= currentNode.getPath() %>')" value="Open Component Dialog"/>

<script>
    function openComponentPropertiesDialog(path){
        var editRollOver = CQ.utils.WCM.getEditables()[path];
        CQ.wcm.EditBase.showDialog(editRollOver, CQ.wcm.EditBase.EDIT);
    }
</script>