Custom Meteor autoform template

Question

I have nested schemas. Using {{> afQuickField name='work_item' template="myTemplate"}} outputs the inputs in a very logical way, but for some of my more complex objects this isn't terribly practical. I'd like to set up a template where I can precisely place each input with some other html.

These are also (usually) arrays of objects, so the .autoform-add-item and .autoform-remove-item button functionality is very nice and I would like to keep it.

How would I define custom templates for particular nested schemas and call them in my main form?

Have tried

Creating a <template name="afWorkItem_myTemplate"> named like my custom form templates extrapolated from the bootstrap3 form templates. I then try to call it like {{> afWorkItem name='work_item' template="myTemplate"}} but that did not work at all.

update

I tried to modify my custom afArrayField template to output different structures based on arrayFieldName. This seemed a little closer but still no cigar.

Template.afArrayField_autoupdate.helpers({
  whichTemplate: function(templateName){
    return this.arrayFieldName === templateName;
  }
});

Then in afArrayField_autoupdate template:

{{#if whichTemplate 'address'}}
  {{> afQuickField name=this.current.street options=afOptionsFromSchema template="autoupdate" placeholder="schemaLabel"}}
  <br />
  {{> afQuickField name=this.current.city options=afOptionsFromSchema template="autoupdate" placeholder="schemaLabel"}}
  {{> afQuickField name=this.current.state_id options=afOptionsFromSchema template="autoupdate" placeholder="schemaLabel"}}
  {{> afQuickField name=this.current.zip options=afOptionsFromSchema template="autoupdate" placeholder="schemaLabel"}}
  <br />
  {{> afQuickField name=this.current.address_type_id options=afOptionsFromSchema template="autoupdate" placeholder="schemaLabel"}}
  {{> afQuickField name=this.current.active_address options=afOptionsFromSchema template="autoupdate" placeholder="schemaLabel"}}
{{else}}
  {{> afQuickField name=this.name label=false options=afOptionsFromSchema template="autoupdate" placeholder="schemaLabel"}}
{{/if}}

Which came very close but all of my fields (including ones that are selects if I simply use the afQuickField method in the else block) came out as text inputs.

When you tried creating your custom afWorkItem input, did you call AutoForm.addInputType to let AutoForm know about it? — mark
@mark indeed I did. I had to create the html/js separately as the package is not yet compatible with autoform 5.0+. I will be posting later that I did get this to work though somewhat hackily. — Randy Hall
Oh ok. There's probably a non-hacky way to do what you want, but I'm not sure what you've tried yet, so I'll wait for your update. It's very odd that they show up as select inputs in the else block but not in the if block... some other things you could try for fun: in the afArrayField template, what happens if you add type="select" to the afQuickFields, or perhaps change them to afSelects? — mark
@mark actually I had mixed this up with another question I had asked, probably in my late night haze of developing too long. Your suggestion seems to be spot on, I hadn't called addInputType. I shall try that today. Please suggest that in an answer! — Randy Hall
No problem, that happens to me all too often. I've posted an answer -- fingers crossed it works! — mark

mark mark · Accepted Answer · 2015-03-16T18:45:31

If you're trying to add a custom afWorkItem input type, you'll have to call AutoForm.addInputType to let AutoForm know about it. Not sure what you meant exactly by the template not working at all, but this might be a reason. There are plenty of examples in the form of the built-in input types.

Custom Meteor autoform template

1 Answers