JSON Forms – Day 3 – Extending the UI Schema

JSON Forms – Day 3 – Extending the UI Schema

JSON Forms is a framework to efficiently build form-based web UIs. These UIs are targeted at entering, modifying and viewing data and are usually embedded within an application. JSONForms eliminates the need to write HTML templates and Javascript for manual databinding to create customizable forms by leveraging the capabilities of JSON and JSON schema as well as by providing a simple and declarative way of describing forms. Forms are then rendered within a UI framework – currently based on AngularJS. If you would like to know more about JSON Forms the JSON Forms homepage is a good starting point.

In this blog series, we would like to introduce the framework based on a real-world example application, a task tracker called “Make It happen”. On day 0 and 1 we defined our first form and on day 2 we introduced the UI schema and adapted it for our sample application.

Day 2 resulted in a functional form looking like this:

jsonforms_blogseries_day2_form

If you would like to follow this blog series please follow us on twitter. We will announce every new blog post on JSON Forms there.

The goal of our third iteration on the “Make It Happen” example is to enhance the data schema with additional attributes and update the UI schema accordingly. 

So far, the JSON Schema for our data entity defined three attributes:

  • “Name” (String) – mandatory
  • “Description” (multi-line String)
  • “Done” (Boolean).

In our third iteration, we add two additional attributes to the Task entity. These additional attributes are:

  • “Due Date” (Date)
  • “Rating” (Integer)

As JSON Forms facilitates JSON Schema as a basis for all forms, we start with enhancing the data schema with the new attributes. The following listing shows the complete data schema, only due_date and rating have to be added, though:

{
    "type": "object",
    "properties": {
      "name": {
        "type": "string"
      },
      "description": {
        "type": "string"
      },
      "done": {
        "type": "boolean"
      },
      "due_date": {
        "type": "string",
        "format": "date"
      },
      "rating": {
        "type": "integer",
        "maximum": 5
      }
    },
    "required": ["name"]
}

Based on the extended data schema, we also need to extend the UI schema to add the new properties to our rendered form:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": {
        "$ref": "#/properties/name"
      }
    },
    {
      "type": "Control",
      "label": false,
      "scope": {
        "$ref": "#/properties/done"
      }
    },
    {
      "type": "Control",
      "scope": {
        "$ref": "#/properties/description"
      },
      "options": {
        "multi":true
      }
    },
    {
      "type": "Control",
      "scope": {
        "$ref": "#/properties/due_date"
      }
    },
    {
      "type": "Control",
      "scope": {
        "$ref": "#/properties/rating"
      }
    }
  ]
}

Based on those two schemas, the JSON Form renderer will now automatically produce this form:

jsonforms_blogseries_day3_form

Note that JSON Forms automatically creates the correct widgets for the new attributes: a date picker for “due date” and a input field for “rating”. For rating it would be nice to have a more special control, though. This is possible with JSON Forms and will be described later in this series. Please also note that those controls are automatically bound to the underlying data and provide the default features such as validation.

Another interesting feature often required in forms is to control the visibility of certain controls based on the current input data. This is supported in JSON Forms, we will describe this rule-based visibility in day 4.

If you are interested in trying out JSON Forms, please refer to the Getting-Started tutorial. It explains how to set up JSON Forms in your project and how you can try the first steps out yourself. If you would like to follow this blog series, please follow us on twitter. We will announce every new blog post on JSON Forms there.

We hope to see you soon for the next day!

 

List of all available days to date:

No Comments

Post a Comment

Comment
Name
Email
Website