Use Flow Router Param in Autoform

Question

Friends,

I'm working on my first app in Meteor and hitting my head against the wall on something...

I have a scenario similar to a blog + comments situation where I have one collection (call it 'posts') and want to associate documents from another collection (call it 'comments').

The best way I know to pass the post._id to the comments as a "postId" field is to use the Flow Router params, since the form is on the 'post/:id' view.

But for the life of me, I cannot figure out how to get "var postId = FlowRouter.getParam('postId');" to pass to Autoform so it populates. I've tried adding it as a function in the schema, as a hook, and as a hidden field in the form on the page (obviously don't want to go that route).

Autoform is amazing and I want to use it, but may have to wire it up the hard way if I can't get this darn value to populate.

Any ideas? I've been hitting my head against the wall on this for a couple of days now.

Thanks!

mcissel · Answer 1 · 2016-01-11T03:19:23.110

First, just so we're on the same page, if you have your route is set up like this:

FlowRouter.route('/blog/:postId', {
  action: function (params, queryParams) {
    FlowLayout.render('layout', { body: 'postTemplate' });
  },
});

You are able to call FlowRouter.getParam('postId') from inside the AutoForm hook

You'll need to use an AutoForm hook and have a complete schema. I'm using the package aldeed:collection2 for the schema set up. The postId field must be explicity declared. This code is running on both server and client.

Comments = new Mongo.Collection("comments");

Comments.attachSchema(new SimpleSchema({
  comment: {
    type: String,
    label: "Comment"
  },
  postId: {
    type: String
  }
}));

Setting your form up like this is not what you want:

{{> quickForm collection="Comments" id="commentForm" type="insert"}}

That's no good because it will show the postId field in the HTML output. We don't want that, so you have to fully define the form like this:

{{#autoForm collection="Comments" id="commentForm" type="insert"}}
    <fieldset>
        {{> afQuickField name='comment' rows=6}}
    </fieldset>

    <button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}

Then add the AutoForm hook. This code is running on the client.

var commentHooks = {
  before: {
    insert: function(doc){
      var postId = FlowRouter.getParam('postId');
      doc.postId = postId;
      return doc;
    }
  }
};

AutoForm.addHooks(['commentForm'],commentHooks);

Make sure you have your allow/deny rules set up, and it should be working fine.

score 0 · Answer 2 · answered Jan 10 '17 at 01:49

I was struggling with this same use case as well, and I found this on the Meteor forums: https://forums.meteor.com/t/use-flow-router-param-in-autoform/14433/2

If you're using a schema to build your form (either with the autoform or quickform tags) then you can put it right in there.

For example:

campaignId: { type: String, autoform: { value: function() { return FlowRouter.getParam('campaignId'); }, type: "hidden" } },

Use Flow Router Param in Autoform

2 Answers2