How to include clientlibs in you component using Sightly AEM/Adobe CQ/AEM6

How to use client libs in Sightly

First you should declare data-sly-use.clientlibInclude in your .html file

<div data-sly-use.clientlibInclude="${'/libs/granite/sightly/templates/clientlib.html'}"></div>

how to  include only CSS of clientlib 

<output data-sly-call="${clientlibInclude.css @ categories='clientlib1,clientlib2'}" data-sly-unwrap/>

how to  include only JS of clientlib 

<output data-sly-call="${clientlibInclude.js @ categories='clientlib1,clientlib2'}" data-sly-unwrap />

how to  include both CSS and JS of clientlib 

<output data-sly-call="${clientlibInclude.all @ categories='clientlib1,clientlib2'}" data-sly-unwrap />


Component not showing in Touch UI / SideKick of Classical UI in AEM / Adobe CQ5 / AEM6

To see component in the Touch UI

If you want to see the component in touch UI components list. The component Should have cq:editConfig node

To See Component in the SideKick in Classic UI

  • The component should have dailog.
  • if component have dialog and not showing in sidekick. Check title of Component it should starts with capital letter.