How to Dynamically Add Input Fields in WeWeb?

Ask us anything
1

Hello WeWeb Community!

I’m working on a feature where users can add questions after generating proposals. However, the number of questions varies by job posting. I’d like to provide an option for users to dynamically add input fields based on the number of questions they have.

Is there a way in WeWeb to create a button or mechanism that, when clicked, adds a new input field for users to enter their questions? Ideally, users should be able to add as many input fields as they need.

Has anyone implemented something similar or can guide me on the best approach to achieve this in WeWeb?

Thank you in advance for your assistance!

1 Like
2

Hello!

Yes thats very simple.

  1. Create a variable ‘questions’ of type array
  2. Add a collection list and bind it to that variable
  3. Add inputs inside the collection list
  4. Add a button, onclick it should add an empty string "" to the end of the array.

Then when the user types inside the input, you can trigger onchange event and update the corresponding text inside the questions array.

If you want custom question types/ordering you will need to use an array of objects instead of an array of texts.
`

2 Likes
3

This is almost the right solution. Instead of appending empty “” string at the end of the array, in my opinion more elegant would be if you added an object. This way you can later go and bind values at questions[index].answer. By using a string, you’d be complicating your life in the next steps :slight_smile:

So what you would do, is actually have a following logic:

  1. Display your proposals by binding them to a variable and binding that variable to your repated list
  2. Add a button for each of them
  3. Create an array item.questions, ideally on each first click of button (could be a condition to check if !item.questions (the array questions doesnt exist) then create one
  4. On click of each button to add a question append to item.questions an object
  5. For each inputed question/answer, you should ad an on change workflow, that will set the item.questions[item.index].answer (or question) and store it as an value of the object.
2 Likes