Adobe Experience Manager Sites & More

sushmapoojitha · 5/1/21

Hi
I am trying to use a coral button component to get a text field. I am not able to understand how to trigger onClick event for this button.
I have used "granite/ui/components/foundation/button" as sling:resourceType to a nt:unstructured node and created the button.
Can anyone suggest how to get a text field by clicking on the button.

Asutosh_Jena_ · 5/1/21

Hi @sushmapoojitha

You can use Coral resource type i.e. granite/ui/components/coral/foundation/button and define a granite:class property with some defined class name for the button let's say class name is "button-class-hero". Then you can add a component specific extraClientLibs which will be loaded only during dialog authoring and the below piece of code should work.

(function ($, $document) {
    $(document).on("click", ".button-class-hero", function () {
        alert("Hi"); // Rest of the code will go here 
    });
})($, $(document));

Hope this helps!

Thanks

View solution in original post

Asutosh_Jena_ · 5/1/21

Hi @sushmapoojitha

You can use Coral resource type i.e. granite/ui/components/coral/foundation/button and define a granite:class property with some defined class name for the button let's say class name is "button-class-hero". Then you can add a component specific extraClientLibs which will be loaded only during dialog authoring and the below piece of code should work.

(function ($, $document) {
    $(document).on("click", ".button-class-hero", function () {
        alert("Hi"); // Rest of the code will go here 
    });
})($, $(document));