Include only one JS SCRIPT in a page level | Community
Skip to main content
V
vitor45
October 4, 2023

Include only one JS SCRIPT in a page level

  • October 4, 2023
  • 6 replies
  • 3991 views

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!

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

6 replies

DPrakashRaj
Community Advisor
DPrakashRajCommunity Advisor
Community Advisor
October 4, 2023

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

    V
    vitor45Author
    October 4, 2023

    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
      Community Advisor
      DPrakashRajCommunity Advisor
      Community Advisor
      October 4, 2023

      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
        Community Advisor
        Sady_RifatCommunity Advisor
        Community Advisor
        October 5, 2023

        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.

          V
          vitor45Author
          October 5, 2023

          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
            Community Advisor
            Sudheer_SundalamCommunity Advisor
            Community Advisor
            October 5, 2023

            @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).

              V
              vitor45Author
              October 5, 2023

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

                A
                Community Advisor
                AlbinIs1Community Advisor
                Community Advisor
                October 5, 2023

                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-experience-manager-aem-256921313c9d
                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

                  V
                  vitor45Author
                  October 5, 2023

                  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
                    Community Manager
                    kautuk_sahniCommunity Manager
                    Community Manager
                    October 6, 2023

                    @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
                    kautuk_sahni
                    Community Manager
                    kautuk_sahniCommunity Manager
                    Community Manager
                    October 9, 2023

                    @vitor45 Were you able to achive it?

                    Kautuk Sahni
                    V
                    vitor45Author
                    November 3, 2023

                    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!

                    Terms & ConditionsAccessibility statement

                    Loading footer...