Slightly in AEM

Infodales Tech Solutions | January 7, 2023

Hello, welcome to another learning.

Slightly in AEM

In this blog we will be discussing Slightly in AEM. We will be focused upon understansing what exactly slightly is and what advantages does it provide.

What Slightly

Slightly, commaonly referred as sly is a templating engine which is indeed a part of AEM's Slightly templating framework. It is segregates the business logic and presentation logic. It offers a cleaner way to develop frontend scripts.

The main purpose of Slightly is not only to provide a clean, easy and maintainable rendering in AEM compared to JSP but also protects injection attacks.

Syntax

Slightly offers a very simple syntax.

Expression Language or Interpolation

Just like JSP, Slightly also offers expression language. The syntax for the same is ${expression}. This is used to evaluate the expression and display the result. It is used to display the value of a variable or an object.
Attributes

Attributes are used to inject data and the syntax is data-sly, for example data-sly-use, data-sly-repeat and data-sly-include.
Dynamic Data Rendering

Snippets like data-sly-test and data-sly-repeat allows helps to dynamically render the data.

Commonly Used Tags used in Slightly

data-sly-use is used to include sling models in slightly.

                                
        <sly data-sly-use.model="com.infodales.aem.core.models.HelloWorldModel">
            ${model.message} 
        </sly>

data-sly-test is a basic sly tag more over used like an if-else statement. It is used to test the condition and render the data accordingly.

                                
                                    
        <sly data-sly-test="${condition}">
            <p>If condition is true, render this.</p>
        </sly>

This is how we can actually use datasly-test to render the condition. It displays the name of the author if currentPage.author is not null

                                
        <sly data-sly-test.authorName="${currentPage.author}">
        <p>Author: ${authorName}</p>
        </sly>
        <sly data-sly-test="${!currentPage.author}">
            <p>No author found</p>
        </sly>

data-sly-choose Is again a form of if-else statement that chooses the data to be rendered conditionally. Here we are using it to display the page title.

                                
        <sly data-sly-choose>
        <sly data-sly-test="${page.title}">
            <h1>${page.title}</h1>
        </sly>
        <sly data-sly-test="${!page.title}">
            <p>No title available</p>
        </sly>
        </sly>

data-sly-unwrap is used to remove the just outer sly tag keeping the inner content as it is hence removing the unwanted markups.

                                    
                                        
                                        
        <sly data-sly-unwrap>
            <div>
                <p>Unwrap this div</p>
            </div>
        </sly>

data-sly-call is used to call a template or a component. It is used to include the template or component in the current file.

                                
                                    
        <sly data-sly-call="${'template.html'}"></sly>

data-sly-set is used to set the value of a variable and use it in the template.

                                
                                    
        <sly data-sly-set.hello="Hello World">
            ${hello}
        </sly>

data-sly-attribute is used to set the attribute of an element dynamically.

                                
                                    
        <div data-sly-attribute.class="${'container-class'}"></div>

data-sly-text is used to display the text content of an element which can be from model or expression.

                                
                                    
        <div data-sly-text="${'Hello World'}"></div>

data-sly-include is used to include the content of a some fragments or templates for resue here.

                                
                                    
        <sly data-sly-include="${'header.html'}"></sly>

data-sly-repeat is a loop statement which is used to iterate over a list of items.

                                
                                    
        <ul>
            <sly data-sly-repeat="${items}">
                <li>${item}</li>
            </sly>
        </ul>

data-sly-template Is used to add a resuable template in the current file.

                                
                                    
        <sly data-sly-template.myTemplate>
        <div class="testComponent">${componentData}</div>
        </sly>
        
        <sly data-sly-call="${testTemplate @componentData='Data'}"></sly>

data-sly-resource is used to include another component and path manipulations. Here we are including customtext component and naming it as customText. Also we are performing path manipulations that produces path/before/this/path and path/after/this/path respectively.

                            
                                
        <div data-sly-resource="${'customText' @ resourceType='/apps/local-project/components/content/customtext'}"></div> 
        <section data-sly-resource="${'path/before' @ appendPath='this/path'}"></section>  
        <section data-sly-resource="${'path/after' @ prependPath='this/path'}"></section>

data-sly-skip In order to skip all the unwanted code when false id returned this tag is used.

                                
        <sly data-sly-skip="${!page.title}">
            <h1>${page.title}</h1>
        </sly>

data-sly-append Is used to append the content of an element or a variable.

                                
        <sly data-sly-append=" ${page.description}"></sly>

@context is one of the freqently used slightly attribute. @context = 'html' escapes the specail characters ensuring the content is treated as html.@context='url' ensures that the url is encoded properly. @context='text' ensures that the content is treated as plain text and @context='unsafe' renders the content without escaping which is really dangerous as it prone to XSS(cross-site-scripting) attacks.

                                
        <div data-sly-use.script="testscript.js" data-sly-context="${'unsafe'}">
            ${script.dynamicContent}
        </div>

        <div data-sly-use.text="markuptext" data-sly-context="${'html'}">
            ${text.htmlContent}
        </div>

        <a href="${homepage.url @ context='url'}">Home Page</a>

        <div data-sly-use.text="plaintext" @context="text">
            ${text.plainTextContent}
        </div>

Conclusion

Here we come to the conclusion of the blog where we have understood how we can produce a frontent scripts using Slightly with some commonly used sly tags and their syntax.

I hope you enjoyed the learing and have found the blog informative.

Shruti Meshram | AEM Developer