Load custom clientlib in aem console in AEM cloud

[SahilDh1]

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.

[giuseppebag]

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]

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]

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.