Retool firestore

💬 App Building
1

hey im making an app where i want to get names of objects out of firestore into a textinput en checkbox. currently i am using a listview for it but i want to be able to update the date and send it back to firestore. it is kind of like a grocery list that i can change per day with a datepicker.
Issue: i can put the data that i make in firestore in the listview and have it correctly show in the checkbox en textinput but i cant send it back to update it when i check something off or change the item that i want to have from the store.
Steps I've taken to troubleshoot: i have tried using forms and tables but i just cannot get the data out of the listview.
I would apreciate it very much if you have feedpack because i am running out of time with this project.

2

Hey there @Cedric_Moerenhout, welcome to the forum!

Just to double check, are you already trying with instances values as per the below thread??

If so, would you mind sharing how did you try to capture the values from the list view??

3

hey thanks for answering,

so i did not have enable instance values on (now i do),
and the problem is i dont know how to capture the items from the list view.

right now i am using a query that gets the list from firestore thats mapped in an array like this:
[
{
"text": "boekentas",
"checked": false
},
{
"text": "",
"checked": false
}
]
i then put the data in a textinput and checkbox (in the list view) with defaultvalues : {{ listView1.data[i]?.text || "" }} and {{ listView1.data[i]?.checked || false }} i have also made a query that is supposed to send the data back to firestore but i dont know how to get the changed data back to firestore. i asked chatGPT and it said that i have to use a button but the onclick scripts that it was giving me were not working at all.
i hope that you can help me with this, thank you in advance.

4

Hey Cedric,

Here are some considerations that you need to be aware of:

  • First of all, you need to keep in mind the differences between listView1.data and listView1.instanceValues. The former stores the data from your data source (in this case your firestore query) and it is read only. If an update happens to your backend, your query needs to re run in order for this property to change. The latter shows the actual values of the components for each instance, as such it will show any edits made by users.
  • When you trigger a query from a listView's component event handler (although not with a script - when using scripts you need pass additional scope) the query that is triggered can use [i] to identify the index instance from which the event triggered. As such you can refer to listView1.instanceValues[i].checked within a query and it will receive the index from the triggered event (bear in mind that the query may show a linting error as listView1.instanceValues[i] will be undefined, you can ignore this.

So, I'm not familiar with firestore, but below is an overview of one approach you could take:

  • Your example seems to have a checkbox in it, so something you could do would be:
    -- Add an "onChange" event handler to the checkbox which will trigger your update query.
    -- Within the query use the method above to catch the instance and data that triggered the event, e.g. . listView1.instanceValues[i].checked
    -- Upon success of the query, you should run your data source again so that your listView is refreshed.

If you want to avoid this refresh happen upon each change, then you should use a variable as your dataSource. Here's an article from a forum member on how to approach this Create Editable List Views in Retool: The Complete Guide

Let me know if you have any questions. If this is not covering your use case, it would be graet if you can share some screenshots of your set up and the scripts that you have tried.

Best,
Miguel

5

yes, thank you so much that works!
i can now send the data back to firestore.

1 Like