Trigger events via HTML element

App Building
1

I added an HTML element to my Retool app via the component manager.
This is just the one labelled HTML, not Custom Component.

image
image538×726 11.7 KB

In the hint text for the HTML section states:

image

Supports most HTML tags and presentational attributes, but only supports scripting in a limited capacity via event handlers. To attach an event handler to a specific element in the HTML, add a data-<event type>-target attribute (e.g. data-click-target="primary") to the target element.

For full scripting functionality, use the Custom or IFrame components.

I would like to trigger the 'click' event for an image, which has the 'go to app' method utils.openApp('xyz')

image

How can I achieve this with my element? What should the data- property look like?

2

Hello, I test in my app successfully.

image
image963×681 47.7 KB

Here is my full code


<!DOCTYPE html>
<html lang="en-US">
<head>
<script>

</script>
</head>
<body >
<img src="https://ucarecdn.com/f029badf-c84d-4440-85ae-cf3301355836/" data-click-target="primary">
<div class="myClass" data-click-target="primary">
  Hello World
</div>
</body>
</html>

Here is handler config
image

You also can configure handler for the change event.

1 Like
3

This works, thanks.

Was not clear by the tooltip.

1 Like
4