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.
Views
Replies
Total Likes
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
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.
Views
Likes
Replies