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.
Solved! Go to Solution.
Views
Replies
Total Likes
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.$);
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}
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.
@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.
Yes, that is right
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
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.
Are you seeing any console errors related to element not found also can you add some debug console to see the flow of execution.
There are no console errors
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.
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.
Not sure if its a typo buttonid to be invoked with # rite
$("#buttonID").click(function () { window.alert("event fires"); });
I have added granite:id to the button as buttonID. So using '.'
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"/>
Thanks for your response, i tried it, the issue still exists.
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.$);