Adding Client Library to a custom field in page property

[Shaheena_Sheikh]

I have added a custom field in page properties. This field has a related clientlib which loads and works fine when I open the page property to edit. But on page creation, the Client lib doesn't load even though the field renders.

Please suggest what can fix the issue. 

[sherinregi]

hi @Shaheena_Sheikh 

Can you check the category of your related client libs , if its under cq.authoring.editor then it will only load the libs in editor mode.

Also at the inclusion place just make sure you have not wrapped 

<sly data-sly-test="${wcmmode.edit}

[Shaheena_ACC1]

Hi,

Thanks for your response and sorry if my question was misleading. I am talking about page properties field. When we create a page, the page properties show up, but the client lib doesn't load. Whereas, after the page creation is done, if i open the page properties, then the JS loads.

[sherinregi]

@Shaheena_ACC1  just to get more clarity you want the clientlib to load on page creation screen which is not happening but you are able to see same loading while opening properties tab after page creation.

[Shaheena_ACC1]

Yes, that is right

[sherinregi]

@Shaheena_ACC1 

In case if you haven't checked similar use case to add the clientlib on creation please refer to the solution in below community link . 

Adding property sling:resourceType : granite/ui/components/coral/foundation/includeclientlibs and the clientlib should ensure it loads 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/external-client-lib-script...

[Shaheena_ACC1]

I tried this, added a clientlib node under my tabs/items/myTab which has the custom field (button). The JS loads but the click event related to my button still doesn't fire.

[sherinregi]

@Shaheena_ACC1 

Are you seeing any console errors related to element not found also can you add some debug console to see the flow of execution.

[Shaheena_ACC1]

There are no console errors 

[sherinregi]

@Shaheena_ACC1 

In that case probably its not able to find the button on DOM. can you try from console to find the element on which you are binding the click event . Will have to see the js to comment more here.

[Shaheena_ACC1]

If I give the ID of my button in the console and hit enter, the html for the button shows up.

here's my JS:

$(document).ready(function () {
window.alert("document ready");
$(".buttonID").click(function () {
window.alert("event fires");
});
});

'document ready' this window alert shows when the page loads for properties tab during page creation. but 'event fires' never shows up on button click.

[sherinregi]

@Shaheena_ACC1 

Not sure if its a typo buttonid to be invoked with # rite 

$("#buttonID").click(function () {
window.alert("event fires");
});

[Shaheena_ACC1]

I have added granite:id to the button as buttonID. So using '.'

[Mahedi_Sabuj]

Hi @Shaheena_Sheikh,

You need to create your clientlibs under the category "granite.ui.coral.foundation". 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
  jcr:primaryType="cq:ClientLibraryFolder"
  categories="[granite.ui.coral.foundation]"
  allowProxy="{Boolean}true"/>

[Shaheena_ACC1]

Thanks for your response, i tried it, the issue still exists.

[Shaheena_Sheikh · Accepted solution]

Found the solution:

In the page component, create a node called clientlib under /items/tabs/items/tabName/items/clientlib.

Add categories : category of your client library

Add sling:resourceType : granite/ui/components/coral/foundation/includeclientlibs

In the JS add:

(function (document, $) {
    "use strict";

    $(document).on("click", ".buttonID", function (e) {
        buttonEvent($(this));
    });
    
    function buttonEvent(el) {
    	window.alert("event fires");
    }
    
})(document, Granite.$);