Dynamically add client libraries to editable template

[ssharma48]

Hi,

Based on the components configured on the editable template by template authors, can we add / remove individual component client library in the template policy accordingly (using Event Listener).

Also is there any limit on the client lib count.

Regards,

Shikha

[Jörg_Hoh]

Do I understand you correctly, that you want to remove clientlib imports on a template level which come with components added by an author to the page?

There is no real hard limit for the number of clientlibs.

[ssharma48]

Yes add or remove. So instead of using below code snippet in customheaderlibs.html which will main.css that contains styling for all components.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">

    <sly data-sly-call="${clientlib.css @ categories='demo.main'}"/>

</sly>

Instead , I want to add component level clientlibs using template policies as below by this on specific page load instead of loading complete clientlibs I can only get client lib for the component which are specified on the particular template.

Regards,

Shikha

[Jörg_Hoh · Accepted solution]

The only way I can think of is to provide a clientlib per component and let every component include its own clientlib. Which would result in lots of clientlibs. An optimization would be to combine the JS/CSS code of many components into a single clientlib and reference it from all of these components. This would give you still some overhead, but reduce the amount of files loaded.

Although, with HTTP/2 the overhead of loading lots of individual files compared to a smaller number of larger files is non-existent.

[smacdonald2008]

Great answer Joerg.

For ppl reading this and new to AEM or editable templates - Adobe recommends that you go through this -- Getting Started with AEM Sites - WKND Tutorial