Hi,
I'm new to Retool. I'm trying to implement a master/detail feature for a mostly mobile web app.
I'm using a Container with 2 Views:
- A master view using a ListView (table is not a good option for mobile browsing scenarios).
- A detail view that displays the detailed data for the clicked/selected item on the master view.
The problem I'm facing is I don't know how to pass the clicked item info to the detail view. I know that table view has a property named "selectedRow" or something like that and with that you have access to that specific item selected but for the list view I didn't find a similar feature. does it exist? What's the recommended way to create a master/detail feature when using a container with multiple views?
Hey @Ricardo_Montoya!
You might try adding an event handler that stores the index of the listview row in a temp state. Any component in your listview should have access to {{ i }} which stores the row index:
You can then use that temp state to reference any underlying data:
Note that this is contingent on whether or not the clicked component has a "click" event handler.
Attached is an example you can import and play around with! Let me know if that works.
master_detail_listview.json
3 Likes
Thank you :).
My own solution at the moment was to add the selected Item to the localStorage so any component that opens up when clicking the selected item can get access to localStorage and get the info. Then when the modal closes I reset the localStorage var.
1 Like