Restrict Dialog Opening Conditionaly through Listener AEM6.1

[Akanksha_Pratih]

 Hi

I have created a component with design dialog and I want this component to be editable only on base template and not on other templates. For this, I have added a listener to the dialog and in its "render" property I have written below code:

function(box) {
    var currentPage = $('#design_basepage').val();
    if(currentPage == undefined){
        alert('This component can be edit in the Base page only.');
        box.close();
    }
}

In the above code  "design_basepage" is a variable provided in base template. This code works fine for the first time after page refresh(On click of edit in design mode,  alert is displayed saying that "it cant be edited in base template"). But second time if we click on edit, no alert is displayed and on checking the console: error is coming as " Type error: el is undefined". It might be happening due to box.close(), but we don't have a solution for it.

Please help.

[edubey]

In AEM what ever you see is HTML. All dialogs are in html, css and are created in DOM.

el is CQ.Ext.Element

When you call box.close(), this will remove the box from the DOM, destroys the window object and all its descendant Components. From this point this will not exist in DOM, which gives you error when you try to call next time.

I would suggest you to try box.hide()

let me know how it goes.....

[Akanksha_Pratih]

If I use box.hide() and

- Place the listener directly under Dialog:  Error alert is shown and after that the dialog opens with all the fields shown & enabled.

- Place the listener at any sub level after dialog: Error alert is shown and after that the dialog opens with no fields shown. Requirement is that the Dialog should not open at all. Can I get box.parent(dialog) and hide it ?

Please suggest if there is any other solution

[kautuk_sahni · Accepted solution]

Hi Akanksha Pratihar

We can use the cloning to overcome this problem. Though it’s just a workaround.

Before closing the “box”, we can create its clone, and can set an event listener on edit button to preserve to initial state.

Eg:-

var Temp ;

function(box) {
    var currentPage = $('#design_basepage').val();
    if(currentPage == undefined){
        alert('This component can be edit in the Base page only.');

//Cloning

Temp = box.clone(true);
        box.close();
    }
}

// Event Listner

(“.edit”).click(function() {

Temp.appendTo ($('.wherever-you-want-to'));

});

I hope this would help you.

Thanks and Regards

Kautuk Sahni