Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

how to pass request parameters to edit dialog

Kuanqi
Level 2
Level 2

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.

1 Accepted Solution
Kuanqi
Correct answer by
Level 2
Level 2

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.

View solution in original post

5 Replies
smacdonald2008
Level 10
Level 10

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/

kautuk_sahni
Community Manager
Community Manager

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
Level 2
Level 2

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
Correct answer by
Level 2
Level 2

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.

View solution in original post