Hi @Sanjana12 ,
You can use it in the following way.
In the component dialog if you are using Coral3 resource Types make sure to use the composite="{boolean}true". Please see the below dialog snippet
<bookdetailswithmap
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Books Details"
fieldLabel="Book Details"
required="{Boolean}false">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
emptyText="Books Details"
name="./bookdetailswithmap">
<items jcr:primaryType="nt:unstructured">
<book
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
emptyText="Book Name"
fieldLabel="Book Name"
name="./bookname"/>
<subject
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
emptyText="Book Subject"
fieldLabel="Book Subject"
name="./booksubject"/>
<published
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
emptyText="Publish Year"
fieldLabel="Publish Year"
name="./publishyear"/>
</items>
</field>
</bookdetailswithmap>
In the above code I am trying to fetch book details. Create your dialog in a similar way.
Now in your Model,
1. Create a list
2. Get the resource and get -> componentResource.getChild("bookdetailswithmap")
This will fetch the nodes created under the multifield. (Whenever a multifield will be added a new node will be created)
3. Once the nodes are fetched, create a Map and input values in the map as shown. In your case you will be added the String Value of the Link to the map.
4. Return the Map.
@Override
public List<Map<String, String>> getBookDetailsWithMap() {
List<Map<String, String>> bookDetailsMap=new ArrayList<>();
try {
Resource bookDetail=componentResource.getChild("bookdetailswithmap");
if(bookDetail!=null){
for (Resource book : bookDetail.getChildren()) {
Map<String,String> bookMap=new HashMap<>();
bookMap.put("bookname",book.getValueMap().get("bookname",String.class));
bookMap.put("booksubject",book.getValueMap().get("booksubject",String.class));
bookMap.put("publishyear",book.getValueMap().get("publishyear",String.class));
bookDetailsMap.add(bookMap);
}
}
}catch (Exception e){
LOG.info("\n ERROR while getting Book Details {} ",e.getMessage());
}
LOG.info("\n SIZE {} ",bookDetailsMap.size());
return bookDetailsMap;
}
Sightly -> In sightly fetch the list and iterate over the map using data-sly-list as shown below.
<div data-sly-use.books="com.aem.geeks.core.models.AuthorBooks">
.
.
.
<div data-sly-list.item="${books.bookDetailsWithMap}">
<p> Book : <b>${item.bookname} </b></p>
<p> Subject : <b>${item.booksubject}</b> </p>
<p> Publish : <b>${item.publishyear}</b> </p>
</div>
Thanks
