Dynamically add client libraries to editable template

Avatar

Avatar

ssharma48

Avatar

ssharma48

ssharma48

06-04-2019

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Jörg_Hoh

Employee

Total Posts

3.0K

Likes

953

Correct Reply

1.0K

Avatar

Jörg_Hoh

Employee

Total Posts

3.0K

Likes

953

Correct Reply

1.0K
Jörg_Hoh
Employee

07-04-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.

Answers (3)

Answers (3)

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

07-04-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

Avatar

Avatar

ssharma48

Avatar

ssharma48

ssharma48

06-04-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.

1728169_pastedImage_0.png

Regards,

Shikha

Avatar

Avatar

Jörg_Hoh

Employee

Total Posts

3.0K

Likes

953

Correct Reply

1.0K

Avatar

Jörg_Hoh

Employee

Total Posts

3.0K

Likes

953

Correct Reply

1.0K
Jörg_Hoh
Employee

06-04-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.