how to pass request parameters to edit dialog

Forum|Forum|9 years ago
June 24, 2016
5 replies
2598 views

Hi Experts,

I want to create a component with a dynamic edit dialog in which there are three tabs.

In the dialog which tabs should be displayed depending on the request parameters of the page which contains the component,

I know the way to hidden the tabs according to the value of dialog itself, but I don't know how to pass request parameters to component's edit dialog.

Thanks a lot.

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 Kuanqi

Hi,

Thanks a lot of advice.Although build different components is a alternative approach.I had found a way yesterday to implement it. I set the request parameter as a hidden input element, and then fetch it in  afterrender event.

The handle of event is like this:

Sample.switchTabs=function(dialog) { var cmtype= $CQ("#parameter")[0].value; var tabpanel = dialog.findByType('tabpanel')[0]; if (cmtype == "1") { tabpanel.hideTabStripItem(0); tabpanel.unhideTabStripItem(1); tabpanel.hideTabStripItem(2); tabpanel.activate(1); } else if (cmtype == "2") { tabpanel.hideTabStripItem(0); tabpanel.hideTabStripItem(1); tabpanel.unhideTabStripItem(2); tabpanel.activate(2); } else { tabpanel.unhideTabStripItem(0); tabpanel.hideTabStripItem(1); tabpanel.hideTabStripItem(2); tabpanel.activate(0); } }

Thanks a lot.

K

KuanqiAuthorAccepted solution

New Participant

Hi,

Thanks a lot of advice.Although build different components is a alternative approach.I had found a way yesterday to implement it. I set the request parameter as a hidden input element, and then fetch it in  afterrender event.

The handle of event is like this:

Sample.switchTabs=function(dialog) { var cmtype= $CQ("#parameter")[0].value; var tabpanel = dialog.findByType('tabpanel')[0]; if (cmtype == "1") { tabpanel.hideTabStripItem(0); tabpanel.unhideTabStripItem(1); tabpanel.hideTabStripItem(2); tabpanel.activate(1); } else if (cmtype == "2") { tabpanel.hideTabStripItem(0); tabpanel.hideTabStripItem(1); tabpanel.unhideTabStripItem(2); tabpanel.activate(2); } else { tabpanel.unhideTabStripItem(0); tabpanel.hideTabStripItem(1); tabpanel.hideTabStripItem(2); tabpanel.activate(0); } }

Thanks a lot.

Sunil_Chowdhary

New Participant

Hi Kuanqi,

Assumption based on "I know the way to hidden the tabs according to the value of dialog itself, but I don't know how to pass request parameters to component's edit dialog." : You already have listeners to show/hide tabs.

Requirement : To show/hide tabs based on query parameter available.

Solution : Use same logic you already have in your listener, may be on loadcontent event. Just add condition/logic using appropriate url parameter which can be easily read using js.

For reference : http://www.designchemical.com/blog/index.php/jquery/8-useful-jquery-snippets-for-urls-querystrings/

Hope it helps. Take care.

kautuk_sahni

Employee

Hi

I would not recommend you to do this using Query parameters. It would not be best practice.

Why are you not using it as an option in dialog box itself ? or if multiple tabs are needed, why to hide them? if all are mutually exclusive you may divide them into 3 components.

But Solution i could think of are:-

Option 1:- Using Custom JQuery/JavaScript, which basically reads the query parameters and hide the tabs accordingly.

Reference Links:- http://stackoverflow.com/questions/25244844/conditional-show-hide-of-fields-in-aem-6-dialogs

http://stackoverflow.com/questions/25708043/populating-select-box-options-on-changing-pathfield-in-dialog-of-adobe-cq5/25772802#25772802

Option 2:- Create a service which will read the Query parameters, and pragmatically change the Dialog JCR nodes.

Reference Links:- http://adobeaemclub.com/toggle-fields-based-on-selection-in-granite-ui-dialogs/ (Toggle the fields)

https://helpx.adobe.com/experience-manager/using/programmatically-accessing-cq-content-using.html (Reading JCR nodes using JCR APIs)

Reference article:- http://stackoverflow.com/questions/30517787/aem-6-dynamic-tabs

I hope this will help you.

Thanks and Regards

Kautuk Sahni