Level 3

Solved

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

Forum|Forum|1 year ago
November 18, 2024
3 replies
1042 views

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

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 konstantyn_diachenko

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-dropdown-selection-aem-6-5/m-p/549200

Best regards,

Kostiantyn Diachenko.

konstantyn_diachenko

Accepted solution

Community Advisor

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-dropdown-selection-aem-6-5/m-p/549200

Best regards,

Kostiantyn Diachenko.

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

PRATHYUSHA_VP

Community Advisor

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

Anilkumar9Author

Level 3

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

Community Advisor

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/wcm/components/list/v2/list/_cq_dialog/.content.xml

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

Update if it works

Thanks,

Prathyusha

content.zip

Shashi_Mulugu

Community Advisor

@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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded