How to use data-sly attributes in slghtly with AEM

Here we will discuss some scenarios which are related to using the data-sly attributes to specific HTML-elements.

We can use all the data-sly attributes everywhere you like.

These scenarios will explain, data-sly-list with HTML5 article and section tags

Scenrio-1:  

            <article data-sly-list="${currentPage.listChildren}">

  <section>

    <h1>${item.title}</h1>

    <h2>${item.properties.subtitle}</h2>

    <h3 data-sly-test="${item.listChildren}">My page has subpages</h3>

  </section>

</article>

Preserve the markup from the designer

How many times do you get a HTML snippet from a designer with some nice mock data in there? And what do we with that?, we rip it apart and you just end up with a small snippet and you lost the context of it.

Now with sightly you can preserve the markup including the mock data, and still make it fully functional.

In the scenario below I have received a navigation HTML snippet, and integrated this with sightly. Via the empty data-sly-test attributes the elements are suppressed completely.

Scenrio-2:

<ul data-sly-list="${currentPage.listChildren}">

  <li data-sly-text="${item.title}">This is the first menu item from my page</li>

  <li data-sly-test><a href="#">This is the second menu item from my page </a></li>

  <li data-sly-test><a href="#">This is the third menu item from my page </a></li>

  <li data-sly-test><a href="#">This is the fourth menu item from my page </a></li>

</ul>

Naming your data-sly-test expression:

With data-sly-test you can show or hide an HTML element.

What you also can do is to name your expression and reuse that in other data-sly-test expression.

In the scenario below I have data-sly-test-valid, that then can used as ‘valid’ in the other data-sly-test expression.

Scenrio-3:

<div data-sly-test.valid="${pageProperties.name}">${pageProperties.name}</div>

<div data-sly-test="${!valid && wcmmode.edit}">Please enter a name for this page</div>

Hiding container elements

If some cases you have a need to hide a container element, for example hiding the <ul> for a list, or not generating a surrounding <div>

For these cases you can use the data-sly-unwrap attribute.

In this example we generate a list of <li> items, without the <ul>.

Scenrio-4:

<ul data-sly-list.child="${currentPage.listChildren}" data-sly-unwrap>

  <li>${child.title}</li>

</ul>

You can also pass an expression to the data-sly-unwrapped attribute to make it conditional.

Here you see that only in edit-mode the <ul> is hidden.

Scenrio-5:

<ul data-sly-list-child="${currentPage.listChildren}" data-sly-unwrap="${wcmmode.edit}">

  <li>${child.title}</li>

</ul>

Custom Java-classes

In most projects you will find yourself in need to write some custom code to support your components. With sightly you can use the data-sly-use attribute for that.

Scenrio-6:

<div data-sly-use.comp1="com.myproject.SightlyComponent">

  <h1>${comp1.myTitle}</h1>

</div>

Java-class, option 1

We have a few options how you can write your custom class, the first option is that your Java-class is extending the “WCMUse” class from Sightly.

When extending this class you are able to call methods like “getResource()”, “getCurrentPage()”, “getPageManager()” etc.

Here an example of a Java-class that extends WCMUse.

SightlyComponent.java

                  public class SightlyComponent extends WCMUse  {

  private String myTitle;

  @Override

  public void activate() {

    myTitle = "My Project " + getCurrentPage().getTitle();

  }

  public String getMyTitle() {

    return myTitle;

  }

}

Java-class, option 2

If you don’t feel comfortable to extend a class, you can also implement the Use-interface.

Via the init() method you can access all the bindings that are available. These are things like “currentPage”, “resource”, “request” etc.

Here an example of this implementation.

SightlyComponent.java

                  public class SightlyComponent implements Use {

  private String myTitle;

  @Override

  public void init(Bindings bindings) {

    Page currentPage = (Page) bindings.get(WCMBindings.CURRENT_PAGE);

    myTitle = currentPage.getTitle() + "new";

  }

  public String getMyTitle() {

    return myTitle;

  }

}

We have some more options how you can implement Java-classes, but I will cover that in a next article.

In this final example you can see how you can access a service from the WCMuse-class

SightlyComponent.java

                  public class SightlyComponent extends WCMUse  {

  private String myTitle;

  @Override

  public void activate() {

    myTitle = "My Project " + getCurrentPage().getTitle();

    MyService service = getSlingScriptHelper().getService(MyService.class);

    service.action(myTitle);

  }

  public String getMyTitle() {

    return myTitle;

  }

}

We can explore more things about sightly in next article !!!

Cheers!!!

SonyCharan