How to show or hide tab in dialog in cq5

Forum|Forum|10 years ago
October 16, 2015
4 replies
4644 views

Hi,

I have a requirement where based on radio button i need to show the tab when not selected i need to hide.

Please let me know how to achieve or examples please.

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

By using the listener its quite easy to achieve your question.

Step 1: give the tab to show/hide an ID

<tab2 jcr:primaryType="cq:Panel" title="tab2" itemId="tab2"> ... </tab2>

Step 2: add a listener to the selection which you want to handle:

If the selection is 'no' the tab will be disabled, otherwise enabled.

<select jcr:primaryType="cq:Widget" fieldLabel="ShowTab" name="./show" type="radio" value="yes" xtype="selection"> <options jcr:primaryType="cq:WidgetCollection"> <option1 jcr:primaryType="nt:unstructured" text="Yes" value="yes"/> <option2 jcr:primaryType="nt:unstructured" text="No" value="no"/> </options> <listeners jcr:primaryType="nt:unstructured" selectionchanged="function( field,value, isChecked ){ if (field !=null){ var d = field.findParentByType('tabpanel'); if (value == 'no'){ d.hideTabStripItem('tab2'); }else{ d.unhideTabStripItem('tab2'); } } }"/> </select>

A

Anonymous

Accepted solution

By using the listener its quite easy to achieve your question.

Step 1: give the tab to show/hide an ID

<tab2 jcr:primaryType="cq:Panel" title="tab2" itemId="tab2"> ... </tab2>

Step 2: add a listener to the selection which you want to handle:

If the selection is 'no' the tab will be disabled, otherwise enabled.

<select jcr:primaryType="cq:Widget" fieldLabel="ShowTab" name="./show" type="radio" value="yes" xtype="selection"> <options jcr:primaryType="cq:WidgetCollection"> <option1 jcr:primaryType="nt:unstructured" text="Yes" value="yes"/> <option2 jcr:primaryType="nt:unstructured" text="No" value="no"/> </options> <listeners jcr:primaryType="nt:unstructured" selectionchanged="function( field,value, isChecked ){ if (field !=null){ var d = field.findParentByType('tabpanel'); if (value == 'no'){ d.hideTabStripItem('tab2'); }else{ d.unhideTabStripItem('tab2'); } } }"/> </select>

K

karan131

You can see the default list component (/libs/foundation/components/list). They have implemented this with dropdown and same can be done with radio buttons.

N

Nitin_Harikant

Does this work ??

d.hideTabStripItem('tab2');

i believe it should be d.hideTabStripItem(1);