Multiple Dropdowns in one form

[tasneemimamkhan]

Hello,

I hope you are well! I have the following form I am trying to create:

Student Name - Text Field
Grade - Options Picker
Program - Options Picker
Submit button: OnClick it executes a query inserting a new student into a mysql database.

I have all of the above fields wrapped in a form called 'Student Submission Form' in which the form's schema is the name of the Query to be executed, 'submitStudent'. I also created 2 internal options columns called 'Grades' and 'Programs'. So the components look something like this (I will put it in brackets for readability):

[form 'Student Submission Form' with schema 'submitStudent']
[Text Field Student Name ]
[form 'Grade' with schema 'Grades']
[Options Picker with Field 'Grade']
[form 'Program' with schema 'Programs']
[Options Picker with Field 'Program']
[submit button with on click executing query called 'submitStudent' which inserts a new student into the mysql database].

The issue is, when I bind the fields to the 'submitStudent' query, I can successfully send the 'Student Name' text field value. However, the values for 'Grade' and 'Program' are blank. I can access the Grade value from within the form 'Grade', but I cannot access the value from the 'Student Submission Form'.

What am I doing wrong? Please help. Thank you!

[aptkingston]

Hey @tasneemimamkhan! It sounds like the problem is just the scope of the forms. I'm impressed that you've already worked out that you can use additional forms bound to internal tables to provide options pickers because options isn't a valid type for external sources at the moment.

The way button actions work is that the button can only use values that are in their direct scope - so because the forms for "Grade" and "Program" are siblings of the button rather than parents, it can't see their values. I think there's a solution for this though. You'll need to ensure that the Button component is inside all the forms, so try making your component tree look like this:

Form "Student Submission Form"
    Text Field "Student Name"
    Form "Grade"
        Options Picker "Grade"
        Form "Program"
            Options Picker "Program"
            Submit Button

I think that if your component tree looked like this then you'd be able to use values from all the forms in your query handler. I appreciate that this is a bit strange though and it's got me thinking about better ways we could handle this. I think there are 2 solutions which would make this problem easier - either allowing options to be a valid type for external sources, or allowing an Options Picker component to have it's options entered in Settings directly, without the need for a schema. Either of those fixes would let this be possible with just a single form. I'll try to get something entered in the roadmap for this because I think your use case here is quite common and very valid.

[tasneemimamkhan]

Thank you for your quick reply!

The above was a snippet of what I'm trying to do. I, in fact, have about 10 dropdown menus I need on this page :***) I don't think the above solution will be feasible. Looking forward to seeing if this is addressed in your roadmap. In the meantime, I think I'll stop development on this project since, in addition to the above issue, I need to be execute external stored procedures and triggers. From another thread, I saw your team is exploring adding external automations, which is awesome.

Thanks again - this truly is a phenomenal endeavor. Good luck to this incredibly talented team!

Warmly,
Tasneem