Load custom clientlibrary on top of the page which should be configurable | Community
Skip to main content
A
AbhishekDa1
New Member
April 21, 2025
Solved

Load custom clientlibrary on top of the page which should be configurable

  • April 21, 2025
  • 2 replies
  • 530 views

We have few custom clientlibraries which are being loaded at page level through page component. For eg. 

 

<sly data-sly-call="${customClientlib.css @ categories='initial.chunk-category', mode='css', loading ='preload'}"/> 

<sly data-sly-call="${clientlib.css @ categories='initial.chunk-category'}"/>

 

Apart from these, there are other clientlibraries which are added at template level through page policy. These are loaded after "initial.chunk-category" gets loaded on the page.

 

We have a requirement, where a category can be loaded before "initial.chunk-category" if needed, and that should configurable, either through page policy, page properties or any other way?

 

Is there a way through which this can be achieved?

Best answer by SantoshSai

Hi @abhishekda1,

In my opinion, if the requirement is to conditionally load a clientlib before initial.chunk-category, and you want that to be configurable, we might want to look at a slightly more flexible solution than just overriding head.html.

I believe the approach of overriding /head.html (from Core Page v3) definitely works and gives full control - especially if we use something like a custom include (as you suggested) toward the end. But if we want to make it configurable, maybe via page properties or policies, here's what I would suggest exploring:

1. Use a custom page property (e.g., customHeaderClientlib) to specify any high-priority clientlib categories.

Then in your overridden head.html (or a new include like custom-headerlibs.html), you could do something like:

This would allow authors to define which category should load before initial.chunk-category - giving the needed flexibility without hardcoding anything.

<sly data-sly-test.customClientlib="${currentPage.properties.customHeaderClientlib}"> <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/> <sly data-sly-call="${clientlib.css @ categories=customClientlib}"/> </sly>

2. Alternatively, if you prefer policy-based config, you could expose a field in the template policy and fetch that via the currentStyle object.

<sly data-sly-test.customClientlib="${currentStyle.customHeaderClientlib}"> <sly data-sly-call="${clientlib.css @ categories=customClientlib}"/> </sly>

Hope that helps!

Regards,
Santosh

2 replies

konstantyn_diachenko
Community Advisor
konstantyn_diachenkoCommunity Advisor
Community Advisor
April 21, 2025

Hi @abhishekda1 ,

 

If your page component inherits Core Page V3, then clientlibs inclusion will be happened in /libs/core/wcm/components/page/v3/page/head.html. 

 

There are 2 ways:

1) You can override head.html in your page component by copying the content of the head.html from page v3 and adding clientlibs custom clientlibs inclusion there. At the end of template you can include your custom file: <sly data-sly-include="customheaderlibs-after-default.html"></sly> 

2) You can override headlibs.html and add inclusion of your custom clientlibs at the end of the template. This file is responsible for adding clientlis configured in the policies.

 

Best regards,

Kostiantyn Diachenko. 

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
SantoshSai
Community Advisor
SantoshSaiCommunity AdvisorAccepted solution
Community Advisor
April 21, 2025

Hi @abhishekda1,

In my opinion, if the requirement is to conditionally load a clientlib before initial.chunk-category, and you want that to be configurable, we might want to look at a slightly more flexible solution than just overriding head.html.

I believe the approach of overriding /head.html (from Core Page v3) definitely works and gives full control - especially if we use something like a custom include (as you suggested) toward the end. But if we want to make it configurable, maybe via page properties or policies, here's what I would suggest exploring:

1. Use a custom page property (e.g., customHeaderClientlib) to specify any high-priority clientlib categories.

Then in your overridden head.html (or a new include like custom-headerlibs.html), you could do something like:

This would allow authors to define which category should load before initial.chunk-category - giving the needed flexibility without hardcoding anything.

<sly data-sly-test.customClientlib="${currentPage.properties.customHeaderClientlib}"> <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/> <sly data-sly-call="${clientlib.css @ categories=customClientlib}"/> </sly>

2. Alternatively, if you prefer policy-based config, you could expose a field in the template policy and fetch that via the currentStyle object.

<sly data-sly-test.customClientlib="${currentStyle.customHeaderClientlib}"> <sly data-sly-call="${clientlib.css @ categories=customClientlib}"/> </sly>

Hope that helps!

Regards,
Santosh

Santosh Sai
    A
    AbhishekDa1Author
    New Member
    April 23, 2025

    Thanks for the solution, this is exactly what I wanted.

    Terms & ConditionsAccessibility statement

    Loading footer...