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
  • 2537 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 

      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 😥

        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...