Sightly - Part 2

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

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}
<div data-sly-use.customPage="CustomPage">Hello World</div>
${customPage.foo}
• 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 :

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

<div data-sly-use.library="library.html"
data-sly-call="${library.foo @ text='Hi'}"></div>
Output:
<div><span class="example">Hi</span></div>

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 :
<p>hello</p>
• 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 path
Applies JavaScript string escaping
For JavaScript block comments
To apply JavaScript regular expression escaping
To apply CSS string escaping
For CSS comments
To 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 Option
Numbered 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='; '}
<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&array=1&array=2&array=3
${'http://www.example.org/search?s=1' @ addQuery=jsuse.query}
outputs:
http://www.example.org/search?s=1&q=sightly&array=1&array=2&arra
y=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

Sightly - Part 2

Related slideshows

More Related Content

Sightly - Part 2