Include only one JS SCRIPT in a page level

[vitor45]

Hello everyone!

I am having trouble to find a solution to include js scritpts in page level, here it is what we want:

I have a JS file in ui.frontend module: site -> ... -> utils -> myFile.js

I have a page create in a website/ project: My Page

I want to add the myFile.js to My Page, and ONLY

What we don't need:

1.This cannot be in a template level (I don't need - for performance reasons - to add to all the pages that uses that template)

2.This is script should NOT be a componente (I have seen another question here like this, the answers were to create a whole componente and treat the script as a component - It does not make sense at all, since a script is not a component)

2.1 The Content Manager should not see the script in the middle of the component list (since it is not and it would be confusing for the many components we have)

The workflow we want to have:
1. The Developer should create a script

2. The script should be able as a clientLib separated (how?)

3. The Content Manager should be able to add the component to a specific page only 

Here you are my project structure:  

ui.frontend

ui.apps

What would be the perfect solution (that I need help to implement
The files in UTILS directory should be a clientLib (each file a new clientLib)

       - Is it possible to build files in UTILS directory to clientLib like this?: clientLib-utils -> FILE.js

How can we call a specific JS file in a PAGE ONLY?

       - Create a new page in a project

       - Include only the scripts we want - Is it possible to create a new edit option in a page properties?

I hope I could explain it well, sorry for the long explanation as well, I tried many things

Thanks in advance!

[DPrakashRaj]

Simplest solution in your case would be to create a new path field in your aem template and select the js file from there that you want to load to some specific pages

[vitor45]

If I got it right, then it would be applied to the template level and that's not what we expect, as well as the maintenance of the code would be bad, it will be too manual to upload files in the assets, we must have it in the repository to build it with webpack (in ui.frontend module).

[DPrakashRaj]

Your .js file will still reside on ui.frontend, it won’t be on aem asset side. I am suggesting something similar to adding adobe analytics files on aem page properties. The new field will on aem page properties but will only apply to the page on which authored

[Sady_Rifat]

Hello @vitor45 ,

Not sure what your script will do, but still from my assumption of some use case you can add your script,

If the JS is related to any specific component (except the page component) then you can add this via,

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
     categories=['your clientlib-name'], defer=true}">
    ${clientlibs.jsIncludes @ context="unsafe"}
</sly>

Otherwise, if it is related to any path based on multiple templates,

You can also use the Context-Aware Configuration. Which will help your codebase more maintainable.

Again, if it is an ad-hoc solution with a simple script for only one page, you can use embed components and copy-paste your script on the author dialog. Still, it's not recommended. The same similar solution can be you suggest or @DPrakashRaj suggest.

[vitor45]

Thanks for the answer!

I'll take a look at the Context-Aware Configuration!

The files we need to include is not related to a specific component :). Also, I did something like you shared and kind got it working, it is not dynamically as we need, but it is a good start!

[Sudheer_Sundalam]

@vitor45 ,

Adobe Launch maybe the right solution for your use case. Using Adobe Launch you can create properties and add rules to specify on which pages your custom JS should load including the option of loading at the top/bottom of the page and in sync/async fashion.

Most AEM project use Adobe Launch to manage their 3rd party /Custom JS which should be loaded on specific page(s).

[vitor45]

I didn't know Adobe Launch, I'll take a look, thanks!

[Albin_Issac]

If you are looking for a solution within AEM, you may follow the below steps.

1. Create a separate client library; refer to this blog for more details https://medium.com/tech-learnings/multi-tenancy-theme-support-for-ui-frontend-module-adobe-experienc...
2. Create a page-level Property(drop-down) - you can extend the page component dialog, which will list the client library categories and direct the user to select a specific client library relevant to that page
3. Enable a Sling Model that will give the client library Categories selected by the author at the page level
4. Modify customheaderlib.html or customfooterlib.html(based on your use case) to add the clientlibrary selected by the author to the page(you can even enable some logic to add the client libraries to specific pages without our author selecting); here, you can even replace wknd.base with a dynamic list of client library categories

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

Another option is Loading Context-Aware CSS and JavaScript. I never tried this, but you can refer to the details from this document - Including Client Libraries | Adobe Experience Manager

Regards
Albin

Albin Issac – Medium

[vitor45]

Great!

We did some of these steps and almost got it 100% as we expect! As soon as we have it done I'll share with you guys!

Thank you!

[kautuk_sahni]

@vitor45 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[kautuk_sahni]

@vitor45 Were you able to achive it?

[vitor45]

Sorry for the late reply.

I couldn't, we are still working on a solution, a custom configuration on a page level. All the information shared here was helpful to understand how AEM works!

Thank you very much!