Skip to content

Instantly share code, notes, and snippets.

@r-malav
Forked from nagpal/sightly-cheat-sheet.md
Created September 8, 2022 16:55
Show Gist options
  • Save r-malav/7990094786b9ccf8552630bae9361737 to your computer and use it in GitHub Desktop.
Save r-malav/7990094786b9ccf8552630bae9361737 to your computer and use it in GitHub Desktop.
Sightly Cheat sheet

Sightly Cheat sheet

Text and examples shamelessly lifted from http://docs.adobe.com/docs/en/aem/6-1/develop/sightly/block-statements.html

Block statements

data-sly-use


Initializes a helper object (defined in JavaScript or Java) and exposes it through a variable.

  • Use another resource
<div data-sly-use.nav="navigation.js">${nav.foo}</div>
  • Use a java class that is in an OSGi bundle
<div data-sly-use.nav="org.example.Navigation">${nav.foo}</div>
  • Initialize another Sightly template that can then be called using data-sly-call
<div data-sly-use.nav="navTemplate.html" data-sly-call="${nav.foo}"></div>

data-sly-unwrap


Removes the host element from the generated markup while retaining its content.

  • Simple example
<p data-sly-use.nav="navigation.js" data-sly-unwrap>Hello World</p>

produces

Hello world
  • Conditionally unwrap an element
<div class="popup" data-sly-unwrap="${isPopup}">content</div>

data-sly-text


Replaces the content of its host element with the specified text

Example to populate the jcr:description in a paragraph

<p data-sly-text="${properties.jcr:description}">Lorem ipsum</p>

data-sly-attribute


Adds attributes to the host element

Example to populate the title attribute with jcr:title. The advantage is that if jcr:title is not present or is empty, "Lorem Ipsum" is shown as the fallback title.

<div title="Lorem Ipsum" data-sly-attribute.title="${properties.jcr:title}"></div>
Things to keep in mind
  • An attribute whose value evaluates to the empty string will be removed in the final markup.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment