Skip to main content
Shaheena_Sheikh
Level 6
August 23, 2023
Solved

Adding Client Library to a custom field in page property

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.
Shaheena_SheikhAccepted 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.$);
View in thread

15 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}

 

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

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

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

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

         

         

        Translate
        Mahedi Sabuj
          Shaheena_Sk
          Level 4
          August 23, 2023

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

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

              Loading footer...