Hi Retool Community,
I've built a custom HTML component and render it in EventList component, so what I want is to handle event click on image or even if I added a dropdown I'll be able to handle the click and of course get some data about the clicked element, ex: In my first case I want to get the URL of the clicked image, see below screenshot
Hi @CoderNadir, You can use triggerQuery within your custom component to execute the query.
Hi @ZeroCodez
Sorry I meant by custom component not the one I can add on Retool as my own component but I meant HTML code in the EventList component, like toggling the switch of (Render entries as HTML)
and adding the HTML code in the field of (items) something like below:
And how can I make (CUSTOM_FUNCTION_CALL) clickable?
Create a function in your code and call it on the button's click event. Inside this function, you can trigger the query.
please can you show an example, and PLEASE use the EventList component because it's the one I'm struggling with and I tried many ways but can't figure out a way. thank you in advance 
Any updates? and it is doable?
Hi @CoderNadir 
Could you send a Json Export with a simple example? I try some testing on my end!
Here is a simple example all what I want is to run any function in my app like a query or a script or any kind of functions, in this example (copyId) is just a simple function showing you that I want to pass an argument and copy that passed value inside the function.
So if you can show me how to trigger the click or listen to it and handle related data to the clicked component.
let me know if you want more info or anything...
Thanks in advance Abbey
// EventList component => items => Render entries as HTML toggled
// items input content:
{{
[
{
"id": "001",
"name": "Nadir",
"email": "nadir@example.com"
},
{
"id": "002",
"name": "Abbey",
"email": "abbey@example.com"
}
]?.map(obj => {
return `
<h4>${obj?.name}</h2>
<p>${obj?.email}</p>
<button onclick="${copyId(obj?.id)}">Copy ID</button>
`
})
}}
Final result in the UI:
Hi @CoderNadir,
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event List Example</title>
</head>
<body>
<div id="eventList"></div>
<script>
// Sample data array
const items = [
{
"id": "001",
"name": "Nadir",
"email": "nadir@example.com"
},
{
"id": "002",
"name": "Abbey",
"email": "abbey@example.com"
}
];
// Function to copy ID to clipboard
function copyId(text) {
// Create a temporary textarea element
const textArea = document.createElement('textarea');
textArea.value = text;
document.body.appendChild(textArea);
// Select the text
textArea.select();
textArea.setSelectionRange(0, 99999); // For mobile devices
// Copy the text to the clipboard
document.execCommand('copy');
// Clean up
document.body.removeChild(textArea);
console.log('Text copied to clipboard using fallback method');
alert(`Copied: ${text}`); // Optional feedback to the user
}
// Function to render event list
function renderEventList() {
const eventListContainer = document.getElementById('eventList');
const htmlContent = items.map(obj => {
return `
<h4>${obj?.name}</h4>
<p>${obj?.email}</p>
<button onclick="copyId('${obj?.id}')">Copy ID</button>
`;
}).join(''); // Join to convert array of strings to a single HTML string
eventListContainer.innerHTML = htmlContent; // Set the inner HTML of the container
}
// Call the function to render the event list
renderEventList();
</script>
</body>
</html>
Hi @ZeroCodez
I'm asking about the EventList component, not custom component or simple HTML page with some script!
EventList Component can be found in Retool built in components list by searching for: eventList
Did you read my description!?
The issue I'm facing is the click event on the EventList component can't be triggered!
Make sure to toggle the checkbox:
to To facilitate the process, just use the example I gave above where I tagged Abbey
Thank you 