Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Regarding Core Accordion Component

Avatar

Employee

Hi, I have a use case where I want to add a check box to the accordion component and upon checking that checkbox, I want to add an image field to each of the accordion entry. Is there any approach to this? Basically I have a use case of using 2 types of accordions. One the normal one and the other with the image, Based on author's choice I will render html but the problem is with constructing the dialog to accommodate this. Any suggestion on how this can be done will be really very helpful to me.

2 Replies

Avatar

Community Advisor

Hi @sakethchandra02 ,
It seems possible. Here I am sharing a draft. Here checkbox click is not added. You have to add javascript for checkbox click function. I can also help there if needed. Here is the component example of accordion which will have image and checkbox on dialog

 

.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:isContainer="true"
    jcr:primaryType="cq:Component"
    jcr:title="Accordion"
    sling:resourceSuperType="core/wcm/components/accordion/v1/accordion"
    componentGroup="Content Structure"
    imageDelegate="core/wcm/components/image/v2/image"/>

cq:dialog sample:

<?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="Accordion"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[core.wcm.components.commons.editor.dialog.childreneditor.v1,core.wcm.components.accordion.v1.editor]"
    helpPath="https://www.adobe.com/go/aem_cmp_accordion_v1"
    trackingFeature="core-components:accordion:v1">
    <content
        granite:class="cmp-accordion__editor"
        jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <tabs jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:orderBefore="cq:styles"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        maximized="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <image
                                                jcr:primaryType="nt:unstructured"
                                                jcr:title="Image"
                                                sling:resourceType="granite/ui/components/coral/foundation/container"
                                                margin="{Boolean}true">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <columns
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                                        margin="{Boolean}true">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <column
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <file
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                                                        allowUpload="{Boolean}false"
                                                                        class="cq-droptarget"
                                                                        fieldLabel="Image Asset"
                                                                        fileNameParameter="./fileName"
                                                                        fileReferenceParameter="./fileReference"
                                                                        mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
                                                                        name="./file"
                                                                        title="Upload Image Asset"/>
                                                                </items>
                                                            </column>
                                                        </items>
                                                    </columns>
                                                </items>
                                            </image>
                                            <yourcheckbox
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}true"
                                                fieldDescription="Inherit Image from page"
                                                name="./inheritImage"
                                                text="Inherit Image from page"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

 Here accordion is inherited from core component. checkbox and image browser added. You will need to modify the htl as you needed

Avatar

Employee

Thanks a lot for spending time on my question but the use case here is to add image to every accordion element but not one image for the entire component. 

sakethchandra02_0-1694965364182.png

I would be needing an image field here for Accordion 1 and Accordion 2 when I check that checkbox. If I uncheck it, the image field shouldn't come for each accordion element.