Sightly

Sightly

data-sly-test

Use this tag for printing any tag if the value exists, if the value does not exists, the tag itself will not be displayed. This tag will also be used for assigning any values as below

<div data-sly-test.pageLinkReference="${properties.cq:pageLinkRef}">
   <a href="${pageLinkReference}">${page.title}</a>
</div>

data-sly-list

Use this tag to print any list of objects

Printing component properties in Sightly 

${properties.text}
${properties.linkTo}

Note: In the above example: text and linkTo are the property names

Sample to displaying using data-sly-test

<div data-sly-test="${properties.linkTo}">
<a href="${properties.linkTo}.html">${properties.text}</a>
</div>

Sample to retrieve data from a regular service in AEM

<div data-sly-test="${properties.linkTo}">
<a href="${linkComponent.link}.html" data-sly-use.linkComponent="com.sampleproject.core.components.LinkComponent">${linkComponent.text}</a>
</div>

Java Code: (Link Component)

package com.sampleproject.core.components;

import com.adobe.cq.sightly.WCMUsePojo;

/**
 * The Class LinkComponent.
 *
 * @author Venkata Naga Sudheer D
 */
public class LinkComponent extends WCMUsePojo {

/** The text. */
private String text;

/** The link. */
private String link;

/*
* (non-Javadoc)
*
* @see com.adobe.cq.sightly.WCMUsePojo#activate()
*/
@Override
public void activate() throws Exception {
text = getProperties().get("text", "");
link = getProperties().get("linkTo", "");
}

/**
* Gets the text.
*
* @return the text
*/
public String getText() {
return text;
}

/**
* Gets the link.
*
* @return the link
*/
public String getLink() {
return link;
}

}

Sample to retrieve data from a Sling Model

<div data-sly-test="${properties.linkTo}">
<a href="${properties.linkTo}.html"
               data-sly-use.linkComponentModel =
               ${'com.sampleproject.core.components.LinkComponentSlingModels'
               @ pagePath = properties.linkTo}">
           ${properties.text}
       </a>
       Printing Linked Page Title - ${linkComponentModel.page.title}
</div>

Java Code

package com.sampleproject.core.components;

import javax.annotation.PostConstruct;

import javax.inject.Inject;

import org.apache.sling.api.SlingHttpServletRequest;

import org.apache.sling.models.annotations.Model;

import com.day.cq.wcm.api.Page;

import com.day.cq.wcm.api.PageManager;

/**

 * The Class LinkComponentSlingModels.

 * 

 * @author vdonaboi

 */

@Model(adaptables=SlingHttpServletRequest.class)

public class LinkComponentSlingModels {

/** The link. */

@Inject

private String pagePath;

/** The page manager. */

@Inject

private PageManager pageManager;

/** The page. */

private Page page;

/**

* Inits the.

*/

@PostConstruct

protected void init() {

page = pageManager.getPage(pagePath);

}

/**

* Gets the page.

*

* @return the page

*/

public Page getPage() {

return page;

}

}

Sample to retrieve data from a different component/resource

<div data-sly-test.linkPath="${properties.linkTo}">
<a href="${properties.linkTo}.html"
                      data-sly-resource="${properties.linkTo
                      @ appendPath='_jcr_content',
                       resourceType='/apps/sampleproject/components/content/pageinfo' }">
                ${properties.text}
         </a>
</div>

pageinfo.html

SLING: ${properties.jcr:title} (${resourcePage.name})

Printing List of children

<div data-sly-list="${currentPage.listChildren}">
  <div>${itemList.index} ${item.title}</div>
</div>
itemList.index - Displays the index of the childpage
item.title - Displays the title of the child page

Printing List of Children starting the index as 1 instead of 0

<div data-sly-list="${currentPage.listChildren}">
  <div data-sly-use.counter="${'counter.js' @ index = itemList.index}">
${counter.incrementedIndex} ${item.title}
         </div>
</div>

Counter.js

use( function () {

    var currentIndex = this.index;

    log.info("CurrentIndex is: " + currentIndex);

    return {

        incrementedIndex: ++currentIndex

    };

});