Restheart + Angular JSON Schema

Created on 2018-08-26 07:27:54

JSON Schema http://json-schema.org/

Restheart https://restheart.org/

Validation https://restheart.org/learn/json-schema-validation/

Angular Schema Form http://schemaform.io/

Putting these all together, we get an application defined by one or two text files that are shared between the client and server, and which can be easily ported to other frameworks.

We will start by getting Restheart running, if you use Docker this is a really simple task.

$ mkdir restheart && cd restheart
$ curl https://raw.githubusercontent.com/SoftInstigate/restheart/master/docker-compose.yml --output docker-compose.yml
$ docker-compose up -d

Restheart is an API for MongoDB and will allow us to easily validate and serve the schemas we are working with, as well as store the valid models.

So, next we define our json schema, we will create a db and collection resource that will use the schema to validate its items.

http -a 'admin:changeit' PUT localhost:8080/db { "descr": "this is my first db created with restheart" }

The schema will be a resource on the same db that the collection will be defined on, and has a special collection of its own. _schemas

PUT /db/_schemas {"descr": "Schemas"}

PUT /db/_schemas/address {
    "$schema": "https://json-schema.org/draft-04/schema#",
    "type": "object",
    "properties": {
        "address": { "type": "string" },
        "city": { "type": "string" },
        "postal-code": { "type": "string" },
        "country": { "type": "string"}
    },
"required": ["address", "city", "country"]
}

This creates the definition of an address, and comes straight from the Restheart examples. Now we create our collection, and have it use the schema for validation.

PUT /db/addresses {"descr":"Address Collection", "checkers": [ { "name": "jsonSchema", "args": { "schemaId": "address" } } ] }

Try POSTing an invalid address to /db/addresses and you should see that it doesn't pass validation.

So now the API is done. Let's move on to the UI.

For this, we will define a separate schema that extends the JSON schema and adds display logic.

[
    "*",
    {
        "type": "submit",
        "style": "btn-info",
        "title": "OK"
    }
]

Defaults are available, and you can get as granular as you need for defining the conditions and layout of your form.

[
    "address",
    "city",
    "postal-code",
    "country",
    {
        "type": "submit",
        "style": "btn-info",
        "title": "OK"
    }
]

[
    {"key": "address"},
    {"key": "city"},
    {"key": "postal-code"},
    {"key": "country"},
    {
        "type": "submit",
        "style": "btn-info",
        "title": "OK"
    }
]

And you can use a combination of the different syntaxes in the definition.

Restheart doesn't have a special collection for the form schema, but we can add one and then put our form schema there.

PUT /db/forms {"descr": "UI Schema Form Definitions"}

PUT /db/forms/address {"definition": [
    "*",
    {
        "type": "submit",
        "style": "btn-info",
        "title": "OK"
    }
]}

The schemas are loaded from the API and are used to stitch together the UI when downloaded. We only need the model that is to be populated, the form schema, and json schema defined to render the form.

<form name="ctrl.formEl" sf-form="ctrl.form.definition" sf-schema="ctrl.schema" sf-model="ctrl.model" ></form>

Add a bootstrap or material design decorator.

<script src="../dist/bootstrap-decorator.min.js"></script>

The UI and API are now complete and will update and stay in sync as you modify the schema files.

Check out the Angular Schema Form Bootstrap example for more. http://schemaform.io/examples/bootstrap-example.html

Material design for Angular Schema Form https://github.com/json-schema-form/angular-schema-form-material