Adding Client Library to a custom field in page property | Community
Skip to main content
S
Shaheena_Sheikh
Level 6
August 23, 2023
Solved

Adding Client Library to a custom field in page property

  • August 23, 2023
  • 3 replies
  • 2535 views

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. 

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

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.$);

3 replies

sherinregi-1
Community Advisor
sherinregi-1Community Advisor
Community Advisor
August 23, 2023

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}

 

    S
    Shaheena_Sk
    Level 4
    August 23, 2023

    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.

      S
      Shaheena_Sk
      Level 4
      August 23, 2023

      @shaheena_sk 

      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.

        Mahedi_Sabuj
        Community Advisor
        Mahedi_SabujCommunity Advisor
        Community Advisor
        August 23, 2023

        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"/>

         

         

        Mahedi Sabuj
          S
          Shaheena_Sk
          Level 4
          August 23, 2023

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

            S
            Shaheena_SheikhAuthorAccepted solution
            Level 6
            August 23, 2023

            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.$);
              Terms & ConditionsAccessibility statement

              Loading footer...