Accessing click target in event handler

App Building
,
1

Hi Retool team

Is it possible to access the click event's data in an event handler?

My case:

  • I've created a table with some clickable content (links in cells)
  • I would like to have an additional behaviour (navigation) when user clicks on an entire row (but not when user targets a clickable link)
  • I figured the best way would be to add a row-click event handler and in it check the event.target and then conditionally navigate.
2

It depends on where you are trying to navigate? A new tab? Somewhere else?

3

I recommend the navigation behavior to be triggered when double-clicked the row, so user cannot navigate accidentally when clicking the link.

Or you can set Cell selection property to "Single" and set an event handler on Click cell and set the "only run when" to:

{{ !tableId.selectedCell.value.includes("https://") }}
4

We do have a custom logic for navigation. At the end of the day I need to run a custom script conditionally.

5

I think this might be a good example.

the "Test721" is a link. When user clicks the link - they should be navigated to linked Test721, if they click on the cell (but not the link they should be navigated on the row level (to entity represented by the row))

Screenshot 2023-11-16 at 15.50.29
Screenshot 2023-11-16 at 15.50.291421×160 4.78 KB

6

Hello @Peter_K ,

Thank you for your question.

I do believe this behavior is possible by configuring event handlers on different levels of the table rows/cells.

Here is a brief video of a simplified version - maybe you already know all of this, but I thought I'd provide nonetheless.

From there, I think it really depends just how elaborate of a navigation and just how conditional it needs to be, but my sense is this should be possible as long as you can query and manipulate the data from a source and/or the JS.

  • Brett