Iterate list and put into a map in HTL Sightly

[rajat168]

Hi Team,

      please find below code 

<sly data-sly-use.fragment="com.adobe.cq.wcm.core.components.models.contentfragment.ContentFragment"
   data-sly-test="${properties.fragmentPath}" >
   IN SMB===>> ${fragment.elements.size}       
   <sly data-sly-list.element="${fragment.elements}">
    <p>NAME: ${element.name} ::Key==${element.value}
   </sly>
      
   
   <sly data-sly-use.longplancardstemplate="renderelement.html" 
      data-sly-call="${longplancardstemplate.contentFragment @ element=element}"/>
</sly>
<sly data-sly-test="${!isParagraphMode}"></sly>

  i want to put ${element.name} and its value ${element.value} in to Map and pass it to renderelement.html as param.

Kindly please help on this.

[arunpatidar · Accepted solution]

Hi @rajat168 
It is not possible to create Map using sightly. you need to write the business logic in sling model,

Either you can pass the list and return the Map or extract the ContentFragment in custom sling model, prepare map and return.

[h_kataria]

Any particular reason that you are trying to convert it to a Map before passing it to your template ? Essentially you can simply pass the elements itself to the template and can retrieve the name and value in the template itself.

<sly data-sly-use.longplancardstemplate="renderelement.html" 
      data-sly-call="${longplancardstemplate.contentFragment @ fragment=fragment}"/>

And then in your template 

<template data-sly-template.contentFragment="${ @ fragment}"> 
   <sly data-sly-list.element="${fragment.elements}">
     name : ${element.name}
     value : ${element.value}
   </sly>
</template>

[rajat168]

Hi @h_kataria ,

  when iterating ${fragment.elements},the size was 3 ,its iterating the renderelement.html 3 times and it's leading the duplicate data. I want to iterate ${fragment.elements} at one time and get all data at once

[rk_pandian]

Then its better to iterate the CF elements in a sling model, construct a map and use the map in sightly as per your requirement.

Regards,

Ramkumar

[h_kataria]

I am not sure if I understood it correctly but your renderelement.html should only be called once. Even if you put all elements inside the map somehow, the map would still have 3 entries. So, if you are planning on iterating over that Map in your template, loop will still run 3 times. 

[rajat168]

Hi @h_kataria , please find the code given.

<sly data-sly-use.fragment="com.adobe.cq.wcm.core.components.models.contentfragment.ContentFragment" data-sly-test="${properties.fragmentPath}">
    <sly data-sly-list.eachItem="${fragment.elements}">
        <!-- Start: Hero Banner Slider -->
        <div class="hero-banner-wrap hero-banner-one-slide digital-internet-herobanner demand-discovery-banner">
            <div class="hero-banner-carousel-wrap">
                <div class="swiper hero-banner-slider">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="hero-banner-box">
                                <div class="tile-box-tile">
                                    <div class="img-cover">
                                        <div class="cover">
                                            <picture>
                                                <source srcset="./resources/img/media/demand-discovery-mobile-cover.png" media="(max-width: 767px)" />
                                                <source srcset="./resources/img/media/demand-discover-cover.png" media="(max-width: 1024px)" />
                                                <source srcset="./resources/img/media/demand-discover-cover.png" media="(max-width: 1920px)" />
                                                <img src="./resources/img/media/demand-discover-cover.png" class="cover lazyloaded" alt="homebanner-iphone11pro-english-1920x500" />
                                            </picture>
                                        </div>
                                    </div>
                                    <div class="tile-box-body">
                                        <div class="container">
                                            <div class="sec-main-headings">
                                                <h1 class="eand-dot" data-aos="fade-up" data-aos-delay="300" data-sly-test="${eachItem.name=='heading'}">${eachItem.value}</h1>
                                                <h6 class="subheading" data-aos="fade-up" data-aos-delay="500" data-sly-test="${eachItem.name=='subHeading'}">
                                                    ${eachItem.value}
                                                </h6>
                                                <h4 data-aos="fade-up" data-aos-delay="700" data-sly-test="${eachItem.name=='description'}">${eachItem.value}</h4>
                                            </div>
                                            <div class="btn-wrap">
                                                <a data-aos="fade-up" data-aos-delay="600" href="javascript&colon;void(0)" class="btn btn-green ripple-effect">VIEW PLANS</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="container pagination-contaier">
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>         
        <!-- End: Hero Banner Slider -->
    </sly>
