I have a modal inside a listview, it opens correctly when the button is pressed, but I want to have a personalized close button inside the opened button (besides de X). I've inserted a button that runs a modal1.close() JS query when clicked, but I am getting this error message when clicking it: modal1.close is not a function.
How can I fix this?
Thanks a lot!
Hey there!
Could you try modal1[i].close()? Ideally, rather than having a duplicated modal for each row of a listview, its often better to have a listview button component open an external modal component. Do you think this could work for your use case here?
Thanks Chris! I'll try both approaches.
Sounds good, let me know if you hit any snags! :)
Chris, the modal1[i].close() worked fine!
Regarding the ideal approach you've mentioned, the listview button would call a modal1.open() query, correct? But how would I pass values from the listview instance to the modal outside the listview?
Exactly, in the query that you trigger from the button on top of opening the modal with modal.open() you will also have access to the variable "i" which represents the index within the listview that the query was triggered from. You could then use this index to render the corresponding data in the modal.
Hope this helps, let me know if you have any questions! :)
you will also have access to the variable "i" which represents the index within the listview that the query was triggered from
Hi Chris, how do I do that?
Hi! My name is Grace and I can add some additional context.
Inside of the ListView, any child components that you drop in will automatically be able to access "i" in the properties of that component in the right-hand sidebar. Here's an example:
Hi all.
So, I am able to access everything using i variable within the list, the problem is accessing it within a modal called from within the list.
In the screenshot below you can see that I can generate the modal button in the list view using i for its label and it shows correctly.
Inside the modal I can also correctly show a text field using the i variable:
What I am not being able to do is to filter a query using a transformer to show data based on this i variable in a table inside the modal:
In this table inside de modal I wanted to show data of rows in payoutsJoin where payoutBatchId column is equal to the id from the list item clicked to open the modal (in this screenshot example would be laisa0002)
Hi @igoraguiar,
Great to hear from you. I think an approach that might make sense here is to add an onClick handler for ListView child components - this onClick handler will set a local state variable equal to the current index selected (i). We'll use the built-in Retool feature, temporary state. You can access this in the top of the left sidebar, and click "Create a variable to store state."
state1 to access the clicked instance within the List View!Is model.open() still valid? I see it documented but I don't see it via intellisense.
