Data Table Creation with form fields

Ask us anything
4

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

And voilà !