Sightly Cheat Sheet

All Sightly expressions are delimited by ${ } at runtime the values found in the {} are evaluated and injected into the HTML stream. The values
can be literals, variables, operators and options:
Return Current Page
Escape Character String
String Formatting
Array Join
Accessing Object properties
Accessing properties with colons
Accessing properties with special
characters (i.e. Space)
Accessing variables
If used within a Scripting Tag, the Context
option is mandatory

<div>Page: ${currentPage.name}</div>
${'it\'s great'}
${Page {0} of {1} @ format=[current, total]}
${[one, to] @join=;{

${properties.text}
${properties.jcr:title}
${properties[my property]}
${properties[myVar]}
<script> trackID=${id @ context=scriptingString};</script>

All Sightly data attributes are based on HTML5 data Attribute syntax. All Sightly specific attributes are prefixed with data-slyTest attribute
data-sly-test
Test if a value is true or false
If this is true show the tag line, else remove the
Host element

Text attribute
data-sly-text
Replace the Text if a value is true or false
If this is true show the tag line, else do not

Use Initializes a helper Object (JS

(If using a JS file, use file name and locate
In Components folder)
Use JAVA Class (Can be in components
Folder, however, best practice put in
OSGI bundle)

<div data-sly-test="${wcmmode.edit}">Show this only in edit mode to t

author</div>

<div data-sly-text="${currentPage.title}">Mock page title

</div>

<div data-sly-use.nav=navigation.js>${nav.foo}</div>

<div data-sly-use.nav="org.example.Navigation">${nav.foo}
</div> <!-- as OSGI Bundle -->
<div data-sly-use.nav="Navigation">${nav.foo}</div>
<!-- as Source file in same folder. Use ClassName global to the Sight
file -->

(See below for more examples)

Resource attribute
data-sly-resource
Allows developers to include
Components and/or resources
Include a parsys object

<div data-sly-resource="${@path='par',
resourceType='foundation/components/parsys'}"></div>

Include attribute
Include other files (equivalent to the
cq:include tag)

<div data-sly-include=/libs/wcm/core/components/init/
init.jsp>

Attribute attribute
Adds attributes to the host element

<div title="Lorem Ipsum" data-slyattribute.title="${properties.jcr:title}"></div>

<! sets the title attribute to the jcr:title property -->

Attribute attribute
Use an array to make things easy
attrMap = {
title: "myTitle",
class: "myClass",
id: "myId"
}

<div data-sly-attribute="${attrMap}"></div>
<!will produce

<div title="myTitle" class="myClass" id="myId"></div>

-->

<h1 data-sly-element="${titleLevel}">text</h1>
Element attribute
Replaces the element of the host element <!will produce <titleLevel></titleLevel> -->
For security sakes, only works with certain ta

Unwrap attribute
Remove the outer elements (i.e. HTML
Tags) leaving just the output of the
Expression)

<p data-sly-use.nav="navigation.js" data-sly-unwrap>Hello

World</p>
<!produces Hello World with no <p> tags -
<div class="popup" data-sly-unwrap="${isPopup}">content</div>
Unwrap a conditional element

Operators Not, And, Or, Conditional, Comparison and Grouping of operators are supported
Not
And
Or
Conditional
Comparison

${!var}

${varOne && varTwo}

${properties.text || properties.default}

${varChoice ? varOne : varTwo}

${varOne < varTwo} <, >, >=, <= supported but only with integers
${varOne == varTwo} Only with Variables of the same type
${varOne != varTwo}

Grouping

${varOne && (varTwo || varThree)}

Sightly has the concept of Optional as denoted by the @ character

Everything after the @ is an Option
Multiple options separated by comma ,
Can have expressions containing only options

${myVar @ optOne}
${myVar @ optOne, optTwo=bar}
${@ optOne, optTwo=bar}

Sightly Commenting <!--/* A Sightly Comment */-->

Access to a set of Standard objects and there properties/methods. If required, van use the data-sly-list attribute
Variable Name

Description

properties

List of properties of the current Resource.

Backed by org.apache.sling.api.resource.ValueMap.

pageProperties

List of page properties of the current Page.

Backed by org.apache.sling.api.resource.ValueMap.

inheritedPageProperties

List of inherited page properties of the current Page.

Backed by org.apache.sling.api.resource.ValueMap.

Variable Name

Description

component

com.day.cq.wcm.api.components.Component

componentContext

com.day.cq.wcm.api.components.ComponentContext

currentDesign

com.day.cq.wcm.api.designer.Design

currentNode

javax.jcr.Node

currentPage

com.day.cq.wcm.api.Page

currentSession

javax.servlet.http.HttpSession

currentStyle

com.day.cq.wcm.api.designer.Style

designer

com.day.cq.wcm.api.designer.Designer

editContext

com.day.cq.wcm.api.components.EditContext

log

org.slf4j.Logger

out

java.io.PrintWriter

pageManager

com.day.cq.wcm.api.PageManager

reader

java.io.BufferedReader

request

org.apache.sling.api.SlingHttpServletRequest

resource

org.apache.sling.api.resource.Resource

resourceDesign

com.day.cq.wcm.api.designer.Design

resourcePage

com.day.cq.wcm.api.Page

response

org.apache.sling.api.SlingHttpServletResponse

sling

org.apache.sling.api.scripting.SlingScriptHelper

slyWcmHelper

com.adobe.cq.sightly.WCMScriptHelper

wcmmode

com.day.cq.wcm.api.WCMMode (in Sightly, evaluates to a string,

either "EDIT"or "DESIGN")

xssAPI

com.adobe.granite.xss.impl.XSSAPImpl