14 Replies Latest reply on Jan 19, 2016 9:12 PM by KristopherKruger

    Dynamic Form Layout

    KristopherKruger

      I have a front end form that requires the user to select some options.  Depending on the options I would like to add or subtract fields that are required to be filled out.  If all the fields are shown to the user, it would be overwhelming.

       

      I'm able to successfully hide and show the fields, but is there way to adjust the layout of the form depending on the fields that are shown?

       

      For Example

      I have 3 Fields:

       

      Field 1

      Field 2

      Field 3

       

      If Field 2 is hidden, I want Field 3 to move up to fill the void.

       

      So it would look like this

       

      Field 1

      Field 3

       

      Any help would be appreciated.

        • 1. Re: Dynamic Form Layout
          Mike Duncan

          Hi Kristopher,

           

          If the options to display are limited enough, you may consider creating a slider object that has the different potential combinations and simply go to the correct slider to display. Just hide the navigation dots and you have as many panels as you like.

           

          This can potentially give better performance, since there can be less logic to evaluate when drawing the windows.

           

          Hope this helps...

          Mike

          • 2. Re: Dynamic Form Layout
            KristopherKruger

            That's an interesting idea.  I added a slider object and put some fields inside one of the panel, not really sure how to navigate other than clicking on the dots.. also i think it may be too easy for the user to miss some of the required fields.

             

            I was just hoping that filemaker was able to adjust the layout based on which fields are displayed.. more like a web page.

            • 3. Re: Dynamic Form Layout
              siplus

              I would keep the layout as it is - we don't want the user to be presented with a "different" layout depending on initial choices.

               

              Just conditional format fields, setting a grey bg on those that do not need to be filled in, given the initial situation choice. The user will be grateful because the layout stays the same and the anchors he mentally built keep the fields he knows in place. The need-to-be-fields stand out with their white bg, as opposed to the gray one of the fields that do exist but are not mandatory.

               

              Try it.

              1 of 1 people found this helpful
              • 4. Re: Dynamic Form Layout
                KristopherKruger

                Thanks for the suggestion.  The only issue is that it would be a very long form to display all of the fields.  The user will be entering their data via web direct, so I want to keep the layout as visually simple as possible.  I was planning on hiding most fields and have them appear as check boxes are selected.  The problem is that the layout wont "float up" and fill in the void if some options are not selected. 

                 

                You would think such a basic design principal that's been available for web forms for years would be available in filemaker pro.

                • 5. Re: Dynamic Form Layout
                  mrwatson-gbs

                  Here is a trick if you have groups of fields that need to be conditionally shown/hidden:

                   

                  Try a vertically aligned button bar containing pop-up buttons.

                  Each popup button has a name and a hide condition.

                  When a button is hidden the other buttons fill out the space. (If you don't like that you can also add space-filler buttons at the end  of the button bar which are shown when the form is not)

                   

                  E.g.:

                   

                  Basic Form  [popup]

                  Address USA [popup]

                  Complications EU [popup]

                  (not Address USA empty filler button)

                  (not Complications EU empty filler button)

                   

                  Get it?

                  • 6. Re: Dynamic Form Layout
                    mrwatson-gbs

                    Alternatively, instead of having hundreds of fields you can built a meta table of fields:

                     

                    SortNr       // Position in the portal

                    FieldLabel  // Name of the field

                    DataType   // Text / Number / Date /...

                    InputType // Edit box or value list, or ...

                    Filter         //a one if the field should be shown

                    InputValue

                     

                    And then your 'layout' just becomes a portal

                    - showing the FieldLabel and an InputValue field

                    - use hide calculations to show the InputValue field with the required display +  input configuration based on the DataType and InputType fields

                    - Filtered on the Filter field

                    - Sorted on the SortNr field

                     

                    You just need to add script triggers to set the Filter field in the corresponding records, in order to show/hide them.

                     

                    Warning: this is a BIG change from standard lay outing with it's own pros+cons!

                    • 7. Re: Dynamic Form Layout
                      KristopherKruger

                      Thanks for taking the time to answer.  I'm not quite sure what you mean by your second answer. 

                       

                      One of my options would be to create different layouts and go to that layout of an option is selected.  But this would require a conditional "next" and "back" button which I haven't figured out yet.

                      • 8. Re: Dynamic Form Layout
                        CarlSchwarz

                        Is it a questionnaire?  If they are yes/no questions with multiple choices based on that then you could use pop-ups.  E.g. when a user presses Yes a popup appears with the sub inputs, if a user presses No then a different popup appears...  Otherwise you just might need to create some sort of tree of possibilities and design your layout around that.

                        I know that some popular survey websites will simply present the user with one question at a time and a next button, so you could just show one option at a time with "next".

                        • 9. Re: Dynamic Form Layout
                          jbrown

                          To follow up Mike's thoughts, the slide panels seemed designed secondarily for this kind of work. I use them all the time to hide/show entire groups of data. IN fact, I use many one-panel slides, put fields on each object, and hide/show the entire object. This eliminates the need to have to navigate between them, though that really isn't a problem.

                          I'm using them in a solution right now: I have Portal A on one panel, and Portal B on another panel. Depending on the circumstance, I hide the entire panel Portal A is on.

                           

                          This is sort of "grouping" without really grouping the fields and objects. As Mike said, hide the dots and boom, you got an entire panel to hide/ show.

                          • 10. Re: Dynamic Form Layout
                            KristopherKruger

                            It's a form for a non-profit that provides surgeries for pets.. they have a lot of questions to ask the client before they can schedule a procedure.  I was thinking about a "next" button but depending on which options they choose would change the order the next layout would go to.  It just would be so much easier if the fields simply moved up ... thanks for your suggestions.

                            • 11. Re: Dynamic Form Layout
                              KristopherKruger

                              I will give it a try tomorrow to see if I can make that work.  Thank you.

                              • 12. Re: Dynamic Form Layout
                                CarlSchwarz

                                If you use a slide panel instead of multiple layouts then you can programatically go to a panel with the "Go to object" script step.  Just name something on that panel and call go to object, and it will jump to that panel and object.

                                • 13. Re: Dynamic Form Layout
                                  KristopherKruger

                                  That's interesting, it might just work for what I need - i can programmatically create a "form wizard" by calling the different panels based on the options selected.

                                   

                                  It will be a pretty complicated step script, but it sure would be quick since the user won't need to wait for all of the layouts to load.

                                   

                                  Thank you

                                  • 14. Re: Dynamic Form Layout
                                    KristopherKruger

                                    Mike and Jeremy, the panel idea will work for what i need to do.  It's a different approach than what i was going after, but it might actually work better.  Good idea.