Load custom clientlib in aem console in AEM cloud | Community
Skip to main content
S
SahilDh1
Level 2
September 8, 2025
Solved

Load custom clientlib in aem console in AEM cloud

  • September 8, 2025
  • 3 replies
  • 733 views

I want to create a custom client library to override the functionality of
/libs/dam/gui/coral/components/admin/customsearch/savedsearch/toolbar/infopanel/infopanel.jsp
in the AEM Search console (http://localhost:4502/aem/search.html).

My goal is to ensure that this custom clientlib is loaded only when the Search console page (/aem/search.html) is accessed.

Can you please outline the exact steps required to load this custom clientlib on the Search console page?
I'm using AEM cloud SDK.

Best answer by giuseppebaglio

Option A

I see that the file /libs/.../infopanel.jsp is loading the following client library:

<ui:includeClientLib categories="cq.gui.coral.common.admin.toolbar.infopanel"/>

You should be able to create your own custom client library and assign it the category name "cq.gui.coral.common.admin.toolbar.infopanel." This will allow it to load alongside the existing AEM code. If this approach doesn't work, consider overriding the infopanel.jsp file, as described in Option B below.

 

Option B

Directly overriding a .jsp file in AEM as a Cloud Service is possible using the Sling Resource Merger framework. The key is to recreate the exact path of the target file under your /apps folder.

You'll need to set up the following folder structure within the ui.apps module of your AEM Maven project. Now, create the infopanel.jsp file at the specified path (/apps/dam/.../infopanel.jsp). This file will override the default one and also include your new client library.

< code of infopanel.jsp as taken from AEM > <%-- Here you can load your custom clientlib --%> <ui:includeClientLib categories="your.custom.category.toolbar.infopanel"/>

Now you can create a new folder for your client library. A good practice is to place it under a project-specific path.

/apps
└── /your-project-name
    └── /clientlibs
        └── /clientlib-search-override

 

More info on how to create and using a clientlib here and here.
 

3 replies

giuseppebaglio
giuseppebaglioAccepted solution
Level 10
September 8, 2025

Option A

I see that the file /libs/.../infopanel.jsp is loading the following client library:

<ui:includeClientLib categories="cq.gui.coral.common.admin.toolbar.infopanel"/>

You should be able to create your own custom client library and assign it the category name "cq.gui.coral.common.admin.toolbar.infopanel." This will allow it to load alongside the existing AEM code. If this approach doesn't work, consider overriding the infopanel.jsp file, as described in Option B below.

 

Option B

Directly overriding a .jsp file in AEM as a Cloud Service is possible using the Sling Resource Merger framework. The key is to recreate the exact path of the target file under your /apps folder.

You'll need to set up the following folder structure within the ui.apps module of your AEM Maven project. Now, create the infopanel.jsp file at the specified path (/apps/dam/.../infopanel.jsp). This file will override the default one and also include your new client library.

< code of infopanel.jsp as taken from AEM > <%-- Here you can load your custom clientlib --%> <ui:includeClientLib categories="your.custom.category.toolbar.infopanel"/>

Now you can create a new folder for your client library. A good practice is to place it under a project-specific path.

/apps
└── /your-project-name
    └── /clientlibs
        └── /clientlib-search-override

 

More info on how to create and using a clientlib here and here.
 
    TarunKumar
    Community Advisor
    TarunKumarCommunity Advisor
    Community Advisor
    September 8, 2025

    Hi @sahildh1 ,

    I can think of two ways, which you can give it a try:

     

    1. Review the components or pages that are loaded by `http://localhost:4502/aem/search.html` to see if any are available out-of-the-box (OOTB). If so, overlay the relevant component or page and add your custom clientlib category to it.

    2. Implement a backend filter that triggers when the search page loads, ensuring your custom clientlibs are invoked accordingly.


    Hope it helps!

     

    -Tarun




      Ekhlaque
      Adobe Employee
      EkhlaqueAdobe Employee
      Adobe Employee
      September 8, 2025

      Hi @sahildh1 You can create a custom clientlib 

      • Path:
        /apps/your-project/clientlibs/search-infopanel
      • .content.xml: 
        <jcr:root
  jcr:primaryType="cq:ClientLibraryFolder"
  categories="[dam.gui.coral.admin.search.infopanel.override]" />
      • Add your JS/CSS and include them in js.txt/css.txt.

      And overlay the infopanel jsp

      • Copy:
        /libs/dam/gui/coral/components/admin/customsearch/savedsearch/toolbar/infopanel/infopanel.jsp
        to
        /apps/dam/gui/coral/components/admin/customsearch/savedsearch/toolbar/infopanel/infopanel.jsp
      • Add this to the overlayed JSP, near the top: 
        <cq:includeClientLib categories="dam.gui.coral.admin.search.infopanel.override"/>

      Once you have made the changes, deploy & test

      • Deploy your code.
      • Open /aem/search.html ,your clientlib should load and your override will take effect.
        Terms & ConditionsAccessibility statement

        Loading footer...