Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Trigger onclick event to a coral button component in aem 6.5

Avatar

Avatar
Validate 1
Level 1
sushmapoojitha
Level 1

Likes

0 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Give Back
View profile

Avatar
Validate 1
Level 1
sushmapoojitha
Level 1

Likes

0 likes

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
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
Affirm 100
Level 10
asutosh_jena
Level 10

Likes

373 likes

Total Posts

480 posts

Correct Reply

133 solutions
Top badges earned
Affirm 100
Ignite 1
Establish
Give Back 50
Give Back 5
View profile

Avatar
Affirm 100
Level 10
asutosh_jena
Level 10

Likes

373 likes

Total Posts

480 posts

Correct Reply

133 solutions
Top badges earned
Affirm 100
Ignite 1
Establish
Give Back 50
Give Back 5
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)