AEM Sightly/Htl(Html Template Language)

1.Global Object in sightly

• HTL provides access to many objects useful to the developer. 
• These objects can be used directly without having to specify anything explicitly.

• properties: List of properties of the current resource.
• pageProperties: List of page properties of the current page.
• inheritedPageProperties: List of inherited page properties of the current page.

2.div data-sly-resource

• data-sly-resource is a Sightly directive used to include and render a resource (typically a component or a fragment of content) within another component or page. 
• It allows you to dynamically include content based on the specified path and resource type.

• If we want to include multiple components and have them inherit properties or configurations from another component in AEM,

3.data-sly-list

• list just iterates the items written inside its condition
• It repeat the internal structure.
• It doesn't repeat the complete structure.
• It means repeat the child elements.

4.data-sly-repeat

• It means whole container is repeated.
• It repeat the complete structure.
• It means repeats the elements.

When observing the output of using data-sly-list and data-sly-repeat, they appear identical.

The difference between data-sly-repeat and data-sly-list in Sightly 

View source page of data-sly-list 

• only inner structure iterate.

View source page of data-sly-repeat 

• complete structure iterate.

when working with data structures such as lists or arrays

• index: zero-based counter (0..length-1)
• 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.

5.data-sly-attribute

• provide the functionality to add dynamically generate the attribute.

6.data-sly-unwrap

• div data-sly-unwrap will unwrap or skip current tag and print its value.

8.data-sly-template

• use to create a template or reusable html code which can be consume on multiple places by data-sly-call.
• Using this approach we can easily include one html into another and pass data in the form of parameter.

9.data-sly-use

• It means we can call any method present in your Sling model.

10.Time and Date

11.Selector

12. data-sly-set

• It allow us to assign value to a custom variable as show below. 
• We can take it as a assignment operator.

Thanks 

Matri Sharma