How to add a query parameter to generated Clientlibs URLs. | Community
Skip to main content
Level 2
Apr 24, 2019 8:00 PM UTC
Solved

How to add a query parameter to generated Clientlibs URLs.

Hi guys,

I would like to know if there is a way to add a query parameter at the end of the generated URLs when loading the Clientlibs.

Consider the following scenario:

This is the code I have to load the Clientlibs.

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
   data-sly-call="${clientLib.js @ categories='myclientlib'}"
   data-sly-unwrap/>

The previous piece of code generates the following script tag.

<script type="text/javascript" src="/path/to/my/clientlib.js"></script>

We currently use Amazon CF to deliver these scripts so I would like to add a query parameter at the end of the URL as a cache busting technique so that the final URL would be like:

<script type="text/javascript" src="/path/to/my/clientlib.js?v=1.3.4"></script>

The value of the query parameter is the version of the project so the cache gets busted for every single release.

Is there a way to add a query parameter at the end of the generated URL?

I was reading the documentation of the clientlibs but couldn't find anything, any help is greatly appreciated.

Thanks.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
arunpatidar
arunpatidarAccepted solution
New Participant
Apr 25, 2019 8:03 AM UTC

Check below if helps:

aem63app-repo/JSModel.java at master · arunpatidar02/aem63app-repo · GitHub

<!-- JS -->
<sly data-sly-use.jsObj="com.aem.community.core.components.JSModel" data-sly-list="${jsObj.jsFiles}">
  <script type="text/javascript" src="${item}?v=1.3.4"></script>
</sly>

or  check below to tweak OOTB clientlibs template Clientlib javascript import with async or defer

Arun Patidar

5 replies

Level 2
Apr 25, 2019 8:30 PM UTC

I tried this option and it worked! I had to adjust your code a little bit but I could add the query param at the end of the URL.

Thank you all for your responses, I really appreciate it.

Translate
arunpatidar
arunpatidarAccepted solution
New Participant
Apr 25, 2019 8:03 AM UTC

Check below if helps:

aem63app-repo/JSModel.java at master · arunpatidar02/aem63app-repo · GitHub

<!-- JS -->
<sly data-sly-use.jsObj="com.aem.community.core.components.JSModel" data-sly-list="${jsObj.jsFiles}">
  <script type="text/javascript" src="${item}?v=1.3.4"></script>
</sly>

or  check below to tweak OOTB clientlibs template Clientlib javascript import with async or defer

Translate
Arun Patidar
Ravi_Pampana
New Participant
Apr 24, 2019 11:55 PM UTC

As mentioned by Gaurav, it is better to version clientlibs instead of adding parameter at the end. If you still want version try checking Links Rewriter where you can replace the path in the html attribute and try adding the version which you can put in configuration file.

I did not try your scenario but hoping using LinksRewriter might help your scenario

Adobe Experience Manager Help | Creating a Link Rewriter for Adobe Experience Manager

Translate
Gaurav-Behl
Level 10
Apr 24, 2019 8:37 PM UTC

Use versioned clientlibs for same, it won't add the querystring but should suffice your requirement

Versioned ClientLibs

Translate
smacdonald2008
Level 10
Apr 24, 2019 8:26 PM UTC

I do not believe AEM supports this. At least - i have never seen clientlibs used this way or read anywhere this was supported.

Translate