Trigger onclick event to a coral button component in aem 6.5

Avatar

Avatar
Boost 1
Level 1
sushmapoojitha
Level 1

Likes

2 likes

Total Posts

23 posts

Correct reply

0 solutions
Top badges earned
Boost 1
Validate 1
Give Back
View profile

Avatar
Boost 1
Level 1
sushmapoojitha
Level 1

Likes

2 likes

Total Posts

23 posts

Correct reply

0 solutions
Top badges earned
Boost 1
Validate 1
Give Back
View profile
sushmapoojitha
Level 1

01-05-2021

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile
asutosh_jena
Level 10

01-05-2021

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));

asutosh_jena_0-1619936904857.png

 

Hope this helps!

Thanks

Answers (0)