Run a JS query when clicking aa `<a>` link in table HTML or HTML Component

[bradlymathews]

I have a table that uses HTML columns extensively. I have buttons to open modals to edit the underlying data. They do take up quite a bit of real estate however. What I would be really slick is to do is have <a> links that open the modals. This would also duplicate the functionality the users are used to with the old web site Retool is replacing.

Link 1 in red opens a a different app in into a new tab which replaces the View Project button. That works just fine now.

Link 2 would hopefully open a modal which edits the Job. Right now I have the Edit Job button.

Link 3 would open the individual task in a modal, but I have to use the Edit/Add tasks button right now. That column is showing multiple sub records.

So what I am asking for is a way to call a query from an <a> tag. Would also be useful for inline links in HTML components.

I realize that I could get the effect I am looking for if I re-did this table to use a ListView component and used the Link component. But I would need to nest the ListViews to get the sub records (which actually works) but there are significant performance issues with that method right now.

[Kabirdas]

Hey @bradlymathews!

At the moment, the team is still working on adding more robust handlers to link and button columns and it may be a bit until this level of granularity is reached but we can report back here when there's an update or if there are other changes that make this more feasible.

In the meantime, have you tried setting the hash parameters of your app using your links and then listening for changes in those parameters with, for instance, a Query JSON with SQL query? You can then use the event handlers on that query to trigger various actions:

[bradlymathews]

@Kabirdas, Dude that is absolutely genius!

That does exactly what I need, this feature request no longer needed so I guess I should move this into the Tips and Tricks.

[jason3w]

Hi there. Can you please show an example of how to create a HTML link which sets the hash parameters?
I just want to trigger a SQL query to run on click a HTML link in the HTML column.
Also looking to save space by not having another column just for a button.

[jason3w]

I've created the other elements as you outlined.

[bradlymathews]

Here is my link:

<a href="{{urlparams.href}}#editjob={{currentRow.job_id}}" style="color:black">{{currentRow.job_name}}</a>

My trigger query looks like this:

I just select {{urlparams.hash}} and then on the success trigger opens the edit modal, but only if {{ urlparams.hash.editjob}} exists.

Edit: The Only Run When needs to explicitly check for undefined or else the modal will display on page load: {{ urlparams.hash.editjob != undefined}}

[bradlymathews]

Another 2 problems I ran across with this technique and one solution:

When you use this as your URL - {{urlparams.href}}#editjob={{currentRow.job_id}} - you run into a situation where you keep appending hash params every time you click a link:

https://url.retool.com/editor/5ed-83d4456e3d38/Admin_Jobs_TableView#editjob=153#editjob=175#editjob=101#editjob=27

Since there is currently no way to clear a hash (@Kabirdas - am I missing something?) you need to do it manually when making your url:

<a href="{{urlparams.href.substring(0, urlparams.href.indexOf("#"))}}#editjob={{currentRow.job_id}}">

This clears everything after the hash so yo have a nice clean URL to go to.

The problem I don't have an answer for yet: If the user refreshes the page, the url hash will still be there and whatever action you had defined for that condition will happen again. In my case a modal pops up ready to edit the selected record. So this isn't a completely solved problem yet.

[Kabirdas]

Hey @bradlymathews!

For the first problem you can try using just the hash e.g.

<a href="#editjob={{currentRow.job_id}}">

Another way to clear your hash params is to use the openApp util and reference your current app:

You may be able to use that to clear the hash params when a user closes the edit modal as well:

Does that work?

[bradlymathews]

That is exactly what I am looking for and solved both my problems.

[Pavel_Lishin]

@bradlymathews

this feature request no longer needed

Hard disagree, this is a very weird and roundabout workaround. I would like to be able to have a button in a table execute a Javascript query, or execute some JS code - similarly to how we can execute arbitrary code for certain events within a table

[bradlymathews]

Welcome to the Forum @Pavel_Lishin,

Check out the new table's Actions: Display and edit data with the Table component | Retool Docs

That adds a row button that can be any handler, including ad hoc JS:

You can also add a clickable cell to sort of simulate a button:

My original post was about running a query or JS from links within an HTML column, which is a pretty advanced and specialized use case I do not expect Retool to prioritize any time soon.