Expand my Community achievements bar.

can anyone please help me with this sling model for multifield with sightly

Avatar

Level 2
<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>
Topics

Topics help categorize Community content and increase your ability to discover relevant content.

6 Replies

Avatar

Level 3

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>

Avatar

Level 2

IN step one you mention-- private List<AccordionItem> accordionItems;

what is this interface AccordionItem  ? and from which class need to extend can you please help?

Avatar

Level 3

Hi @ShivamSh1  It is not an interface, AccordionItem is a separate sling model for the multifield items

Avatar

Level 2

can you please send me the sling model for above dialog structure ?,actually I am new in AEM

Avatar

Level 3

I have shared the sling model for the requested dialog structure, Check step 1 and Step 2