Restrict Dialog Opening Conditionaly through Listener AEM6.1 | Community
Skip to main content
A
Akanksha_Pratih
New Participant
October 16, 2015
Solved

Restrict Dialog Opening Conditionaly through Listener AEM6.1

  • October 16, 2015
  • 3 replies
  • 1363 views

 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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kautuk_sahni

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

3 replies

edubey
edubey
New Participant
October 16, 2015

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.....

A
Akanksha_PratihAuthor
New Participant
October 16, 2015

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
kautuk_sahniAccepted solution
Employee
October 16, 2015

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

Kautuk Sahni
Terms & ConditionsAccessibility statement

Loading footer...