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

[caiosheperd]

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?

[Prince_Shivhare · Accepted solution]

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]

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

thanks.