How to use clientlib for content fragment? | Community
Skip to main content
J
Jitesh07
Level 2
April 2, 2025
Solved

How to use clientlib for content fragment?

  • April 2, 2025
  • 4 replies
  • 871 views

Hi All,

I have created a content fragment that includes two data types: a checkbox and a number field. I want to add custom behavior so that the number field is only visible when the checkbox is checked. I have created a client library under /apps/clientlibs with the category dam.cfm.authoring.contenteditor.v2. Here is my JavaScript code:



Coral.commons.ready(document.querySelector('input[name="itemOrderable"]'), function(checkbox) { var fieldToToggle = document.getElementById('coral-id-122').closest('.coral-Form-fieldwrapper'); function toggleField() { console.log("Checkbox checked:", checkbox.checked); if (checkbox.checked) { fieldToToggle.style.display = 'block'; } else { fieldToToggle.style.display = 'none'; } } toggleField(); checkbox.on("change", function() { toggleField(); location.reload(); }); });

 

This code works, but I need to refresh the page to see the result whenever I check or uncheck the checkbox.

Thank you!

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 MukeshYadav_

Hi @jitesh07 ,
You may try below code,(addEventListener)

Coral.commons.ready(document.querySelector('input[name="itemOrderable"]'), function(checkbox) { var fieldToToggle = document.querySelector('#coral-id-122')?.closest('.coral-Form-fieldwrapper'); if (!checkbox || !fieldToToggle) { return; } function toggleField() { console.log("Checkbox checked:", checkbox.checked); fieldToToggle.style.display = checkbox.checked ? 'block' : 'none'; } toggleField(); checkbox.addEventListener("change", toggleField); });


Thanks

4 replies

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
April 2, 2025

@amitvishwakarma, @tethich, @prathyusha_vp, @shubham_borole, @dipti_chauhan, @chaudharynick, @anupampat If you have a moment, please review this question and see if you can help. Thanks in advance!

Kautuk Sahni
MukeshYadav_
Community Advisor
MukeshYadav_Community AdvisorAccepted solution
Community Advisor
April 2, 2025

Hi @jitesh07 ,
You may try below code,(addEventListener)

Coral.commons.ready(document.querySelector('input[name="itemOrderable"]'), function(checkbox) { var fieldToToggle = document.querySelector('#coral-id-122')?.closest('.coral-Form-fieldwrapper'); if (!checkbox || !fieldToToggle) { return; } function toggleField() { console.log("Checkbox checked:", checkbox.checked); fieldToToggle.style.display = checkbox.checked ? 'block' : 'none'; } toggleField(); checkbox.addEventListener("change", toggleField); });


Thanks

    Tethich
    Community Advisor
    TethichCommunity Advisor
    Community Advisor
    April 3, 2025

    Hi @jitesh07 


    If you want to refresh the entire page, as you said, can you try this snippet ?

    const contentApi = $(".foundation-content").adaptTo("foundation-content"); if (contentApi) { contentApi.refresh(); }

     

    Doc: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/clientlibs/foundation/js/content/index.html

      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      April 16, 2025

      @jitesh07 Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you!

      Kautuk Sahni
      Terms & ConditionsAccessibility statement

      Loading footer...