[how to] render data conditionally in a modal after clicking a table row

App Building
, ,
1

Hi Retool Community & Retool Team :wave:,

I'm new to building UI with Retool and would like some assistance :pray:

Context:
I have a Retool app that renders a table which displays attributes about a person (first name, last name, status, etc). Let's call this table1. Data are populated by an API response call. In the example data below, I have 3 Javascript objects which means table1 should display 3 rows.

I have table1 set up in a way that when I click on a row (that's not a header row), a modal pops up. This modal would display another table with data from this row for viewing purposes only. Let's call this table2.

My Question:
How do I make an extra row display in table2 using the parsed extra_tags attribute when I click on a row in table1? The 2nd row in table2 should render only when extra_tags is present. If extra_tags is not present in the Javascript object, only 1 row is render in table2.

Things I've tried:
I originally thought after parsing extra_tags, I could some how inject them in a row of my choosing but quickly found myself asking "where would I store this data?". I don't want to store it in local_storage for privacy concerns.

I tried adding a new row in table2 but ran into error: No Saving new rows event handler configured for table2. Still couldn't find a way to access the data I parsed to add it in this new row.

exampleData = [
  {
    first_name: "Alice",
    last_name: "Wonderland",
    current_country: "Not in Kansas",
    status: "single",
  },
  {
    first_name: "Captain",
    last_name: "Jack Sparrow",
    current_country: "Caribbean Sea",
    status: "single",
  },
  {
    first_name: "Jennifer",
    last_name: "Smith",
    current_country: "Croatia",
    status: "single",
    extra_tags: '{"first_name": "Jennifer", "last_name": "Miller",  "status": "married",  "current_country": "France"}'
  },
]
2

Hey jdsunmh - welcome to the forum!

First I would have table1 set up in a way extra column is hidden.

image
image1430×547 39.1 KB

Once you click on a row a modal pops up as you explained:
image
image1532×1051 72.7 KB

The table will be hidden if there is no extra_tags column.
Additionally I've used the following code to turn extra_tags column into an array so it can be used to populate table2.

{{ [ JSON.parse(table1.selectedRow.extra_tags) ] }}

Is this what you were looking to do?

1 Like
3

hey @stefancvrkotic thank you for welcoming me to the community and lending help with this issue of mine!

I ended up getting my problem resolved. While your suggested solution didn't work for me it did help me look around in my Retool app and Retool doc a bit more. Here's what I did:

  • KISS. I know I need to simply display the parsed extra_tags in my API response data. So, I started looking into where data is injected a Component and found the Data Resource section which you highlighted in your second screenshot.

  • I know I want to add a new row if my JavaScript object has the attribute extra_tags. So, I added an Event Handler on the Modal Button. And configured in way that it Querys a JavaScript file on trigger. I named it rowOpenHandler.

  • Inside rowOpenHandler, I parsed the extra_tags and found a way to add data to a row. i.e. table2.setData([])

And that did the trick!

Other things I've considered were using temporaryState but turns out I don't even need it.

A similar case found in Retool forum

Thanks for your help!

1 Like
4