Button conditionals for forms in nested repeating groups

Need help
1

Hi everyone,

I’m facing an issue that I’ve tried to resolve by searching the forum. Although I’ve found some similar topics, I haven’t come across a solution for my specific case.

Context:
I have an app for creating and managing documents. Users can include dynamic tags in document texts to generate a form based on these tags for their clients.

The dynamic tags generate fields that belong to a section (stored in a “Section” table).
For example, fields like name, email, and phone belong to the Personal Data section, while fields like street, neighborhood, and city belong to the Address section. These are standard fields that are already available in the app.

Users can also create custom sections and fields. For instance:

  • Custom Section: Vehicle Data
  • Custom Fields: sale price, color, license plate, etc.

At the moment, users can create up to two custom sections, each with up to five fields. The fields can be of the following types: Text, Number, Single Select and Multi Select.

So far, everything works well, and the forms are being generated correctly. The problems starts at the form page.

The form as a whole is displayed in a repeating group (RG) at the section level, with pagination by section. For example:

  • Page 1, Personal Data Section: fields like name, ID, email, birthdate, etc.
  • Page 2, Address Section: fields like street, neighborhood, city, etc.

For custom sections, since I don’t know how many fields the user might create (I only know the maximum is 5), I use a nested RG to display the fields.

Frame 209
Frame 2091436×614 23.8 KB

print2
print21542×831 83.1 KB

The “Next” navigation/save data buttons are located at the section level, outside the nested RG for the custom fields.

The Problem:

My biggest difficulty is validating the inputs on the custom section pages and keeping the button disabled until all custom fields are filled, as it is in a separate RG.

What I’ve Tried:

Using a Number-type Custom State: I created a number-type custom state that increments by +1 each time a custom field input is changed. For the button condition, I set it to check if the value of the custom state matches the number of fields in the nested RG. This approach works if the fields are filled only once, but since users can rewrite or modify inputs multiple times, the custom state becomes inconsistent.

I’m also using the Orchestra plugin to create the things in the data base, but I’m not sure if it can be used to handle this conditional.

Thanks in advance for any help! (and sorry for the long story)

2

I used to use Orchestra for forms built with my app’s form builder but just like you, validation and UX became an issue. My forms also include conditionals so it got complex.

You are not going to be able to achieve what I believe you are trying to achieve without some JS. I tried to simplify an explanation, but realised I will need to refer to my app since it’s been a while since I last peaked under the hood of my form builder.

3

Thank you for your answer @ihsanzainal84 !
Did you use the Toolbox for JavaScript, or some other plugin?

4

Have you tried making a number list custom state (at the same level as the Next button), when the input is filled in add the cell’s index to the list. If the input is empty remove it from the list.

Then the Next button just needs to check if the custom state list:count is the repeating group list:count

2 Likes
5

Wow, it worked perfectly! Brilliant idea! It just took me a while to realize that to remove the custom state when the input value is deleted, the ‘This input should not be empty’ option must not be checked.

Thank you! @tylerboodman

2 Likes
6

Glad the suggested solution worked for you!

I used Toolbox and Classify for my script. I needed to validate my inputs and user made conditions so states did not work for me.

7

Good to know. I might need it eventually, as this app has turned out to be more complex than I originally planned. Thanks for the tips! :wink: