I want to repeat 4 input text boxes but only specific number of times given by a integer variable

I’ve 4 input boxes in a container where the user will give data e.g. name, number, address etc. and this data will be filled X no. of times which he’ll select from a dropdown. I’m working on an enterprise-level app, and I’ve intermediate-level knowledge of Appgyver, please help me out as I’ve checked all the articles of repeating components but couldn’t solve this scenario.

Decide how many is the maximum number of repeats and create them all. Then hide them based on the number of repeats required in each case.

Thanks @Phil_Evans for a reply!
But, can you please tell me how can I hide the repeated component since I’m not able to select and change properties of the component in the composer mode as it’s not yet repeated and showing only the main component?

Hi @Sanket_Pathak, you could repeat the forms from a list of objects type page variable, where you initialize the X number of objects based on the user’s input:

  1. Create “number” and “list of objects” type page variables

  2. Create a loop that generates empty items in the list based on the value of numberOfContacts

  1. Check if numberOfContacts is 0
  2. If not, set contacts to WITH_ITEM(pageVars.contacts, {name: ""}) (adds one empty item at the end of the list
  3. Set numberOfContacts to numberOfContacts - 1

Now you can repeat the fields from the contacts list, and bind the value of each field in the repeat to pageVars.contacts[repeated.current.index].name for example.

Hope this will help you get forward! :slight_smile:

2 Likes

If the approach suggested by @Phil_Evans will work for you (less dynamic because there is a max number of fields, but easier to implement) you can find an instruction in this thread. It doesn’t involve a repeat, just static containers being displayed or hidden:

1 Like

I hadn´t thought of this approach. If my simple way becomes limiting I will look into it. For me I only expect 2 or 3 of my item to be required, so I put in 5.

Thanks @Mari
It worked :raised_hands:

1 Like

@Mari There’s just one thing that the value of the input box(number type) is automatically reverting back to 0 as soon as the repeating component logic runs. Is there anything that can correct that! Below are the snippets of the variables and flows:









Thanks again for the previous help!

Yup, that will happen if you use the same variable in the dropdown and in the logic loop that reduces the number to 0. Maybe have variable branch_offices bound to the dropdown, and then set another variable render_branch_offices from that, which you use for the loop when branch_offices changes. If you want the user to be able to choose a different amount of fields without losing data already written in the existing fields, some logic changes will be needed for that too.

1 Like

Yeah, THANK YOU!
I set another variable render_branch_offices and fetched the value after Event onChange from the variable branch_offices, and then connected the loop logic after that! It’s working fine now only if one doesn’t change the value after typing in once, bcz then it’s just adding up the new value(b) to the old value(a) and repeating the component (a+b) number of times!

1 Like

Yes, to make it work perfectly you could add another loop for deleting fields:

  1. Start by setting render_branch_offices to branch_offices - COUNT(appVars.branch_details)
    → Lets you know if there are now more or less fields than before
  2. Use an IF statement flow with render_branch_offices < 0
  3. 2nd output (0 or more)
    → go to current loop (add render_branch_offices amount of new fields)
  4. 1st output (less than 0)
    → set render_branch_offices to render_branch_offices * -1 to get how many items have to be dropped
    → create another loop where fields are deleted with WITHOUT_ITEM(appVars.render_branch_offices, appVars.render_branch_offices[COUNT(appVars.render_branch_offices - 1)]).
    → reduce render_branch_offices by 1
    This will remove fields from the end of the list until render_branch_offices is again 0. :slight_smile:

Hi @Mari, thanks a lot for the previous solution, I’ll be implementing it soon, but there’s this error I’m having in the first half itself, as I’m not able to see any data saved in the variable. Could this be because I’ve created branch_details as an appVariable, not a pageVariable ?



And this is the log I’m having with no data if I call the branch_details variable after filling up the data for 2 branch_offices.
Kindly look into it.

Hi, sorry I just gave the advice off the top of my head so the syntax wasn’t 100% correct, as you can see the “index” part of the formula is in red. The right namespace for index is repeatedInfo :slight_smile:

1 Like