Generating beautiful forms the easy way with Autoform for Meteor

May 18, 2015

I have worked on some big applications which had a ton of CRUD forms. We were young and naive so we made them all by hand! This kind of job really sucks the life and joy out of programming. Let me introduce you to the wondrous world of Autoform and how the Meteor community solves this problem with some of that outer space thinking!

Book example

I like to teach by example so in this application we are going to be inserting books! A user will be able to submit new books in a form which is generated by Autoform.

books

Before we venture further in some fine literature, we need to create the collection.

// Letting Meteor know that we want to save books
Books = new Mongo.Collection('books');

Now that we have introduced our collection to Meteor. It’s time to define our schema.

Defining the schema

It might be because of my background with relational databases, but I like to use schemas. What is this schema thing I have been talking about?

Well … it’s basically telling the database what type a field can be. We wouldn’t want a number to be the title of a book now, do we? That’s madness! Don’t read too far into it for now, because we need to specify what a book in our application is first.

The definition of a book:

Book
The title is a string
The author is a string
The publish date is a date
The rating is a number between 1 and 10

Our book is really simple and with the specs sorted out it’s time to make our schema! Well … Not so fast my dear reader. There is one problem. The default database that Meteor uses is MongoDB. Since this is a schemaless database, we need to implement this within our code using a third party package.

The package of choice is Collection2 which has a lot of cool features, but I won’t be going into those in this post. We are just going to define and attach a simple schema to our collection.

First install Collection2 and Autoform with this command:

meteor add aldeed:collection2 aldeed:autoform

Now it’s up to us to translate the before mentioned book definition into a useable schema.

var schema = new SimpleSchema({
  title: {
    // Labels are used to reffer to this field in validation
    label: 'title',
    // Specifying the allowed type
    type: String
  },
  author: {
    label: 'author',
    type: String
  },
  publishDate: {
    label: 'publish date',
    type: Date,
    // This is needed for the Materialize theme, more on this later
    autoform: {
      type: 'pickadate'
    }
  },
  rating: {
    type: Number,
    // We only want a rating from 0 to 10
    min: 0,
    max: 10
  }
});

All we have to do now is to attach this schema to our collection.

Books.attachSchema(schema);

That’s it! We are all done and ready to display the form.

important: Make sure the schema is accessible on both the client and sever. It’s used for validation on both sides!

Display the form

Telling the template that we want a generated form is really simple! Just add this to your project:

<template name="insertBookForm">
    {{> quickForm collection="Books" id="insertBookForm" type="insert"}}
</template>

themeless form

The form is fully functional but it does look dull, doesn’t it? We can solve this by changing the default theme. Let’s add the Materialize theme to make this form look beautiful and modern!

Installing the Materialize theme

Just copy and paste this command:

meteor add materialize:materialize gildaspk:autoform-materialize

No visual changes yet … which was a little bit of a disappointment to me too. Don’t worry! We just have to tell Autoform to use the new theme.

Add this where only the client will have access to it:

AutoForm.setDefaultTemplate('materialize');

autoform with materialize theme

You will notice that the form looks absolutely fabulous now!

We have successfully created a beautiful form where we can insert books. You know what that means? It means that our application is done!

The full code can be found on my github profile, please give it a star.

Conclusion

Generating forms like this is a very effective way to apply DRY in your projects. I encourage you to read the documentation for further gems that will boost your productivity. Thank you for reading and let me know what you think by leaving a comment below.

Comments