Hi all, I'm quite new to Retool and I was wondering how I can have my app allow me to dynamically add input text boxes onto the UI with a click of a button and, for a later problem, use each input value that users put in to be used to make a RESTful API request to my db. Of course, the requests need to account for the changing number of input text boxes.
What I tried so far is...
initialize an empty array variable dynamicArray which by the name says is changing by adding a new index on a button click
I used dyanmicArray as my data source for my List View component, as well as added a button that simply adds the values 1,2,3,... corresponding to the indices: 0,1,2,... of dynamicArray.
I successfully have a List View that adds text inputs dynamically, however the problem is that each text input seem to be connected. For example, if i change the name of on text input, all other text inputs change to be the same name.
Yes, the List View is supposed to work that way. You may want to create a form instead....though not sure what you want to do and what your use case is...
I'm guessing from your post that you want to change the label for each text input, where you currently have "Describe". If you have an array of names for these, called dynamicArrayLabels for example, you can use {{ dynamicArrayLabels[i] }} in the label field.
i holds the index for the listView item, and can be used to iterate arrays through the listView or access any component within the listView.
Sorry for any misunderstanding, what I meant to say was having the ability to create completely blank text boxes for users to click a button which allows youto define their own label and input which is later to be used as a json object property.
for users to write their own labels for each additional property I assume you would need variables to do so?
For some more context to what my idea is, i'm trying to add additional properties to a document in my database in JSON format. So in my case, each property will correspond to each input text. Does that explain it more?
You could use a text input & button outside the listView to add new labels to an array, then use that array as the data source for the listView, change label to be {{ item }}.
