How to Sightly in AEM / CQ

Use Case: Some common how to in Sightly

Prerequisite: Please read following document carefully before some other How to questions

• Sightly Specification: https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md
• Basics of Sightly: https://docs.adobe.com/docs/en/aem/6-1/develop/sightly.html
• Sightly tutorials: http://blogs.adobe.com/experiencedelivers/experience-management/sightly-intro-part-1/ (Check other parts on same page)
• Sightly Presentation: http://www.slideshare.net/GabrielWalt/component-development
• Code Base: https://github.com/apache/sling/tree/trunk/bundles/scripting/sightly

Here is some common How to in sightly

• How to include ClientLibs in Sightly 

• How to Loop fixed number of set in Sightly 

• How to create for or while loop in sightly

You can not have dynamic while loop directly in Sightly scripting. However you can use Use class to simulate while or for loop in Sightly. Here is example

• How to reference other OSGI service in sightly 

You can not directly reference OSGI service in sightly template. However you can reference them in use class using getSlingScriptHelper().getService(Service.class) note that you can not use @Reference to refer a service in sightly class.

• How to initialize a default value of a property in sightly

Best way to initialize a value is in activate method of use class. You can also do it in sightly template using something like <sly data-sly-test.parentNavName="${currentPage.properties.navTitle || currentPage.title || currentPage.pageTitle }"> and then use ${parentNavName}

• How to access string array in Sightly 

This is pretty much similar to what we did in for loop. Here is some more generic example

• How to create/access map in sightly 

Here is one example of how you can do that

• How to use Sling Model with Sightly

Here is one example of how you can do it. Note that You can also create sling model for a resource and then use other use classes to return sling model.

• How to hide element in Sightly

You can use either data-sly-unwrap or <sly> tag for this here is example

<!--/* This will only show "Foo" (without a <div> around) if the test is true: */-->
<div data-sly-test="${myTest}" data-sly-unwrap>Foo</div>

<!--/* This would show a <div> around "Foo" only if the test is false: */-->
<div data-sly-unwrap="${myTest}">Foo</div>

<!--/* This will display only the output of the 'header' resource, without the wrapping <sly> tag */-->
<sly data-sly-resource="./header"></sly>

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

• How to pass a sightly object as parameter in Sightly

More use cases to come. Please suggest me any use case you want to get clarity on.

Some more useful Link:

• Creating First Sightly Component: https://helpx.adobe.com/experience-manager/using/creating-sightly-component.html
• Create a AEM project with Sightly Example: https://github.com/Adobe-Marketing-Cloud/aem-project-archetype
• Good Example of Sightly Application using Sling: https://github.com/nateyolles/publick-sling-blog 
• Sightly To do App: https://github.com/Adobe-Marketing-Cloud/aem-sightly-sample-todomvc  
• All Available Context and implicit object in JS and JAVA: http://aemtuts.com/aem-sightly-quick-reference/
• All Available global Object: https://docs.adobe.com/docs/en/aem/6-0/develop/sightly/global-objects.html

Tooling For Sightly:

• Repl Tool: https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl 
• Bracket Extension: https://docs.adobe.com/docs/en/dev-tools/aem-brackets.html 
• Eclipse Extension: https://docs.adobe.com/docs/en/dev-tools/aem-eclipse.html