How to create a granite checkbox via JavaScript clientLib in a component dialog? | Community
Skip to main content
C
caiosheperd
March 2, 2023
Solved

How to create a granite checkbox via JavaScript clientLib in a component dialog?

  • March 2, 2023
  • 2 replies
  • 906 views

Hello guys, I'm trying to create a checkbox on a dialog through its clientLib's javascript file.
i tried using 

 

(function (document, $) {
    "use strict";
    
    $(document).on("dialog-ready", () => {
        var checkbox = new Coral.Checkbox().set({
            label: {
            innerHTML: "CoralUI Rocks"
            },
            value: "kittens"
        });
        const $classTest = $(".classTest");
        $classTest.apend(checkbox)
    });
})(document, Granite.$, Granite.author);

 

but I couldn't make it work.

Can anyone help me please?

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 Prince_Shivhare

Hey @caiosheperd ,

Could you please help with the requirement? I wanted to understand why you want to create the checkbox using code when you already have OOTB?

and still, if you want to do it so there are a couple of steps -

1. You will have to define the granite:class to container or tab where you can identify the exact location with a custom class.

2. Once it is created, you can write the code to append the line of code using javascript. For Example, the below code I am using to create a button in multifield-

(function(document, $) {
   "use strict";

   $(document).on("foundation-contentloaded", function(e) {

      const MULTIFIELD_ACTION = '.cmp-editor-multifield_actions';
      const MULTI_ITEM = 'coral-multifield-item-content';
      const FORM_FIELD = '.coral-Form-field[name="./banners/item0/./products/item{itemone}/./imageNumber"]';

      let items = $(MULTIFIELD_ACTION).find(MULTI_ITEM);
      for (let i = items.length - 1; i < items.length; i++) {
         let itemone = i;
         $(FORM_FIELD.replace('{itemone}', itemone)).after("<button type='button' is='coral-button' variant='default' onclick='myFunction()' class='_coral-Button _coral-Button--primary' size=M'> <coral-button-label class='_coral-Button-label'>Preview Product</coral-button-label></button>");
      }
   });
})(document, Granite.$);

 

Let me know your requirement, I can help you with the approach.

Thanks

2 replies

Prince_Shivhare
Community Advisor
Prince_ShivhareCommunity AdvisorAccepted solution
Community Advisor
March 2, 2023

Hey @caiosheperd ,

Could you please help with the requirement? I wanted to understand why you want to create the checkbox using code when you already have OOTB?

and still, if you want to do it so there are a couple of steps -

1. You will have to define the granite:class to container or tab where you can identify the exact location with a custom class.

2. Once it is created, you can write the code to append the line of code using javascript. For Example, the below code I am using to create a button in multifield-

(function(document, $) {
   "use strict";

   $(document).on("foundation-contentloaded", function(e) {

      const MULTIFIELD_ACTION = '.cmp-editor-multifield_actions';
      const MULTI_ITEM = 'coral-multifield-item-content';
      const FORM_FIELD = '.coral-Form-field[name="./banners/item0/./products/item{itemone}/./imageNumber"]';

      let items = $(MULTIFIELD_ACTION).find(MULTI_ITEM);
      for (let i = items.length - 1; i < items.length; i++) {
         let itemone = i;
         $(FORM_FIELD.replace('{itemone}', itemone)).after("<button type='button' is='coral-button' variant='default' onclick='myFunction()' class='_coral-Button _coral-Button--primary' size=M'> <coral-button-label class='_coral-Button-label'>Preview Product</coral-button-label></button>");
      }
   });
})(document, Granite.$);

 

Let me know your requirement, I can help you with the approach.

Thanks

    Kamal_Kishor
    Community Advisor
    Kamal_KishorCommunity Advisor
    Community Advisor
    December 21, 2023

    Hi @caiosheperd : Not sure what is your exact requirement.
    But, if you want to show a checkbox conditionally, you can create a checkbox field and hide it initially and then show/hide based on your condition.

    You can refer links here to see how show/hide works: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-show-hide-feilds-using-checkbox/m-p/445689


    thanks.

    Terms & ConditionsAccessibility statement

    Loading footer...