How to show or hide tab in dialog in cq5 | Community
Skip to main content
srinuetta
Level 2
October 16, 2015
Solved

How to show or hide tab in dialog in cq5

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.
    Accepted solution
    October 16, 2015

    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>
    View reply

    4 replies

    kautuk_sahni
    kautuk_sahni
    Employee
    September 19, 2016

    nitinh81834186 wrote...

    Does this work ??

    d.hideTabStripItem('tab2');

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

     

     

    Excellent.  you are correct, the arguments must be index [hideTabStripItem(index) ].

    ~kautuk

    Translate
    Kautuk Sahni
    Nitin_Harikant
    New Participant
    September 19, 2016

    Does this work ??

    d.hideTabStripItem('tab2');

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

    Translate
      karan131
      New Participant
      October 16, 2015

      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.

      Translate
      Anonymous
      Accepted solution
      October 16, 2015

      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>
      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...