13 May 2014
Building AngularJS forms with JSON Schema
by Chris Nelson
Formtastic and simple_form, how we miss you
Around 3 years ago I came to the realization that building web applications using client side MVC frameworks was the future. I’ve embraced the approach whole heartedly, but not without occasional sadness. I and many of the developers I worked with have been quite spoiled by Rails, in a good way, and giving up some of the view helper goodness has been known to cause developer unhappiness. In particular, form building is not nearly as much in today’s client side frameworks and it has been with excellent form building gems like formtastic and simple_form.
There’s been a few attempts build something to fill this need, but none have been quite what I wanted so I decided to have a crack at it myself. What I came up with is an angular directive I’ve called schema_form. It takes json schema and builds a form.
How does that help? What is json schema and why should you care? I’m glad you asked…
Why you should care
It turns out to be a good bit easier to build something like simple_form on the server side using a framework like Rails. The reason for this is that when you are tightly integrated with a server side framework it’s possible to ask the framework for all the information you might need to know about your model. You can ask for the types of each property and use this information to build the right kind of input for each one. You can even reflect on validations to display the appropriate styling.
But on the client side there’s no easy way to get this information. It’s fairly simple to build a client side form builder, but if it’s client side you need to either duplicate the information from the server side in client side code, or have something on the server side that emits metadata in some format the client side can understand. And in order to avoid tightly coupling your client side form builder to your server side framework, it would be awesome if there was some agreed upon format for expressing this data. Hmm, perhaps if there was an easy way to express schema information as json…
Enter json schema
Someone wise once said that the best thing about standards is that there are so many choose from. Clearly having a standard is no panacea, but in this case json schema gave me a way to express exactly what I needed without much fuss. I’m not going to try to break down all of json schema for you, the docs at json-schema.org do a pretty good job of that already. But let’s go through a simple example:
{
title: "Thing"
type: "object",
properties: {
title: {
type: "string",
title: "Title",
},
good: {
type: "boolean",
title: "Good?"
},
level: {
title: "Level",
type: "string",
enum: ["low", "medium", "high"]
}
},
required: ["title"]
}
This describes gives a human readable title, “Thing” and specifies that Thing must be an object. For the purposes of form building, object is the only type that makes sense. We then see an object that describes each property of Thing. Each value of the properties object is itself a json schema object. We see that this object contains two string properties and one boolean property. Further, we see that one of the properties, level, is contrained to an enumerated list of values.
It turns out this information is enough to build a reasonable form for editing our Thing
Where do schemas come from?
Because, json schema is a spec with some amount of interest, there’s a chance your server side framework of choice may already support it. In the case of rails, there was nothing listed on json-schma.org but a little google turned up a decent gem that generated json schema from activerecord. It didn’t yet do anything for validation but I’ve started a fork that does.
The vision thing
There’s a lot more that can done with json schema that just building forms. One of the other go to tools in our toolbox as rails devs is active admin. Active admin is a great tool for deploying usable admin UIs with little if any code. Nothing like it exists in the client space just yet. JSON schema could serve as the mechanism for conveying the data needed for not only forms, but client side models and entire admin UIS to be generated. This is an avenue I’m very much interested in exploring.
And of course admin UIs are fairly limited in usefulness without support for relationships between objects. This is something JSON schema supports through the JSON HyperSchema spec. Like the rest of the spec, it’s quite light weight and easy to understand.
