JSON Forms: Tutorial – Das UI-Schema

Mit dem Framework JSON Forms lassen sich Web-UIs auf Basis von Formularen ganz leicht erstellen. Die UIs sind auf die Eingabe, Bearbeitung und Anzeige von Daten spezialisiert und werden in der Regel in andere Anwendungen eingebettet. 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 Angular. Die JSON Forms Homepage ist ein gute Ausgangspunkt für alle, die mehr über JSON Forms wissen wollen.

In dieser Blog-Serie möchten wir das Framework am Beispiel einer realen Applikation, einem Task-Tracker namens „Make It Happen“ vorstellen. Im Piloten der Blog-Serie haben wir an Tag 0 die Gesamtanforderungen beschrieben. Am ersten Tag haben wir die erste Iteration abgeschlossen, die als Ergebnis ein einfaches Formular der Task-Entity erzeugte. Das Ergebnis von Tag 1 war ein voll funktionsfähiges Formular, das wie folgt aussah:

An dem heutigen zweiten Tag werden wir zeigen, wie das gerenderte Formular angepasst werden kann, d. h. wie Steuerelemente und Layout von erstellten Formularen zugänglich gemacht werden können.

Bisher haben wir noch nichts für unser Formular spezifiziert, sondern lediglich das Datenschema genutzt, wodurch JSON Forms daraus ein Formular generieren konnte. Allerdings möchten Sie diese Formulare vermutlich früher oder später anpassen. Als sehr einfaches Beispiel könnten wir die Anordnung der angezeigten Attribute spezifizieren oder die Labels der Steuerelemente ändern. Darüber hinaus würden wir die Description-Property gerne als mehrzeiliges Textfeld anzeigen lassen. Da diese Art von UI-Spezifikationen konzeptionell nicht im zugrunde liegenden Datenschema enthalten sind, definiert JSON Forms ein zweites Schema: das UI-Schema. Das UI-Schema konzentriert sich ausschließlich auf UI-Bereiche: Es beschreibt welche Eigenschaften der Datenschemata als Steuerelemente angezeigt werden, wie sie aussehen und das zugehörige Layout. Wenn Sie ein UI-Schema definieren, wird es von JSON Forms verarbeitet, um eine angepasste Version des ursprünglichen Formulars zu erstellen. Das UI-Schema referenziert dabei das zugrunde liegende Datenschema, um festzustellen welche Eigenschaften im User Interface angezeigt werden sollen. Das folgende Diagramm zeigt ein einfaches UI-Schema, das spezifiziert dass name als Steuerelement des UI angezeigt werden soll:

Das folgende UI-Schema spezifiziert das oben formulierte Formular auf der Grundlage des Datenschemas:

{
  "type": "Control",
  "scope": {
    "$ref": "#/properties/name"
  }
}

Wie wir am ersten Tag gesehen haben, können solche einfachen UI-Schemata automatisch aus dem Datenschema abgeleitet werden, ohne dass ein bestimmtes UI-Schema dafür angegeben werden müsste. Aber jetzt wollen wir das default-generierte Formular ändern. Zuerst soll sich dabei die Reihenfolge der Attribute ändern:

1. Name
2. Done
3. Description

Danach wollen wir das Label von done ausblenden, da die Checkbox selbsterklärend ist, und schlussendlich Description als mehrzeiliges Textfeld anzeigen. All diese Dinge können einfach im UI-Schema durchgeführt werden. Im Folgenden findet sich das UI-Schema und das resultierende Formular mit allen zuvor genannten UI-Anpassungen.

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

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. Wer diese Artikelserie verfolgen möchte, kann uns auf Twitter folgen. Dort informieren wir über alle neuen Artikel zu JSON Forms.

Wir sehen uns dann zum nächsten Entwicklungstag wieder!