I’m aware that WeWeb is working on an element that will probably do what I need for this. However, I’m not sure on the timeline, and I’d like to put together a solution that could work for this until the data tabla element is available …
How can I create a table that has infinite # of elements that I can access data in a workflow upon form submission?
I need the user to be able to edit the form fields.
I want a table like the loom below:
I currently am using the Add Buyer button to add an empty object to an array, and then using the arrays collection on the page to display the rows.
I’ve tried many different things and run into problems:
If I update the array with an onChange event, I cannot just update the direct row object, so I have to create a new array with the object, which then changes the order.
I update the object, then remove it, then add it back in, but this does not work either
I have another version that looks something like below, but this is not really what I want as it is not that intuitive to the users:
Is there a way for me to create the top loom version and access the form fields in an array?
HI @kevinwasie what is the workflow you use on the onChange event?
You should normally be able to set the variable containing your array to a new variables containing previous data + the new empty object.
What is not working with the method?
Hi! thank you so very much for your help with this! I am super stumped on how to do this…
I’m trying to make it so that the array mimicks the data in the form fields.
I can add a new row to the array, but I don’t know how to make it so that the array object matches the form data.
I need to be able to:
delete rows from the table, and have them delete in the array
change data in the form fields, and have it update in the array
The workflow that I have, which doesnt work at all is:
OnChange for the “name” form field
Get the old object from the array, and update the name field in it.
Remove the old object from the array with id
Add the updated object from step 2 to the array
Checkout this loom which shows the behavior. The form fields are changing when the array collection changes, so I cannot keep the info in the same form field.
Hey @kevinwasie, this is what I have done. It’s using a bit of javascript, I will talk with the team to know if we can make it work with just nocode.
Final result:
Steps:
Create a variable buyers which will hold your value. Initialize value to [{"name":"","email":""}]
Bind your container to buyers, and in each row, add your form inputs
For each input, bind the initial value to the corresponding field. In my case the formula is getKeyValue(getByIndex(variables.buyers ,context.item['index']),"name")
On the Add button, create a workflow with an action Change Variable targeting buyers var, and this formula as value: add(variables.buyers, {name: "", email: ""})
You can add a Delete button on each row, and add a workflow on it with the action Change Variable targeting buyers var, and with this formula as value removeByIndex(buyers, context.item['index'])
/!\ Without all the others steps, this may not display correctly when delete. This is due to Vue reusing the DOM element when updating, and you will think that the incorrect row is deleted.
Then the tricky Workflow on each input, which required a bit of js. Two solutions, one not easy but working each time, the other one much easier.
Add a Workflow with an action Change variable value, targeting buyers for, and with this js code as value
const row = {...variables.buyers[context.item.index]} // we take the corresponding row and make a copy
row.name = event.value; // we change value of the name field on the copy
const rows = [...variables.buyers] // we make a copy of the buyers
rows.splice(context.item['index'], 1, row) // we replace the object at position index by our correct one
return rows
BUT because you are using object, you can also do this very quickly like this instead
Add a Custom js action instead of Change variable value, and set the script to variables.buyers[context.item.index].name = event.value
Yes, what I could not figure out was how to access the array objects directly. I thought that I had to use the add functions and remove it every-time I wanted to make an update.