Multifield cta is not working from sling model

[#1]

Hi All,

i have a custom multi field which stores values in below structure.

and i am trying to get the values as below in my htl file. i am iterating a list of carousel- item0 , item1 and the inside cta-item0, item1.

The issue is my htl component should show cta-item0 for carousel item 0 and accordingly for second carousel too ,

but shows second cta - item0 and item1 only from second carousel item.

<sly data-sly-test="${column.carouselList}" data-sly-list="${column.carouselList}">

   <div class="slide">

  ${item.carouselText @ context='html'}

   <sly data-sly-test="${column.ctaList}" data-sly-list="${column.ctaList}">

   <a data-sly-test="${item.linkText}" href="${item.linkUrl}" data-sly-text="${item.linkText}" class="${item.linkClass @ context = 'styleString'}" target="${item.linkTarget ? '_blank':''}">

   </a>

   </sly>

</div>

</sly>

my sling model logic is

public List<SBean> getCtaList() {
  return ctaList;
}
public List<SBean> getCarouselList() {

   return carouselList;

}

[#2 · Accepted solution]

Hi krishc76025392​,

If you have designed your sling model correctly then you do not have to write above backend logic to populate data. All should automatically taken care by Sling Model. Below Sling Models and HTL script worked for me, give it a try.

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class Spotlight {

    @Inject
    private List<Carousel> carousel;

    public List<Carousel> getCarousel() {
        return carousel;
    }
}

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class Carousel {

    @Inject
    private String image;

    @Inject
    private List<CTA> ctas;

    public String getImage() {
        return image;
    }

    public List<CTA> getCtas() {
        return ctas;
    }
}

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class CTA {

   @Inject
   private String text;
   
   public String getText() {
      return text;
   }
   
}

<sly data-sly-use.spotlight="${'com.example.Spotlight'}" /> 
<br>         
    <sly data-sly-list="${spotlight.carousel}">              
        ${item.image} <br>             
        <sly data-sly-list.cta="${item.ctas}">                   
        -- ${cta.text} <br>             
        </sly>         
    </sly>

Thanks,

Radha Krishna N