Wie JSON Forms unsere Formularprozesse erleichtert

In diesem Beitrag zeigen wir dir, wie und warum wir JSON Forms genutzt haben, um eine Plattform zur Verwaltung medizinischer Formulare und Berichte zu entwickeln – robust, verlässlich und flexibel.

JSON Forms

Im Rahmen des Projekts MedAI brauchten wir eine flexible und effiziente Lösung für die Erstellung und Bearbeitung dynamischer Formulare. Nach einem internen Austausch zu bisherigen Erfahrungen haben wir uns für JSON Forms entschieden – eine Open-Source-Bibliothek, die hervorragend zu unseren Anforderungen passt.

Unsere spezifischen Anforderungen

In MedAI bilden die Formulare und die daraus resultierenden medizinischen Berichte das Herzstück der Plattform. Dabei sind verschiedene Nutzer*innengruppen in unterschiedlichen Phasen eingebunden:

• Administrator*innen: erstellen die Formulare direkt auf der Plattform, fügen Schritte, Felder und Informationen hinzu. Ziel ist es, die bisherigen Microsoft-Word-Formulare abzulösen.
• Manager*innen: können beim Erstellen eines Berichts bestimmte Anpassungen am Formular vornehmen, z. B. zusätzliche Fragen einbauen oder irrelevante Felder entfernen.
• Ärzt*innen und Pflegepersonal: füllen die medizinischen Berichte mit den Informationen der betreuten Person aus. Dabei orientieren sie sich an den von Administrator*innen und Manager*innen vordefinierten Feldern.

Nach dem Ausfüllen und Abschicken des Berichts wird eine PDF-Version erzeugt und an das System zur elektronischen Dokumentenverwaltung (GED) übermittelt. Dieses System wird von GILAI betrieben, der IT-Struktur der IV-Stellen des Kantons Waadt und 19 weiterer Kantone.

In dieser Umgebung mit verschiedenen Rollen und Einsatzzwecken brauchten wir ein Tool, das den gesamten Lebenszyklus von Formularen dynamisch abbildet – von der Erstellung bis hin zum finalen PDF. Der perfekte Anwendungsfall, um JSON Forms einzusetzen.

Wie funktioniert JSON Forms?

Zur Definition eines Formulars nutzt JSON Forms mehrere Komponenten. Im Folgenden zeigen wir dir, wie sich ein Formular zusammensetzt:

Das Data Schema

JSON Forms basiert auf JSON Schema, das die Struktur und Validierung der Formulardaten definiert – z. B. Feldtypen (Text, Zahl, Datum etc.), Regeln (Pflichtfelder, erlaubte Werte, Formate) und den allgemeinen Aufbau des Formulars.

const schema: JsonSchema = {
  properties: {
    username: { type: 'string' },
    password: { type: 'string' },
  },
  required: ['username', 'password'],
};

Das UI Schema

Das UI-Schema erlaubt es, die Darstellung des Formulars unabhängig vom Datenschema zu gestalten. Es definiert die Anordnung, Gruppierung und Reihenfolge der Felder.

const uiSchema: VerticalLayout = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      label: t('views.admin.auth.form.username'),
      scope: '#/properties/username',
      options: { props: { autofocus: true } },
    },
    {
      type: 'Control',
      label: t('views.admin.auth.form.password'),
      scope: '#/properties/password',
      options: { format: 'password' },
    },
  ],
};

Die Daten

Die eingegebenen Informationen werden im JSON-Format gespeichert und folgen der Struktur des Datenschemas.

{"username": "bryan", "password": "secret"}

Renderer

Renderer bestimmen, welches UI-Element in Abhängigkeit vom Daten- und UI-Schema verwendet wird.

export const renderers: JsonFormsRendererRegistryEntry[] = [
  { renderer: markRaw(TextFieldControl), tester: textFieldControlTester },
  { renderer: markRaw(PasswordFieldControl), tester: passwordFieldControlTester },
  { renderer: markRaw(VerticalLayout), tester: verticalLayoutTester },
];

In MedAI verwenden wir unterschiedliche Renderer für:

• das Formular im Admin-Modus,
• den medizinischen Bericht im Formularmodus für Ärzt*innen,
• die PDF-Version des Berichts im Lesemodus.

Automatisches Rendering

Durch das Zusammenspiel der oben genannten Elemente lassen sich Formulare mit einem benutzerdefinierten Aufbau von Schritten, Abschnitten und Feldern darstellen. Auch die Validierung beim Absenden des Formulars ist eingebaut.

<JsonForms
  ref="jsonformsEl"
  :i18n="jsonFormsI18n"
  :data="modelValue"
  :schema="schema"
  :renderers="renderers"
  :uischema="uiSchema"
  :ajv="ajv"
  validation-mode="ValidateAndShow"
  :additional-errors="combinedErrors"
  @change="onChange"
/>

Und wie sieht das visuell aus?

Seite zur Bearbeitung eines Formulars

Administrator*innen und Sachbearbeitende können das Formular bearbeiten, indem sie auf der linken Seite neue Schritte hinzufügen. Innerhalb dieser Schritte lassen sich wiederum Abschnitte und Felder einfügen. Zu jedem Feld können zusätzliche Informationen ergänzt werden: Bezeichnung, Beschreibung, Infotext, Hilfetext usw.

Auch Benutzer*innen haben die Möglichkeit, Schritte, Abschnitte und Felder zu verschieben. Das Formular wird dabei in einer festgelegten Ansicht dargestellt. Die Felder selbst sind nicht ausfüllbar – sie dienen lediglich dazu, eine Vorschau zu zeigen, wie ein medizinischer Bericht später aussehen wird.

In dieser Bearbeitungsphase beeinflussen die Nutzer*innen hauptsächlich zwei Bestandteile:

• Das Datenschema (Schema)
• Das Benutzungsschnittstellen-Schema (UI Schema)

Seite für medizinische Berichte

Auf dieser Seite wird das medizinische Formular angezeigt, das zuvor durch Administrator*innen und Manager*innen definiert wurde. Hier tragen Ärzt*innen und Pflegefachpersonen die Informationen schrittweise ein. Beim Absenden werden ausschliesslich die Formulardaten aktualisiert, nicht aber das Schema. Verwendet werden die Standard-Renderer, die auch an anderen Stellen der Plattform zum Einsatz kommen.

PDF-Generierung

Das PDF wird durch die Kombination aller ausgefüllten Informationen aus den Rollen Administrator*in, Managerin und Mediziner\in generiert. Hier kommen spezielle Renderer zum Einsatz, die eine reduzierte Darstellung ohne überflüssige Gestaltungselemente erzeugen. Das PDF wird mit WeasyPrint erstellt, was eine spezielle CSS-Styling-Anpassung der Komponenten erforderlich machte.

Weitere Formulare

Auf der Plattform gibt es neben den medizinischen Berichten viele weitere Formulare. Auch diese werden mit JSON Forms erstellt und verwaltet. Dank seiner Modularität eignet sich JSON Forms hervorragend für unterschiedliche Formulararten.

Die Entscheidung für JSON Forms hat sich für uns als sehr positiv erwiesen. Sobald die grundlegenden Konzepte verstanden und die ersten Features umgesetzt waren, lief die Erstellung und Anpassung von Formularen reibungslos. JSON Forms ist besonders geeignet für Anwendungen, die viele und unterschiedlich komplexe Formulare verwalten. Durch den dynamischen und modularen Ansatz ist es ein echter Gewinn für fortgeschrittene Anwendungsfälle im Formularmanagement.