Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Nested Multifield Slider - How to render image and text as a slider in Nested Multifield

Avatar

Level 5

Hello @All I am trying to create a nested multifield carousel slider component. For that I have created a cq:dialog with nested and I'm storing those values under /content/jcr node. When I implement those values in slider I see only the inner multifield fields displayed in carousel the outer multifield(other fields except the first one) is not displaying. I have created the sling model like the below. Here I have shared my code . Please review and let me know anything I can do so I can get all the outer multifields also for my slider. 

 

VanithaB1_1-1646475684343.png

 

In the above I'm getting only testimonies (item0, item1) of slider item0  for my slider but I'm not getting the item1 (testimonies) that is the outer nested multifield. Thought I get the values it's not displaying like a slider. 

Here is my sling model and HTL

 and I'm getting a output like this 

VanithaB1_2-1646478263876.png

 


<sly sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"/>
<sly data-sly-call="${clientLib.css@ categories=['OnePage.testing']}"/>
<sly data-sly-call="${clientLib.js @ categories=['OnePage.testing']}"/>
<sly data-sly-use.model="com.adobe.aem.OnePage.core.models.TestimoniesModel"/>
<sly data-sly-test="${!empty}"/>
<sly data-sly-list.slider="${model.slider}"/>
<sly data-sly-list.testimony="${slider.testimonies}"/>
<sly data-sly-test.empty="${!model.slider}" />
<div class="gtco-testimonials">
<h2>Testimonials Carousel - Cards Comments</h2>
<div class="owl-carousel owl-carousel1 owl-theme">
<div>
<div class="card text-center"><img class="card-img-top" src="${testimony.fileReference}" alt="">
<div class="card-body">
<h5>${testimony.clientName} <br/>
<span> Project Manager </span>
</h5>
<p class="card-text">${testimony.description}</p>
</div>
</div>
</div>
</div>
</div>
</div>
package com.adobe.aem.OnePage.core.models;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import javax.inject.Inject;
import java.util.List;
@Model(
adaptables = {Resource.class},
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public interface TestimoniesModel {

@Inject
List<Company> getSlider(); // the name `getCompanies` corresponds to the multifield name="./companies"
/**
* Company model
* has a name and a list of departments
*/
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
interface Company {
@Inject
String getName();
@Inject
List<Department> getTestimonies(); // the name `getDepartments` corresponds to the multifield name="./departments"
}
/**
* Department model
* has a name and a manager
*/
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
interface Department {
@Inject
String getDescription();
@Inject
String getClientName();
@Inject
String getFileReference();
}
}

 

2 Replies

Avatar

Community Advisor

You have issues with HTL list looping.

you need t loop through - 

e.g.

<sly data-sly-list.testimony="${slider.testimonies}">
<img class="card-img-top" src="${testimony.fileReference}" alt="">
</sly>

 



Arun Patidar

Avatar

Level 5

@arunpatidar  Thank you so much. I have been struggling for a long time to resolve this issue. I was trying to add this loop onto div and trying so I didn't get the correct output. Now It's working fine. Thanks for the help.