unable to create accordion in aem a cloud services

[VivekSr1]

I have written function that is creating an accordion in content fragment in aem 6.5.21 but now we are migrating to aem as a cloud service and want the same functionality but its not working.
I am sharing snippet of code below.

function setAccordionView($multifield) {
var template = document.createElement('template');
template.innerHTML = '<coral-accordion-item><coral-accordion-item-label>Card</coral-accordion-item-label><coral-accordion-item-content>' + $multifield[0].template.innerHTML + '</coral-accordion-item-content></coral-accordion-item>';
template.setAttribute('coral-multifield-template', '');
$multifield[0].template = template;
$multifield[0].outerHTML = "<coral-accordion>" + $multifield[0].outerHTML + "</coral-accordion>";
}

Please help me.

[SantoshSai]

Hi @VivekSr1,

Root Cause 

1. Coral UI DOM manipulation is discouraged in AEMaaCS.

   • AEMaaCS uses dynamic Coral rendering and reactive bindings, and direct DOM overrides often get ignored or reset by Coral runtime (especially with template overrides like yours).

2. Content Fragment Editor (CFE) is entirely SPA-driven and leverages Coral React components behind the scenes.

3. coral-multifield-template manipulation doesn't work in the same way anymore. It’s rendered via foundation registry, not raw HTML.

Try this instead:

Option 1: Use Fieldset or PanelGroup Instead of Forcing Accordion

AEM now allows visual grouping using fieldset or panelgroup Coral wrappers.

<fieldset
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
  name="./yourMultifield"
  label="Grouped Accordion Section">
  <items jcr:primaryType="nt:unstructured">
    <!-- Your form fields here -->
  </items>
</fieldset>

This will create a visually collapsible section (though not a true accordion) that’s fully supported in AEMaaCS.

Option 2: Use Coral’s <coral-panelstack> and <coral-panel> programmatically

If you still want accordion behavior and are using custom dialogs, build the layout using Coral-native APIs:

const panelStack = new Coral.PanelStack();

const panel = new Coral.Panel().set({
  label: 'My Accordion Section',
  content: 'Custom content goes here.'
});

panelStack.items.add(panel);
document.querySelector('.your-container').appendChild(panelStack);

Be cautious: injecting DOM like this in Content Fragment Editor is unsupported and might break after Adobe updates.

Option 3: Create a Custom Dialog Widget Plugin

This is the Adobe-recommended approach:

• Create a custom field component that behaves like an accordion.

• Register it in the foundation registry and call it in your dialog or schema.

• You can refer to Coral’s JS APIs to create your component using Coral.Accordion.

[VivekSr1]

Hi @SantoshSai ,

I have created content fragment model as you suggested but its not working.

<model
    cq:targetPath="/content/entities"
    jcr:primaryType="cq:PageContent"
    sling:resourceType="wcm/scaffolding/components/scaffolding"
    dataTypesConfig="/mnt/overlay/settings/dam/cfm/models/formbuilderconfig/datatypes"
    maxGeneratedOrder="20">
    <cq:dialog
            jcr:primaryType="nt:unstructured"
            sling:resourceType="cq/gui/components/authoring/dialog">
        <content
                jcr:lastModified="{Date}2020-05-11T10:51:40.812-05:00"
                jcr:lastModifiedBy="admin"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
            <items
                    jcr:primaryType="nt:unstructured"
                    maxGeneratedOrder="24">
                    <fieldset
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
                            name="./actionWidget"
                            label="Grouped Accordion Section">
                        <items jcr:primaryType="nt:unstructured">
                            <widgetName
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    emptyText="Enter the Name used for Action Widget"
                                    fieldDescription="Enter the Name used for Action Widget"
                                    fieldLabel="Widget Name"
                                    name="widgetName"/>
                        </items>
                    </fieldset>
            </items>
        </content>
    </cq:dialog>
</model>

Is it possible for you to create one sample and send

[SantoshSai]

@VivekSr1 

From what I see, you're trying to define a custom dialog layout within a Content Fragment Model by using a cq:dialog node. However, this won't work because Content Fragment Models (CFMs) are not authored like components and do not use cq:dialog-based definitions.

In AEM, Content Fragment Models are configured via the CFM Editor UI at /assets.html/content/dam, and their structure is defined through the Content Fragment Model Editor, not through cq:dialog.

The structure you're trying to define:

<cq:dialog ...>

...is applicable for regular component dialogs (.content.xml under a component folder), not for Content Fragment Models.

[kautuk_sahni]

@VivekSr1 Just checking in — were you able to resolve your issue?
We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!