JSON Forms

Durch die Verwendung von JSON Forms ist es nicht mehr notwendig, HTML-Templates und Javascript für das manuelle Data Binding zu schreiben, um personalisierbare Formulare zu erzeugen. Dafür werden die Möglichkeiten von JSON und JSON Schema eingesetzt und mit einem einfachen, deklarativen Weg zur Beschreibung von Formularen ergänzt. Formulare werden dann innerhalb eines UI Frameworks gerendert, derzeit basierend auf AngularJS. Die JSON Forms Homepage stellt einen guten Ausgangspunkt für alle dar, die mehr über JSON Forms wissen wollen.

In dieser Blog-Serie möchten wir das Framework am Beispiel einer realweltlichen Applikation, einem Task-Tracker namens „Make It happen“ vorstellen. An Tag 1 haben wir unser erstes Formular definiert, am Tag 2 haben wir das UI-Schema eingeführt und an unsere Beispielanwendung angepasst.

Make It happen – Tag 3: Erweiterung des UI-Schemas

Tag 2 resultierte in einem funktionsfähigen Formular, das so aussah wie dieses:

Das Ziel der dritten Iteration des Beispiels „Make It Happen“ ist es, das Datenschema mit zusätzlichen Attributen zu versehen und das UI-Schema entsprechend zu aktualisieren.

Bisher hat das JSON-Schema unserer Dateneinheit drei Attribute definiert:

• „Name“ (String) – obligatorisch
• „Description“ (mehrzeiliger String)
• „Done“ (Boolean)

In unserer dritten Iteration fügen wir nun zwei zusätzliche Attribute zur Task Entity hinzu. Diese Attribute sind:

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

Da JSON Forms die Nutzung des JSON Schemas als Grundlage für alle Formulare erleichtert, beginnen wir mit der Erweiterung des Datenschemas mit den neuen Attributen. Das folgende Listing zeigt das komplette Datenschema – nur Due_Date und Rating müssen noch hinzugefügt werden:

{
    "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"]
}

Basierend auf dem erweiterten Datenschema müssen wir auch das UI-Schema um unsere neuen Eigenschaften erweitern, damit diese dem gerenderten Formular hinzugefügt werden:

{
  "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"
      }
    }
  ]
}

Auf diesen zwei Schemata aufbauend, wird der JSON Form Renderer automatisch das folgende Formular generieren:

Beachten Sie, dass JSON Forms automatisch die passenden Widgets für die neuen Attribute erstellt: Eine Datumsauswahl für das „Due Date“ und ein Eingabefeld für das „Rating“. Für das Rating wäre es allerdings schön, eine besondere Kontrolle über die Eingabe zu haben. Mit JSON Forms ist das kein Problem, und es wird später auch in der Blog-Serie beschrieben. Beachten sie bitte zusätzlich auch, dass die Steuerelemente automatisch an die zugrundeliegenden Daten gebunden sind und somit Default-Funktionen sowie Validierung zur Verfügung stellen.

Ein weiteres, interessantes Merkmal, das oft in Formularen benötigt wird, ist, die Sichtbarkeit bestimmter Steuerelemente anhand der aktuell eingegebenen Daten zu kontrollieren. Diese Anforderung wird von JSON Forms ebenfalls unterstützt, und wir werden diese regelbasierte Sichtbarkeit am Tag 4 unserer Blog-Serie adressieren.

Wer nun Interesse daran hat, JSON Forms auszuprobieren, sollte das Getting Started Tutorial  lesen. Dort wird erklärt, wie man JSON Forms in ein Projekt integriert und selbst die ersten Schritte damit macht.

Wir sehen uns dann zum nächsten Entwicklungstag wieder!