Agenda•Block Statements

• Use, Element & Attribute• Resource, Resource selectors, resource type• Templates

•Expression Options • Display Context (@context)• String formatting (@format)• Array join (@join)• Internationalization (@ i18n, locale , hint)• Uri Manipulation scheme, domain, path, selectors, suffix,

query, fragment

•<sly> & data-sly-unwrap•Demo

Block Statements

Use

• data-sly-use : Initializes the specified logic and makes it available to the current template:

<div data-sly-use.page="customPage.js">${page.foo}</div>

• The identifier set by the data-sly-use attribute isn't scoped only inside of the element, but can be used anywhere after its declaration :

${customPage.foo} <!--/* this fails */--><div data-sly-use.customPage="CustomPage">Hello World</div>${customPage.foo} <!--/* but this works */-->

• Parameters can be passed to the Use-API by using expression options:<div data-sly-use.nav="${'Navigation' @ depth=1,showVisible=!wcmmode.edit}">

${nav.foo}</div>

• Demo - Hero Component

Attribute

• data-sly-attribute : Sets an attribute or a group of attributes on the current element :

<tag class="className" data-sly-attribute.class="${myVar}"></tag> This overwrites the content of the class attribute

Assuming that foobar = {'id' : 'foo', 'class' : 'bar'} ,<input data-sly-attribute="${foobar}" type="text"/>outputs : <input id="foo" class="bar" type="text"/>

• Attributes are processed left-to-right :<div class="bar1" data-sly-attribute.class="bar2" data-sly-attribute="${foobar}"></div>outputs: <div id="foo" class="bar"></div>

Element• data-sly-element : Changes the element, mostly useful for setting element tags

like h1..h6, th, td, ol, ul :<div data-sly-element"${'h1'}">Sightly Element Example</div>outputs: <h1>Sightly Element Example</h1>

Include• data-sly-include : Includes the output of a rendering script run with the current

context, passing back control to the current Sightly script.<div data-sly-include="template.html"></div>

<div data-sly-include="template.jsp"></div>

• The element on which a data-sly-include has been set is ignored and not displayed

Resource

• data-sly-resource: Includes a rendered resource from the same server, using an absolute or relative path.

<section data-sly-resource="./path"></section>

With an expression more options can be specified:<section data-sly-resource="${'my/path' @ appendPath='appended/path'}"></section><section data-sly-resource="${'my/path' @ prependPath='prepended/path'}"></section>

Manipulating selectors:<section data-sly-resource="${'my/path' @ selectors='selector1.selector2'}"></section><section data-sly-resource="${'my/path' @ addSelectors=['selector1', 'selector2']}"></section><section data-sly-resource="${'my/path' @ removeSelectors=['selector1','selector2']}"></section><section data-sly-resource="${'my/path' @ removeSelectors}"></section>

Forcing the type of the rendered resource: <section data-sly-resource="${'./path' @ resourceType='my/resource/type'}"></section>

Template & Call Statements

Template blocks can be used like function calls: • In their declaration they can get parameters, which can then be passed when

calling them.• They also allow recursion.

• Template Declaration : <template data-sly-template.example="${@ class, text}">

<span class="${class}">${text}</span></template>

• Call Statement : <div data-sly-call="${example @ class=‘css-class', text='Hi'}"></div>

• Output:<div><span class=" css-class">Hi</span></div>

External Template Statements

The use statement is used to load data-sly-template markup snippets located in other files :

<!-- library.html --><template data-sly-template.foo="${@ text}"> <span class="example">${text}</span>

</template>

<!-- template.html --><div data-sly-use.library="library.html"

data-sly-call="${library.foo @ text='Hi'}"></div>

Output:<div><span class="example">Hi</span></div>

Expression Options

Display Context Option

The context option offers control over escaping and XSS protection.

• Allowing some HTML markup (filtering out scripts)<div>${‘<p>Hello</p>’ @ context='html'}</div>

Without context : &lt;p&gt;hello&lt;/p&gt;

• Adding URI validation protection <p data-link="${link @ context='uri'}">text</p>

• Applying CSS string escaping <style> a { font-family: "${myFont @ context='styleString'}"; } </style>

Display Context Option

Context Use• html• text • elementName• uri • scriptString • scriptComment • scriptRegExp • styleString • styleComment • comment • number • unsafe

Outputs HTML - Removes markup that may contain XSS risks For simple HTML content - Encodes all HTML Allows only element names that are white-listed, outputs 'div' otherwise To get valid Href link or pathApplies JavaScript string escaping For JavaScript block commentsTo apply JavaScript regular expression escaping To apply CSS string escaping For CSS commentsTo apply HTML comment escaping Outputs zero if the value is not a number Disables XSS protection completely, use this at your own risk.

String Format OptionNumbered parameters can be used for injecting variables:

