CODEWITHSUNDEEP
dialogaemsightly
RAN
RAN

Reputation: 1453

AEM - Touch UI dialog hide and show tabs on dropdown selection

I am trying to create a tab based touch-ui dialog AEM (AEM-6.2) But I am facing issues to hide the tabs.

I have 3 tabs in a dialog box.

  1. general (Always enabled)
  2. sports (Enable only when the selection is sports)
  3. movies (Enable only when the selection is movies)

Before configuration, 'sports' and 'movies' tabs are hidden. In the 'general' tab I have a select box with options 'choose sports' and 'choose movies'. On selection corresponding tab should display. I tried using the steps provided in the below given path, but it fails to hide the tabs.

Path : /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

Other reference we tried : https://github.com/aman02deep/aem-6.2/blob/master/tabshideshow.js

Content.xml file:

                                </items>
                            </selection>
                        </items>
                    </columns>
                </items>

        </generalPanel>
         <sports
            jcr:primaryType="nt:unstructured"
            jcr:title="Sports"
            sling:resourceType="granite/ui/components/foundation/container">
             <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                margin="{Boolean}false"/>
                <items jcr:primaryType="nt:unstructured">
                    <columns
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                             <sptext jcr:primaryType="nt:unstructured"
                                  sling:resourceType="granite/ui/components/foundation/form/textarea"
                                  fieldLabel="enter the text :"
                                  name="./sp_text"
                                  required="false"/>

                        </items>
                    </columns>

                </items>

        </sports>
        <movies
            jcr:primaryType="nt:unstructured"
            jcr:title="Movies"
            sling:resourceType="granite/ui/components/foundation/container">
             <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                margin="{Boolean}false"/>
                <items jcr:primaryType="nt:unstructured">
                    <columns
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                             <mvtext jcr:primaryType="nt:unstructured"
                                  sling:resourceType="granite/ui/components/foundation/form/textarea"
                                  fieldLabel="enter the text :"
                                  name="./mv_text"
                                  required="false"/>

                        </items>
                    </columns>

                </items>
        </movies>
    </items>
</content>

dialog box screenshot

Upvotes: 0

Views: 3586

Answers (1)

Anish Somani
Anish Somani

Reputation: 43

You can use granite:data to create a data-attribute which you can hide and show at you convinicence using jquery.

  1. Add Listener to change of your radio button
  2. Add granite:data to both tabs
  3. On listener being called, Hide and show, based on your selection and jquery.


Ref: https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/commonattrs.html

Upvotes: 0

Related Questions