how to pass request parameters to edit dialog

[Kuanqi]

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.

[smacdonald2008]

You want to read request parameters used to bring up an AEM page. (never heard of this use case with respect to a dialog)

However - here is an article that may help you dynamically create tabs: 

http://cqblog.inside-solutions.ch/2013/06/13/programmatically-adding-tabs-to-cq-dialogs/

[smacdonald2008]

Here is docs on how to handle request parameters using Sling: https://sling.apache.org/documentation/the-sling-engine/request-parameters.html

[kautuk_sahni]

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

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

[Sunil_Chowdhary]

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.

[Kuanqi · Accepted solution]

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:

<listeners
        jcr:primaryType="nt:unstructured"
        afterrender="function(dialog){ return Sample.switchTabs(dialog);}" />

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.