${'Assets {0}' @ format=properties.assetName}OR

${'Assets {0}' @ format=[properties.assetName]}

${'Page {0} of {1}' @ format=[current, total]}

Array Join Option

The join option allows to control the output of an array object by specifying the separator string. This can for e.g. be useful for setting class-names

${['one', 'two'] @ join='; '} <!--/* outputs: one; two */-->

<span class="${myListOfClassNames @ join=' '}"></span>

Internationalization (@i18n)

To translate a string to the resource language:

${'Assets' @ i18n}

Two more options can be used with i18n:• locale : Overrides the language from the source. For e.g.: en-US or fr-CH• hint : Allows to provide some information about the context for the translators.

${'Assets' @ i18n, locale='en-US', hint='Translation Hint'}

URI Manipulation

• Scheme - Allows adding or removing the scheme part for a URI : ${'example.com/path/page.html' @ scheme='http'}outputs: http://example.com/path/page.html

${'http://example.com/path/page.html' @ scheme='https'}outputs: https://example.com/path/page.html

• Domain - Allows adding or replacing the host and port (domain) part for a URI : ${'///path/page.html' @ domain='example.org'}outputs: //example.org/path/page.html

${'http://www.example.com/path/page.html' @ domain='www.example.org'}outputs: http://www.example.org/path/page.html

URI Manipulation

Path / prependPath / appendPath – Modify the path that identifies a resource :

${'http://example.com/this/one.selector.html/suffix?key=value’@ path='that/two'}outputs: http://example.com/that/two.selector.html/suffix?key=value#

${'http://example.com/this/one.selector.html/suffix?key=value' @ path=‘’}outputs: http://example.com/this/one.selector.html/suffix?key=value

${'path' @ prependPath='..'}outputs: ../path

${'http://example.com/path/page.html' @ prependPath='foo'}outputs: http://example.com/foo/path/page.html

${'one' @ appendPath='two'}outputs: one/two

URI Manipulation

Selectors / addSelectors / removeSelectors - Modifies or removes the selectors from a URI:

${'path/page.woo.foo.html' @ selectors='foo.bar'}outputs: path/page.foo.bar.html

${'path/page.woo.foo.html' @ selectors=['foo', 'bar']}outputs: path/page.foo.bar.html

${'path/page.woo.foo.html' @ addSelectors='foo.bar'}outputs: path/page.woo.foo.bar.html

${'path/page.woo.foo.html' @ removeSelectors=['foo', 'bar']}outputs: path/page.woo.html

URI Manipulation query / addQuery / removeQuery- adds, replaces or removes the query segment of a URI, depending on the contents of its map value :

assuming that jsuse.query evaluates to: { "query": { "q" : "sightly", "array" : [1, 2, 3] } }

${'http://www.example.org/search' @ query=jsuse.query}outputs: http://www.example.org/search?q=sightly&amp;array=1&amp;array=2&amp;array=3

${'http://www.example.org/search?s=1' @ addQuery=jsuse.query}outputs: http://www.example.org/search?s=1&amp;q=sightly&amp;array=1&amp;array=2&amp;array=3

${'http://www.example.org/search?s=1&q=sightly' @ removeQuery=['s', 'q']}outputs: http://www.example.org/search

URI Manipulation

• Extension - adds, modifies or removes the extension from a URI: ${'path/page.json?key=value' @ extension='html'}outputs: path/page.html?key=value

${'path/page.json#fragment' @ extension='html'}outputs: path/page.html#fragment

• fragment - adds, modifies or replaces the fragment segment of a URI :${'path/page' @ fragment='fragment'}

outputs: path/page#fragment

${'path/page#one' @ fragment='two'}outputs: path/page#two

${'path/page#one' @ fragment}outputs: path/page

<sly> & data-sly-unwrap

• The <sly> HTML tag can be used to remove the current element, allowing only its children to be displayed:

<sly data-sly-test="${event.hasDate}" > <span>Hello</span>

</sly>• Its functionality is similar to the data-sly-unwrap block element :

<div data-sly-test="${event.hasDate}" data-sly-unwrap> <span>Hello</span>

</div>

Both Output : <span>Hello</span>

• Although not a valid HTML 5 tag, the <sly> tag can be displayed in the final output using data-sly-unwrap:

<sly data-sly-unwrap="${false}"></sly>outputs: <sly></sly>

References

• Sightly HTML Templating Language Specification :https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md#31-sly

• Gabriel Walt’s Slideshare PPT:http://www.slideshare.net/GabrielWalt/component-development

• http://www.netcentric.biz/blog/2015/08/aem-sightly-style-guide.html

• http://www.citytechinc.com/content/dam/circuit/Component%20Development.pdf

• http://stackoverflow.com/questions/27583326/expression-option-sightly