</sly>
<sly data-sly-use.template="core/wcm/components/commons/v1/templates.html" data-sly-call="${template.placeholder @ isEmpty=!properties.fragmentPath, classAppend='cq-dd-contentfragment'}"></sly>

i was trying to iterate cfm json arraylist, when i tried to iterate the list which has 3 elements, its getting 3 time iteration acutally i want to iterate only one time with all relavent data from json array list.

[h_kataria]

ok, thanks for clarifying, you can try using exportedElements and see if it helps. So, it would look something like this :

<sly data-sly-use.fragment="com.adobe.cq.wcm.core.components.models.contentfragment.ContentFragment" data-sly-test="${properties.fragmentPath}">
        <!-- Start: Hero Banner Slider -->
        <div class="hero-banner-wrap hero-banner-one-slide digital-internet-herobanner demand-discovery-banner">
            <div class="hero-banner-carousel-wrap">
                <div class="swiper hero-banner-slider">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="hero-banner-box">
                                <div class="tile-box-tile">
                                    <div class="img-cover">
                                        <div class="cover">
                                            <picture>
                                                <source srcset="./resources/img/media/demand-discovery-mobile-cover.png" media="(max-width: 767px)" />
                                                <source srcset="./resources/img/media/demand-discover-cover.png" media="(max-width: 1024px)" />
                                                <source srcset="./resources/img/media/demand-discover-cover.png" media="(max-width: 1920px)" />
                                                <img src="./resources/img/media/demand-discover-cover.png" class="cover lazyloaded" alt="homebanner-iphone11pro-english-1920x500" />
                                            </picture>
                                        </div>
                                    </div>
                                    <div class="tile-box-body">
                                        <div class="container">
                                            <div class="sec-main-headings">
                                                <h1 class="eand-dot" data-aos="fade-up" data-aos-delay="300">${fragment.exportedElements.heading.value}</h1>
                                                <h6 class="subheading" data-aos="fade-up" data-aos-delay="500">
                                                    ${fragment.exportedElements.subHeading.value}
                                                </h6>
                                                <h4 data-aos="fade-up" data-aos-delay="700">${fragment.exportedElements.description.value}</h4>
                                            </div>
                                            <div class="btn-wrap">
                                                <a data-aos="fade-up" data-aos-delay="600" href="javascript&colon;void(0)" class="btn btn-green ripple-effect">VIEW PLANS</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="container pagination-contaier">
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>         
        <!-- End: Hero Banner Slider -->
</sly>
<sly data-sly-use.template="core/wcm/components/commons/v1/templates.html" data-sly-call="${template.placeholder @ isEmpty=!properties.fragmentPath, classAppend='cq-dd-contentfragment'}"></sly>

Otherwise, you will probably have to take the sling model approach to achieve your requirements. Hope this helps.

[rajat168]

Hi @h_kataria ,

 thanks much for your effort and response.

Let me explain the context in detail.

1) we are trying to apply our own styles for given content fragment path based on selection of the fragment elements. for that, we have created proxy component of core/wcm/components/contentfragment/v1/contentfragment

2)  in below screenshot, when we drag drop the component on page, provide the cfm path, select the elements to be displayed. It will show only text format(next screenshot) of the elements instead of html view format (which we have given html format in previous post).

Kindly let us know how to apply with style..

[h_kataria]

Try adding context html while retrieving e.g 

${fragment.exportedElements.description.value @ context='html'}

[kautuk_sahni]

@rajat168 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!