Available Block Statements - Sightly

Available Block Statements in Sightly :
Sightly Block statements are custom data attributes added directly to existing HTML element and converting it to a functional dynamic template without breaking the quality of the HTML code.

To know more about useful tools and plugins to learn Sightly , read its previous article
Sightly Beautiful Markup

1.Use - data-sly-use :
It is used to initialize a helper object (defined in Javascript or Java class) and exposes it through a identifier.
Examples for data-sly-use :
We define a component ,sample , located at
/apps/my-project/components/sample
Javascript Logic
It contains JS logic file and sightly component html file located at
/apps/my-project/components/sample/sample.js
/apps/my-project/components/sample/sample.html

use(function(){
      return{
         text:"Hello Sightly"
         };
    });



${sample.text} 


Hello Sightly 

Java Class Logic
It contains Java file located at
/apps/my-project/components/sample/sample.java
/apps/my-project/components/sample/sample.html

package apps.my_project.components.sample;
  
import com.adobe.cq.sightly.WCMUse;
  
public class Sample extends WCMUse {
    private String text;
      
    @Override
    public void activate() throws Exception {
        text="Hello Sightly";
    }
  
    public String getText() {
        return text;
    }
  
}



${sample.text}


Hello Sightly

Initialize a Java class, where that class is installed as part of an OSGi bundle then its fully-qualified class name must be used:
<div data-sly-use.sample="com.myproject.Sample">${sample.text}</div>

Parameters can be passed to the Use-API by using expresion options :

Sample.html: <p data-sly-use.param="${'sample.js' @paramval = 'Welcome'}"> ${param}</p> sample.js : use(function() { return this.paramval+" Sightly"; }); Output : <p> Welcome Sightly</p>
Scope of the data-sly-use identifier(here sample) is used anywhere after its declaration

${sample.text}
${sample.text}



Hello Sightly
Hello Sightly

The Use statement can also be used to load external templates. We can see this briefly in data-sly-templates.

2. Text - data-sly-text
        i.It is used to replaces the content of its host element with the specified text
        ii.Its element(Ex :  <div></div>) is always shown.
        iii.Its element's content(Ex: <div>This is element's content</div>) is replaced with its evaluated result and there is no identifier.
        iv.The content of the data-sly-text attribute is automatically XSS-protected with the text context.
Example :
sample.html : <div data-sly-text=${currentPage.title}>This is sample content</div>
output : <div>Available Block Statements</div><!--/* It replaces content with currentpage title */-->
And it is not treated specially if it has false or empty variables like

<p data-sly-text="${''}"></p>    <!--/* outputs: */--> <p></p>
<p data-sly-text="${[]}"></p>    <!--/* outputs: */--> <p></p>
<p data-sly-text="${0}"></p>     <!--/* outputs: */--> <p>0</p>
<p data-sly-text="${false}"></p> <!--/* outputs: */--> <p>false</p>

3. Element - data-sly-element
       i.It is used to replaces the element's tag name 
      ii.Always shown Content of the host element but replaced element's tag name
     iii.To consider safety reasons, data-sly-element accepts only the below element names:

a abbr address article aside b bdi bdo blockquote br caption cite code col colgroup data dd del dfn div dl dt em figcaption figure footer h1 h2 h3 h4 h5 h6 header i ins kbd li main mark nav ol p pre q rp rt ruby s samp section small span strong sub sup table tbody td tfoot th thead time tr u var wbr

     iv.If we need to set for other elements then XSS security must be turned off(@context='unsafe').
  Example :

<div data-sly-element="h1">This is Content</div> <!--/* outputs: */--> <h1>This is content</h1>

4.Unwrap - data-sly-unwrap:
   i.It is used to hide its HTML element and show only its content.
  ii.If we need HTML elements only on Sightly presentation logic but doesn't need to display in output then we would use this block statement.

Example :

ExamTem.html

     
${title}


 



Templates supports Recursion :

ExamRec.html

    
    
    
        

            
 "${item.title}" 
                 

        
    

To know more about Template & calls, click AdobeAEMClub