Dialog show-hide tabs not working OOTB

[ABid2]

I was trying to achieve dialog show/hide tabs scenario based on a select field and was referring the below article but it doesn't work. Can someone clarify if dialog show/hide works OOTB or we always need to write custom JS?

https://blog.3sharecorp.com/show-and-hide-dialog-fields-based-on-any-field-type

https://bitbucket.org/3SHARE/aem-show-hide-dialog-fields/src/main/ui.apps/src/main/content/jcr_root/...

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Show/Hide - Tab"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[dialog.utils]">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maxmized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <component-variation
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Component Variation"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <variation
                                granite:class="cq-dialog-showhide"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                fieldDescription="Select the location for this component."
                                fieldLabel="Variation"
                                name="./variation">
                                <granite:data
                                    jcr:primaryType="nt:unstructured"
                                    cq-dialog-showhide-target=".select-showhide-target"/>
                                <items jcr:primaryType="nt:unstructured">
                                    <landing-page
                                        jcr:primaryType="nt:unstructured"
                                        text="Landing Page (default)"
                                        value="landing-page"/>
                                    <detail-page
                                        jcr:primaryType="nt:unstructured"
                                        text="Detail Page"
                                        value="detail-page"/>
                                </items>
                            </variation>
                        </items>
                    </component-variation>
                    <landing-page
                        granite:class="hide select-showhide-target"
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Landing Page"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true"
                        maxmized="{Boolean}true">
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            showhidetargetvalue="landing-page"/>
                        <items jcr:primaryType="nt:unstructured">
                            <content
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <pathfield
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                fieldLabel="Select a Content Fragment"
                                                name="./assetPath"
                                                rootPath="/content/dam"/>
                                            <landingPageVariation
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                fieldDescription="Select the type of display on page."
                                                fieldLabel="Display Type"
                                                name="./landingPageVariation">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <banner
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Banner (default)"
                                                        value="banner"/>
                                                    <teaser
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Teaser"
                                                        value="teaser"/>
                                                </items>
                                            </landingPageVariation>
                                            <detailsPagePath
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                fieldLabel="Details Page Path"
                                                name="./detailsPagePath"
                                                rootPath="/content/dotcom"/>
                                            <ctaText
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldLabel="Read More CTA Label"
                                                name="./ctaText"/>
                                        </items>
                                    </column>
                                </items>
                            </content>
                        </items>
                    </landing-page>
                    <details-page
                        granite:class="hide select-showhide-target"
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Details Page"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            showhidetargetvalue="detail-page"/>
                        <items jcr:primaryType="nt:unstructured">
                            <content
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <searchResultsPagePath
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                fieldLabel="Search Results Page Path"
                                                name="./searchResultsPagePath"
                                                rootPath="/content/dotcom"/>
                                            <showAuthorBio
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showAuthorBio"
                                                text="Show Author Bio"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <showCalloutInfo
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showCalloutInfo"
                                                text="Show Callout Information"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <showQuoteInfo
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showQuoteInfo"
                                                text="Show Quote Bio"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <showAuthorName
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showAuthorName"
                                                text="Show Author Name"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <showBodyContent
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showBodyContent"
                                                text="Show Body Content"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <showTitle
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showTitle"
                                                text="Show Title"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <showPrimaryCategory
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showPrimaryCategory"
                                                text="Show Primary Category"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <showPretitle
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showPretitle"
                                                text="Show Pretitle"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <showDate
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showDate"
                                                text="Show Date"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <showFeaturedImageOrVideo
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showFeaturedImageOrVideo"
                                                text="Show Featured Image Or Video"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <showSubhead
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showSubhead"
                                                text="Show Subhead"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                            <showSecondaryTags
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}false"
                                                name="./showSecondaryTags"
                                                text="Show Secondary Tags"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                        </items>
                                    </column>
                                </items>
                            </content>
                        </items>
                    </details-page>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

[Saravanan_Dharmaraj]

@ABid2 Its available OOTB , you need to set the configuration to make it work. Please check the below

https://medium.com/activate-aem/conditional-display-for-dialog-fields-using-ootb-capabilities-a65e8b...

You can easily customize for the complex usecases as you have seen in multiple blogs

[pulkitvashisth]

Hi @ABid2 

As you have taken reference of below blog post for show hide.

https://blog.3sharecorp.com/show-and-hide-dialog-fields-based-on-any-field-type

Have you made sure the script added for the show hide logic is also loading on component dialog load?

The script present in above blog, should be part of the extraClientlibs="[dialog.utils]"  that you have mentioned in dialog properties above.
If it is , and still not working, you can put a debugger at the relevant listener for dropdown value select in the script and check where it is breaking.

Also make sure you have personalized the script to work or your case, as you need to change the jQuery selectors.

[Mahedi_Sabuj]

Hi @ABid2, Which AEM version are you using? From AEM 6.5.3, custom scripts is not required, you can check below dialog.

<backgroundConfig jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/select"
  fieldLabel="Background Config"
  name="./backgroundConfig"
  granite:class="cq-dialog-dropdown-showhide">
  <items jcr:primaryType="nt:unstructured">
    <backgroundColor jcr:primaryType="nt:unstructured"
      text="Background Color"
      value="backgroundColor"/>
    <backgroundImage jcr:primaryType="nt:unstructured"
      text="Background Image"
      value="backgroundImage"/>
  </items>
  <granite:data jcr:primaryType="nt:unstructured"
    cq-dialog-dropdown-showhide-target=".background-config-show-hide"/>
</backgroundConfig>
<backgroundColorContainer jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/container"
  granite:class="hide background-config-show-hide">
  <items jcr:primaryType="nt:unstructured">
    <colorCode jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
      fieldLabel="Color Code"
      name="./colorCode"/>
  </items>
  <granite:data jcr:primaryType="nt:unstructured"
    showhidetargetvalue="backgroundColor"/>
</backgroundColorContainer>

[MukeshYadav_ · Accepted solution]

Hi @ABid2 ,

Show hide tab is not OOTB.

You may refer this vidoe or whole dialog series for indepth understanding https://www.youtube.com/watch?v=Os0s2UOPQ6Q

We can keep JS for dialog at component level or for all dialog as mentioned here https://medium.com/activate-aem/loading-custom-js-in-an-aem-dialog-6b31e9a36743#:~:text=Using%20extr....

Thanks

[kautuk_sahni]

@ABid2 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!