Handling ClientLibs in Page Properties

[aemninja]

Hello Community - We are using static template in our project and we would like to load the clientlibs on need basis. i.e. In one page, I need to use 5 clientlibs and other page I will use only 1 clientlib. I wanted to configure the clientlib in the page properties so that it can easily configurable for individual pages created using the template. Not sure if someone has already done this approach and also need a suggestions on loading all the clientlibs available in the page properties to configure.

[Asutosh_Jena_ · Accepted solution]

Hi @aemninja 

I have seen this approach and you can configure the clientlibs at the page properties i.e. if you want any specific file to be loaded only for the specific pages you can do that at the page level using page properties. Just ensure the correct MIME type is selected while configuring the files on the page properties.

CSS:

<link rel="stylesheet" href="somefile.css" type="text/css"/>

JS:

<script type="text/javascript" src="somefile.js"></script>

[aemninja]

@Asutosh_Jena_ - Thanks for your inputs. Is there a way to get the list of all the clientlibs to populate the dropdown or we can maintain a generic list with the clientlibs along with the MIME type and load the list in the dropdown for user selection?

[Asutosh_Jena_]

Hi @aemninja 

You can keep a predefined list of clientlibs and load it based on the page. MIME type will be taken care by clientlib manager it self.

Just ensure to load the CSS in header section and JS in the footer section.

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories=populate from page properties}"/>

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories=populate from page properties}"/>

[BrianKasingli]

@aemninja,

You can create static templates for each page template. When a user creates a new page, depending on the static page template they have chosen, only then a unique combination of client libraries will be loaded. 

[arunpatidar]

You can include the clientlibs from page properties.

Just make sure you included using inheritance logic to avoid changes on every pages.

To get list of all the clientlibs or filtered list use https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/javadoc/co...