JSON Forms – Day 4 – Visibility Rules

JSON Forms – Day 4 – Visibility Rules

JSON Forms is a framework to efficiently build form-based web UIs. These UIs allow end users to enter, modify and view data and are usually embedded in a business application. JSON Forms eliminates the need to write HTML templates and Javascript for databinding by hand. It supports to create customizable forms by leveraging the capabilities of JSON and JSON schema and providing a simple and declarative way of describing forms. Forms are then rendered with a UI framework, currently one that is 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 1 and day 2, we described the overall requirements and already created a fully working form for the entity “Task”. On day 3 we showed how to extend the form with new attributes and controls.

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 result of the first three days is currently looking like this:

jsonforms_blogseries_day3_form

On day four we will add two more attributes to the task entity, which allows you to set up repeated tasks. For these new attributes, we will configure their visibility in the form based on the current input. Let us start with the attributes, first:

  • “Recurrence” (Enum) – Can be take the values “Never”, “Daily”, “Weekly” or “Monthly”
  • “Recurrence Interval” (Integer) – Describes in combination with “Recurrence”, how often a task is to be repeated, e.g. every 2 days or every 3 weeks

Like before, we simply add those two new attributes to our data schema and automatically derive the extended UI schema from that. The following snippet shows the data schema:

{
    "type": "object",
    "properties": {
      "name": {
        "type": "string"
      },
      "description": {
        "type": "string"
      },
      "done": {
        "type": "boolean"
      },
      "due_date": {
        "type": "string",
        "format": "date"
      },
      "rating": {
        "type": "integer",
        "maximum": 5
      },
      "recurrence": {
          "type": "string",
          "enum":["Never","Daily","Weekly","Monthly"]
      },
      "recurrence_interval":{
          "type": "integer"
      }
    },
    "required": ["name"]
}

This will automatically add the two new attributes to our form:

jsonforms_blogseries_day4_form1
Now, if we look at the two new attributes more in detail, there is an inconsistency. If the “Recurrence” is set to “Never”, it does not makes sense to enter a “Recurrence Interval”. Therefore, we want to hide the “Recurrence Interval” in this case. JSON Forms support this use case using so called “visibility rules”. These rules can be added to any element and define when an element shall be visible and when not. In our particular case, we will directly attach the visibility rule to the control, which displays the “Recurrence Interval”. As you can see in the following snippet at the very end, it points directly to the attribute “Recurrence” and defines for which value of “Recurrence” the control should be hidden:

{
  "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"
      }
    },
    {
      "type": "Control",
      "scope": {
        "$ref": "#/properties/recurrence"
      }
    },
    {
      "type": "Control",
      "scope": {
        "$ref": "#/properties/recurrence_interval"
      },
      "rule": {
          "effect": "HIDE",
          "condition": {
              "scope": {
                  "$ref": "#/properties/recurrence"
              },
              "expectedValue": "Never"
          }
      }
    }
  ]
}

Without any additional coding, JSON Forms will add the new behavior to our form, that means, the “Recurrence Interval” is not visible anymore, if we set the “Recurrence” to “Never”:

jsonforms_blogseries_day4_form2

Here is the lower part with a different Recurrence Value selected:

jsonforms_blogseries_day4_form3

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

Sorry, the comment form is closed at this time.