Dynamically add client libraries to editable template | Community
Skip to main content
S
ssharma48
Level 2
April 6, 2019
Solved

Dynamically add client libraries to editable template

  • April 6, 2019
  • 4 replies
  • 4068 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by joerghoh

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.

4 replies

joerghoh
Adobe Employee
joerghohAdobe Employee
Adobe Employee
April 6, 2019

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.

S
ssharma48Author
Level 2
April 7, 2019

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

joerghoh
Adobe Employee
joerghohAdobe EmployeeAccepted solution
Adobe Employee
April 7, 2019

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
    smacdonald2008
    Level 10
    April 7, 2019

    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

    Terms & ConditionsAccessibility statement

    Loading footer...