Same modal form to be used across 3 tabs in a tabs container

App Building
, , , ,
1

Hi. I'm new to Retool so bear with me.

Here's what's already working fine:

  • I have a tabbed container.
  • Inside that tabbed container I have 3 tabs and a modal form (button is hidden).
  • The modal is a simple approval form with 3 fields and a submit button that is supposed to allow the user to approve a specific request.
  • The 3 tabs are basically very similar tables that show the results of different queries (they all return the same type of data, just different request IDs).
  • In each of those tables I have an "Icon" column ("decision").
  • Clicking one of the cells of those columns triggers the modal form.

Here's where I got stuck:

I need that single modal (that can be triggered from any of the tabs, specifically from a cell in the "decision" icon column) to know which tab and cell triggered it because I need the request ID to record the decision when the user submits the form.

I already got this to work by having 3 different modals, one for each tab, and then just using the CurrentRow to get the ID but I'd like to have only one modal for all tabs.

Any thoughts? My apologies if too basic...

2

Hello, Yes you can do that. You can use console.log(arguments); to debug which variable you can use in that scope, if you want to know more about js's arguments parameter, google it.You not only can use currentRow but also can use currentSourceRow, self which is point to the table the click event from, and you can use item too.

Here is a demo.

image
image1508×949 114 KB

image
image321×947 34.3 KB

image
image372×834 19.3 KB

So if you want to know the table which is the click event from. You just need to use self.id.

and if you want to refer to the value of clicked cell, just use item.
or if you want to refer to the clicked table's data, just use self.data.

or self.selectedRowKey.
or index of click row, use i, etc.

Hope this can help.

3

Very helpful. Thank you so much, Anson!