App Builder

ShivamSh1 · 3/19/24

<panel
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
        composite="{Boolean}true"
        fieldLabel="Panels">
    <field
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container"
            name="./panels">
        <items jcr:primaryType="nt:unstructured">
            <column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <accordianIcon
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="/libs/granite/ui/components/coral/foundation/form/pathfield"
                            fieldDescription="icon to be displayed for expand/collapse option"
                            fieldLabel="Accordion Title Icon"
                            name="./iconreferenceclose"
                            rootPath="/content/dam"/>
                    <alttext
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                            fieldDescription="A title to display as the headline Accordion."
                            fieldLabel="Alt Text"
                            name="./altText"/>
                </items>
            </column>
        </items>
    </field>
</panel>

sateaswa94 · 3/19/24

Step 1
create a Sling model for accordion container

package com.example.models;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;

import org.apache.sling.models.annotations.DefaultInjectionStrategy;

import javax.inject.Inject;
import java.util.List;
@Model(adaptables = SlingHttpServletRequest.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class AccordionContainer {
@inject
private List<AccordionItem> accordionItems;
// Getters for the properties

public List<AccordionItem> getAccordionItems() {
return accordionItems;
}
}
Step 2
Create a sling model for accordion Item

package com.example.models;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;

import javax.inject.Inject;
import javax.inject.Named;

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class AuthorModel {
@inject
@Named("iconreferenceclose")
private String iconReferenceClose;
@inject
private String altText;

public String getIconReferenceClose() {
return iconReferenceClose;
}
public String getAltText() {
return altText;
}
}
Step 3
Sightly code to access the multifield dialog
<sly data-sly-use.accordionContainer="com.example.models.AccordionContainer">

<ul>
<sly data-sly-list.accordionItem="${accordionContainer.accordionItems}">
<li>
<h3>${accordionItem.iconReferenceClose}</h3>
<p>${accordionItem.altText}</p>
</li>
</sly>
</ul>
</sly>