Adobe Employee

Regarding Core Accordion Component

Forum|Forum|2 years ago
September 14, 2023
1 reply
1184 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

kaikubad

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

S

sakethchandra02

Author

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

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded