How could I inspect button-click event for informing trigger?

[andymac]

I think I can simplify my expected outcome down to:
As a Retool app builder, I would like to dynamically set which header and payload values to send my API/query request based on a specific button that my Retool app users clicked in the Retool app.

Why: depending on which button the user clicked (even if it's to invoke the same end-query resource), we want to send a specific payload/param request, and we want to log a certain value in one of our custom headers so we have additional usage context in the future for which buttons users are using to submit requests.

Use-case details
I have several buttons on an app page that effectively call the same query resource. However I would like to dynamically pass in (via a single transformer ideally) a specific endpoint param and header value based on which button was clicked. if this was a vanilla html/js app, I would basically inspect the handled event and use that to inform the payload/headers sent to the fetch/request. Does Retool support a similar kind of approach?

What I have tried

• For the longest time I was using this approach that was suggested in this thread a few months back:

However, this ended up creating unexpected behavior in the app (bugs) and confused both my users and myself when I tried to debug - because the outcome is driven if the table has data populated, and if it does and the user tries to use one of those buttons, my transformer overrides it in effect

Current workaround
I am using two different JS Query resources that each button is specifically mapped to. This is ok, but ideally it would be much easier if I could just 'inspect the event emission source' (eg name or id of the button ) in a transformer and then based on that value, determine the values passed into my query resource

[lamh_bytecode.io]

Hello,

There is special keyword, triggeredById, that you can use to identify which button was clicked.

Combined that with triggering query with additionalScope you can the same API request with different values depends on which button was clicked.

Note: triggeredById means it must triggered a query so transformer won't work in this case. However, as I mentioned above additionalScope will able to solve your use-case. You just have to go through a js query instead. Or you can even do in your API call {{ triggeredById === button1.id ? "value A" : "value B" }}

Hope that helps

[andymac]

thanks @lamh_bytecode.io ! Tbh, I had seen that key while inspecting one of the query(?) objects, as I recall the default value is null but maybe that's just a placeholder.

I wanted to acknowledge your post and test early this week and come back with a confirmation that this is indeed the solution I am looking for!

[andymac]

thanks again @lamh_bytecode.io , I marked your proposed answer as the solution after (finally ) testing it.

As an aside, I noticed that the action buttons in the table are attributed to the table itself, (table1 in my case) although I understand there is a new table component, so it's possible the newer table component's action buttons are broken out?

[lamh_bytecode.io]

Hi @andymac
the new action buttons for new table are floating on the right hand side of the table like this.