auto increment of input text box in UI designer
My requirement is
I have min: input box max: input box
repeat container containing an input textbox level,2 dropdowns with roles and groups when I click on add button level should be
increment with 1.
Trials made
I have added a process variable for the same and had used takes value of in operations. In UI designer I have created a JavaScript expression and set it in the form output. I am missing anything. Please suggest
In JavaScript expression I have used return i++;
Also, I have used repeat container using a collection of repeat as my requirement is to repeat the content as soon as the button is clicked it is working but whatever ddl values I select in the second row are replaced with the first row
Please suggest
Hi, tell me if I understood the use case entirely. You have two dropdowns, one for a group and one for a role, and a text input field. All of those are inside a repeatable container. You have an "Add" button that when you click you want to add a new input field. So, you will have 2 dropdowns, followed by 2 input fields. (Or is it two rows containing two dropdowns and an input field each ?). When you click on the button the second time, you will have the two dropdowns followed by three input fields. (Or again, three rows with two dropdowns and an input field each?).
Did I understand your use case?
Comments
When i click on add button level(input box) group(ddl) role(ddl) will be repeating in second row
Ok, I would have :
- A javascript variable called "inputs" with " return []; " as value
- An add button that has an action "Add to collection". The collection is the "inputs" variable and the value to add is "{level:"", group: "", role: ""}".
- An repeatable container with the collection "inputs".
- Inside the repeatable container, your three elements :
- The input box, with the value being "$item.level"
- The group dropdown with the value "$item.group"
- The role dropdown with the value "$item.role"
How this works:
When a new item is added to the inputs variable, since there is a new item in the repeatable container, there is a new row that will be added.
You can also show the value of the inputs changing dynamically by adding a text widget with the text "{{inputs|json}}"
Is this what you are looking for? Did I understand your use case correctly?