AEM - Sightly Top 10 use cases

The HTML Template Language (HTL) supported by Adobe Experience Manager (AEM) is the preferred and recommended server-side template system for HTML in AEM. It takes the place of JSP (JavaServer Pages) as used in previous versions of AEM. Below are the top 10 use cases which are commonly used while working with sightly:

 

1.      Print current page title :

                ${currentPage.title}

 

2.      Use data-sly-test eval­u­ation :

<sly data-sly-test="${properties.jcr:title}">

 ${properties.jcr:title}

</sly >

 

3.     Include responsivegrid in slightly :

        <sly data-sly-resource ="${'parsys' @resourceType= 'wcm/foundation/components/responsivegrid'}"></sly>

4.     Integration with sling model :

        <sly data-sly-use.model ="packagename.modelClassName"></sly>

5.     Iterate a list :

        <sly data-sly-list="${model.listObject}">

            ${item.name}

        </sly>

6.  Index of list :

        <sly data-sly-list="${model.listObject}">

            ${itemList.index}

        </sly>

    index: zero-based counter (0..length-1)

    some other useful list objects:

        

• count: one-based counter (1..length).
• first: true for the first element being iterated.
• middle: true if element being iterated is neither the first nor the last.
• last: true for the last element being iterated.
• odd: true if index is odd.
• even: true if index is even

        7.     Iterate map :

                

                    <sly data-sly-use.model="com.aem.project.core.models.Model"/>                 <sly data-sly-set.myMap="${model.map}">             <p>key: ${ mapItem }</p>             <p>value: ${myMap[mapItem]}</p>                 </sly>                     </sly>

8.     Include other files :

               

                <sly data-sly-include="/libs/wcm/core/components/init/init.jsp"/>

      9.     Check edit mode :

                <p data-sly-test="${wcmmode.edit}">You are in edit mode</p>

      10.     Include ClientLibs :

            single clientlibs:
               <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"

                        data-sly-call="${clientlib.all @ categories='myCategory'}"/>

              multiple clientlibs:

                <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"

                    data-sly-call="${clientlib.all @ categories=['myCategory1', 'myCategory2']}"/>

        

        
    Hope this helps!!

    Happy Coding 🙏

                    

If you like my post and find it helpful, you can buy me a coffee.