Adobe Experience Manager Sites & More

Anilkumar9 · 11/18/24

below is my scenario, card variation has three options Image on top, BG-Image and No Image. the card size field shoukld display only on Image on top variation. for this

dialog structure, for cardSize node I added granite:datanode

with value cq-dialog-showhide-target = .showhidetopImage

eventhoug I provided showhidetargetvalue String[] topImage,cardSize. its not working as expected

konstantyn_diachenko · 11/18/24

Hi @Anilkumar9 ,

Please try to align your configuration based on this example:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs">
        <items jcr:primaryType="nt:unstructured">
            <settings
                jcr:primaryType="nt:unstructured"
                jcr:title="Config 1"
                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">
                            <variation
                                granite:class="cq-dialog-dropdown-showhide"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                name="./variation">
                                <items jcr:primaryType="nt:unstructured">
                                    <backgroundImage
                                        jcr:primaryType="nt:unstructured"
                                        text="Background image"
                                        value="backgroundImage"/>
                                    <topImage
                                        jcr:primaryType="nt:unstructured"
                                        text="Top image"
                                        value="topImage"/>
                                    <noImage
                                        jcr:primaryType="nt:unstructured"
                                        text="No image"
                                        value="noImage"/>
                                </items>
                                <granite:data
                                    jcr:primaryType="nt:unstructured"
                                    cq-dialog-dropdown-showhide-target=".card-variation-showhide-target"/>
                            </variation>
                            <cardSizeContainer
                                granite:class="hide card-variation-listfrom-showhide-target foundation-layout-util-vmargin"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                <granite:data
                                    jcr:primaryType="nt:unstructured"
                                    showhidetargetvalue="topImage"/>
                                <items jcr:primaryType="nt:unstructured">
                                    <variation
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                        name="./cardSize">
                                        <items jcr:primaryType="nt:unstructured">
                                            <medium
                                                jcr:primaryType="nt:unstructured"
                                                text="Medium"
                                                value="medium"/>
                                            <large
                                                jcr:primaryType="nt:unstructured"
                                                text="Large"
                                                value="large"/>
                                        </items>
                                    </variation>
                                </items>
                            </cardSizeContainer>
                        </items>
                    </column>
                </items>
            </settings>
        </items>
    </content>
</jcr:root>

Seems like you places granite:data node in a wrong location. It should not be under items. It's like an extension for field.

Refer other documentation: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/show-hide-fields-based-on-...

Best regards,

Kostiantyn Diachenko.

PRATHYUSHA_VP · 11/18/24

Hi @Anilkumar9

From the screenshots you posted, i can see that granite:data has to be placed under cardsize node instead of items. Please try to replace the placement of node. Check if it resolves

If issue still persists, please post your content.xml file

Thanks

Prathyusha

Anilkumar9 · 11/18/24

Hi @PRATHYUSHA_VP
As you said I changed the position of granite:data node but still no luck. can you please look into .xml

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"

jcr:primaryType="nt:unstructured"

jcr:title="Image Content Card"

sling:resourceType="cq/gui/components/authoring/dialog">

<content

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">

<column

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<variation

granite:class="cq-dialog-showhide"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/select"

fieldDescription="Select variation from the options"

fieldLabel="Card Variation"

name="./variation">

<backgroundImage

jcr:primaryType="nt:unstructured"

text="Image in background"

value="backgroundImage"/>

<topImage

jcr:primaryType="nt:unstructured"

text="Image on top"

value="topImage"/>

<noImage

jcr:primaryType="nt:unstructured"

text="No Image"

value="noImage"/>

</items>

<granite:data

jcr:primaryType="nt:unstructured"

cq-dialog-showhide-target=".showhidecardvariation"/>

</variation>

<cardsize

granite:class="cq-dialog-showhide"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/select"

fieldDescription="Select card size"

fieldLabel="Card Size"

name="./cardSize">

<granite:data

jcr:primaryType="nt:unstructured"

cq-dialog-showhide-target=".showhidetopImage"/>

<medium

jcr:primaryType="nt:unstructured"

text="Medium"

value="medium"/>

<large

jcr:primaryType="nt:unstructured"

text="Large"

value="large"/>

</items>

</cardsize>

<mainTitle

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Title text for image content card."

fieldLabel="Title"

name="./mainTitle"/>

<ctalinktext

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Root page path link text."

fieldLabel="Link Title"

name="./ctaLinkText"/>

<ctalink

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

fieldDescription="Root page path link URL."

fieldLabel="Link URL"

name="./ctaLink"

rootPath="/content"/>

<target

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"

name="./ctaLinkTarget"

text="Open link in new tab"

uncheckedValue="_self"

value="_blank"/>

<imageContentCards

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

composite="{Boolean}true">

<granite:data jcr:primaryType="nt:unstructured"/>

<field

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container"

name="./imageContentCards">

<imagecontainer

granite:class="showhidecardvariation"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<granite:data

jcr:primaryType="nt:unstructured"

showhidetargetvalue="backgroundImage"/>

<image

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

