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>





2 comments:

  1. Very nice. I got this idea when I was looking at the cloud service configuration pages a while back and started using something similar.

    CQ.WCM.onEditableReady("<%= resource.getPath() %>", function(editable){
    registerOpenDialog(editable);
    }, this);
    var registerOpenDialog = function(editable) {
    $('.editComponent').on('click', function() {
    CQ.wcm.EditBase.showDialog(editable);
    });
    };

    ReplyDelete
  2. Thanks for the posting, and thanks for the comment. I tested and both are working well in 6.1.x

    ReplyDelete