Duplicate itens

Plasmic Studio Questions
1

How can I do something like this video: https://youtu.be/FGB-wnM67ro?si=sxAzUvLnvx8E37zi which allows you to duplicate inputs with one button?

2

Hey Carlos,

You could:

  1. Create a State Variable of type Object (or Array would also work)
  2. Set the initial value of the Object to a nested array that represents the field structure, something like:
{
  "students": [
    {
      "name": null,
      "class": null,
      "age": null,
      "subjects": [
        {
          "subject": null,
          "mark": null
        }]
    }]
}
  1. Create the nested UI Components to match - one group/component for the student fields, another for the subject fields
  2. Set the repeat on the UI group/components based on the students array or subjects array from the State Variable created above.
  3. Set the on click interaction of the buttons to run code that pushes new items to the array like:
// add student button
$state.formObject.students.push({"name":null,"class":null,"age":null,"subjects":[{"subject":null,"mark":null}]})

// add subject button
currentItem.subjects.push({subject: null, mark: null})
  1. You could do similar to above to remove the items, etc. You would likely also want to update the original State Variable onChange of the field values so you could do something with the form data later.

I mocked up a quick project where you can see the basic function implemented and working.
https://studio.plasmic.app/projects/jX3KXjfCmn7pgTV5K4Zqdv

3 Likes
3

OMGGG Sensational!!!