allowUpload="{Boolean}false"

class="cq-droptarget"

fieldDescription="Author can upload the image"

fieldLabel="Upload Image"

fileNameParameter="./imageParam"

fileReferenceParameter="./backgroundImage"

mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"

name="./imageName"/>

</items>

</imagecontainer>

<topImagecontainer

granite:classes="[showhidecardvariation,showhidecardsize]"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<granite:data

jcr:primaryType="nt:unstructured"

showhidetargetvalue="[topImage,cardSize]"/>

<image

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

allowUpload="{Boolean}false"

class="cq-droptarget"

fieldDescription="Author can upload the image"

fieldLabel="Upload Image"

fileNameParameter="./imageParam"

fileReferenceParameter="./topImage"

mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"

name="./imageName"/>

</items>

</topImagecontainer>

<title

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Author can enter the title"

fieldLabel="Title"

name="./title"/>

<text

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="Author can enter the description text"

fieldLabel="Text"

name="./text"/>

<bgimagecontainer

granite:class="showhidecardvariation"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<granite:data

jcr:primaryType="nt:unstructured"

showhidetargetvalue="backgroundImage"/>

<iconType

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/select"

fieldDescription="Select the icon you want to show in the card"

fieldLabel="Icon"

name="./iconType">

<download

jcr:primaryType="nt:unstructured"

text="Download Icon"

value="download"/>

<arrow

jcr:primaryType="nt:unstructured"

text="Arrow Right Icon"

value="arrow"/>

</items>

</iconType>

<hoverColor

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/select"

fieldDescription="Select variation from the options"

fieldLabel="Hover over color"

name="./hoverColor">

<orange

jcr:primaryType="nt:unstructured"

text="Orange"

value="orange"/>

<blue

jcr:primaryType="nt:unstructured"

text="Blue"

value="blue"/>

<purple

jcr:primaryType="nt:unstructured"

text="Purple"

value="purple"/>

<green

jcr:primaryType="nt:unstructured"

text="Green"

value="green"/>

</items>

</hoverColor>

</items>

</bgimagecontainer>

<noimagecontainer

granite:class="showhidecardvariation"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<granite:data

jcr:primaryType="nt:unstructured"

showhidetargetvalue="noImage"/>

<backgroundColor

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/select"

fieldDescription="Select background color from the options. For background color Gray, CTA button is not required to be configured."

fieldLabel="Background color"

name="./backgroundColor">

<white

jcr:primaryType="nt:unstructured"

text="White"

value="white"/>

<gray

jcr:primaryType="nt:unstructured"

text="Gray"

value="gray"/>

<blueGradient

jcr:primaryType="nt:unstructured"

text="Blue Gradient"

value="blueGradient"/>

</items>

</backgroundColor>

</items>

</noimagecontainer>

<redirectType

granite:class="cq-dialog-showhide"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/select"

fieldLabel="Redirection URL or CTA (Use CTA for no image variation only)"

name="./redirectType">

<granite:data

jcr:primaryType="nt:unstructured"

cq-dialog-showhide-target=".showhideredirecttype"/>

<url

jcr:primaryType="nt:unstructured"

text="URL"

value="url"/>

<cta

jcr:primaryType="nt:unstructured"

text="CTA Link"

value="cta"/>

</items>

</redirectType>

<urlcontainer

granite:class="showhideredirecttype"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<granite:data

jcr:primaryType="nt:unstructured"

showhidetargetvalue="url"/>

<url

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

fieldDescription="User will be redirected to this URL when user clicks on the card"

fieldLabel="Redirection URL"

name="./redirectionURL"

rootPath="/content"/>

</items>

</urlcontainer>

<ctacontainer

granite:class="showhideredirecttype"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

<granite:data

jcr:primaryType="nt:unstructured"

showhidetargetvalue="cta"/>

<ctalinktext

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="CTA link title or name."

fieldLabel="CTA Link Text"

name="./ctaLinkText"/>

<ctalink

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/coral/common/form/pagefield"

fieldDescription="CTA Link to a content page, external URL or page anchor."

fieldLabel="CTA Link URL"

name="./ctaLink"

rootPath="/content"/>

<target

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"

name="./ctaLinkTarget"

text="Open link in new tab."

uncheckedValue="_self"

value="_blank"/>

</items>

</ctacontainer>

</items>

</field>

</imageContentCards>

</items>

</column>

</items>

</content>

</jcr:root>

PRATHYUSHA_VP · 11/18/24

hi @Anilkumar9

Re-checked your dialog structure, classes for hide and show values are not assigned as expected. please check the attached file and try to update same

Same example can be found in core components list component :

Link : https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/v...

Update if it works

Thanks,

Prathyusha

konstantyn_diachenko · 11/18/24

Hi @Anilkumar9,

please compare how did I configure cardSizeContainer in the dialog example above with your cardsize field. Pay attention to the granite:data properties.

Shashi_Mulugu · 11/23/24

@Anilkumar9 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

Adobe Experience Manager Sites & More

I have a component based on show-hide in AEM. can any one help on this

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe