Is there a way to hide optional fields while using autoforms in meteor

Hi -

I’m using autoforms to build a rather lengthy form. SOme fields are populated by default values and I do not wish for them to appear since the end user will mostly not be touching them unless there is a specific necessity. I went through the documentation for autoforms and the demo page, but nothing is clearely mentioned about how to have these fields hidden away and then shown upon clicking on ‘Advanced’ or something like that. A little advice on how to get this thing going will be useful.

Documentation sources:

http://autoform.meteorapp.com/

https://www.google.co.in/search?q=afquickfieldschema&oq=afquickfieldschema&aqs=chrome..69i57.3232j0j1&sourceid=chrome&ie=UTF-8#q=afquickfield+options

On the autoform.meteorapp.com link you referenced, take a look at the Field Values page specifically. The afFieldValueIs and afFieldValueContains helpers will help with this. The demo shows how (click on any of the radio buttons / checkboxes to see hidden fields appear).

I had initially taken a look at that, I am under the impression that the approach mentioned there is more strictly bound to the filed. Only if the option validates to a ‘Yes’, then the rest of the form shows up.

What I’m looking to achieve is for the form to auto hide the default (Advanced) fields and provide a simple advanced link or button. Upon clicking that button, the rest of the form should show up.

Let me take a second look at what you mentioned to see if it’s feasible.

You could always consider making your “Advanced” link a checkbox instead, then leverage the afFieldValueContains helper. If you want to use a link though you can handle this outside of Autoform via Blaze instead. When creating your form, instead of using the Autoform’s quickForm option, build the full form leveraging afQuickField or afFieldInput to build each form element separately. You can then wrap your advanced fields in a div, and wire up a click event in your Template that will hide/show the advanced fields.

This makes sense. Let me try out the approaches you’ve mentioned.

Okay I ran into some roadbumps.

When I try the below, the top level objects populate the drop down menus perfectly.

<template name ='atemplatename'>
{{#autoForm collection ="aCollection" type ="insert" 
id ="aCollectionID" }}
   {{#each afFieldNames}}
        {{> afQuickField name=this.name options = afOptionsFromSchema  }} 
    {{/each}}  
    <div>
      <button type="submit" class="btn btn-primary">Submit</button>
      <button type="reset" class="btn btn-default">Reset</button>
    </div>
{{/autoForm}}
</template>

However, when I try to break it down in order to use afQuickFields, The top level objects don’t show up as drop downs. In fact, they dont get the necessary array values (the select options) at all!

This is what I did:

<template name ='templatenamehere'>
{{#autoForm collection ="aCollection" type ="insert" 
id ="aCollectionID" }}
  
{{> afQuickField name = 'dropDown1' }} 
    <div>
      <button type="submit" class="btn btn-primary">Submit</button>
      <button type="reset" class="btn btn-default">Reset</button>
    </div>
{{/autoForm}}
</template>

How do I go about this?