Zum Inhalt

Seiten (Web-Tabs)

Lange Formulare lassen sich in Seiten zerlegen, die der Anwender im Browser über eine Tab-Leiste durchschaltet — analog zu mehrseitigen Papierformularen wie der schwedischen „Reseräkning" oder dem deutschen Spesen-Antrag. Das Konzept ist dasselbe wie für den PDF-Druck (siehe Druck (PDF)): eine Seiten-Definition (im Schema kc:pages) steuert beide Welten. Was hier neu hinzukommt, sind die Web-Tabs und das Mehrfach-Anzeigen einzelner Felder.

Zusammenklicken reicht — das JSON ist zum Nachschauen da

Seiten legst du im Formular-Editor an, benennst sie dort, sortierst sie und entfernst sie wieder — ohne eine Zeile zu tippen. Zwei Feinheiten trägst du im JSON-Editor nach: die Mehrfach-Anzeige eines Feldes auf weiteren Seiten (kc:appearsOn) und die Blätter-Knöpfe (kc:pageNavButtons). Die eingeklappten Kästen „Hinter den Kulissen" auf dieser Seite zeigen, was der Editor in das Formular schreibt. Aufklappen lohnt sich, wenn du verstehen willst, warum etwas so funktioniert — zum Arbeiten brauchst du es nicht.

Seiten anlegen und bearbeiten

Die Vorschau im Formular-Editor zeigt dieselbe Tab-Leiste wie das Live-Formular, mit zwei Erweiterungen im Editor:

+ Seite ergänzt rechts neben den Tabs eine neue Page (mit Default- Format A4 hoch, automatischem Icon = laufende Nummer). Neue Felder, die per Toolbox-Drop ins Vorschau-Panel fallen, bekommen automatisch kc:page = <aktive Seite> zugewiesen.

Doppelklick auf einen Tab öffnet den Modal-Dialog Seiten-Eigenschaften mit den Feldern id, icon, title, format, orientation und Rändern in mm. Außerdem findest du dort den Button „Seite entfernen" — KCForms fragt vor dem Löschen nach.

Auf welcher Seite ein Feld „wohnt", ergibt sich aus der Arbeit im Formular-Editor: Ein neues Feld (über + Neu oder aus dem Baukasten) landet auf der gerade aktiven Seite und bekommt kc:page automatisch. Eine eigene Einstellung dafür gibt es in den Feld-Eigenschaften nicht. Die Mehrfach-Anzeige kc:appearsOn trägst du bei Bedarf im JSON-Editor ein; sie wirkt nur im Web (das PDF kennt jedes Feld nur einmal).

Die Spalte Felder zeigt nur die Felder der aktiven Seite — das hält die Liste auch bei langen Formularen übersichtlich. Ein Klick auf einen anderen Tab zeigt die Felder dieser Seite.

Seiten verwaltest du außerdem in den Formular-Eigenschaften → Seiten (anlegen, sortieren, entfernen).

Bei all dem notiert der Editor im Formular eine Liste der Seiten und an jedem Feld, zu welcher Seite es gehört. Wie das aussieht, steht weiter unten unter Was der Editor dabei hinterlegt.

Neue Formulare

Ein neues Formular hat zunächst nur eine Seite; die Tab-Leiste bleibt dann ausgeblendet. Brauchst du mehrere Seiten, klicke im Formular-Editor auf + Seite.

Was passiert im Web?

  • Sind mindestens zwei Seiten in kc:pages definiert, rendert KCForms eine Tab-Leiste über dem Formularbereich. Der Tab zeigt das icon als Text-Knopf, der title erscheint im Tooltip.
  • Beim Wechsel des Tabs blendet der Renderer alle Felder aus, deren kc:page und kc:appearsOn nicht auf die aktive Seite zeigen.
  • Validierung, Lookups, kc:visibleIf, Berechnungs-Skripte etc. laufen unverändert über alle Felder — die Seiten-Filterung ist rein visuell. Insbesondere meldet Validieren auch Fehler von Feldern, die gerade nicht sichtbar sind (siehe nächster Abschnitt).
  • Bei nur einer Seite (oder leerer kc:pages) wird die Tab-Leiste ausgeblendet — bestehende einseitige Formulare sehen unverändert aus.

Tabs oder Seitenleiste

In den Formular-Eigenschaften → Seitennavigation (Darstellung) wählst du, wie die Seiten angeboten werden:

Einstellung Schlüssel Darstellung
Tabs oben (Standard) kc:pageNavStyle: "tabs" Tab-Leiste über dem Formular
Sidebar links kc:pageNavStyle: "sidebar" senkrechte, einklappbare Liste der Seiten; darunter je Seite die Abschnitte als Sprungmarken

Weitere Optionen:

  • Seitenweise Validierung ermöglichen (kc:enablePageValidation, Darstellungsoptionen) — zusätzlicher Knopf Diese Seite prüfen, der nur die Felder der sichtbaren Seite validiert.
  • Blätter-Knöpfe (kc:pageNavButtons: true, im JSON-Editor) — Zurück / Weiter am Ende jeder Seite.

Die Seitenleiste selbst lässt sich unter Formular-Eigenschaften → Seitenleiste (kc:sidebar) weiter einstellen: eine Überschrift (fester Text, mit Makros oder per Skript berechnet, auf Wunsch bei jedem Server-Aufruf neu ausgewertet), die Breite, ob sie beim ersten Öffnen ausgeklappt ist, und ob sie den aktuellen Status (z. B. einer Workflow-Stufe) anzeigt. Klappt ein Anwender die Leiste ein oder aus, merkt sich der Browser das.

Abschnitte werden zu Sprungmarken, wenn die Überschrift kc:inNav: true trägt — im Baukasten gibt es dafür „Überschrift 1–3 (mit Sprungmarke)".

Fehler über mehrere Seiten

Wer mehrere Seiten hat, will beim Validieren genau wissen, wo ein Fehler steckt. Dazu gibt es das Form-Level-Flag:

{ "kc:showErrorsProminently": true }

Aktiv eingeschaltet, blendet KCForms über dem Formular ein Fehler-Banner ein, sobald Validate/Submit fehlschlägt:

  • Die Fehler sind nach Seite gruppiert (Tab-Reihenfolge).
  • Jeder Eintrag zeigt Feldtitel · Meldung.
  • Ein Klick wechselt zur passenden Seite, scrollt das Feld in den Sichtbereich, fokussiert das Input und lässt es kurz aufblitzen (rosé-Akzent für ~1.2 s).

Im Formular-Editor: Formular-Eigenschaften → Darstellungsoptionen → „Fehler prominent anzeigen". Daneben gibt es „Modale Fehlermeldung beim Speichern" (kc:showSubmitErrorModal), die fehlgeschlagenes Speichern zusätzlich als Dialog meldet.

Was der Editor dabei hinterlegt

Ein mehrseitiges Formular merkt sich zweierlei: welche Seiten es gibt (in welcher Reihenfolge, mit welcher Beschriftung) und zu welcher Seite jedes Feld gehört. Beides steht im Schema — die Seitenliste einmal oben am Formular, die Zuordnung bei jedem Feld.

Das ist mehr als eine Randnotiz: Sortierst du die Seiten um, ändert sich damit auch die Reihenfolge der PDF-Seiten. Und wenn ein Feld auf der erwarteten Seite fehlt, zeigt ein Blick ins Schema sofort, auf welche Seite es zeigt.

Hinter den Kulissen: So merkt sich ein Formular seine Seiten 
{
  "type": "object",
  "title": "Spesenabrechnung",
  "kc:pages": [
    { "id": "kopf",        "title": "Kopfdaten",                "icon": "01" },
    { "id": "fahrtkosten", "title": "Fahrtkosten",              "icon": "02" },
    { "id": "spesen",      "title": "Verpflegung & Übernachtung","icon": "03" },
    { "id": "summary",     "title": "Zusammenfassung",          "icon": "04" }
  ],
  "properties": {
    "reisender": {
      "type": "string",
      "title": "Name des Reisenden",
      "kc:page": "kopf",
      "kc:appearsOn": ["fahrtkosten", "spesen", "summary"]
    },
    "fahrtkosten": {
      "type": "array",
      "kc:page": "fahrtkosten",
      "kc:childTable": { "...": "..." }
    }
  }
}

Das Feld reisender wohnt auf der Seite Kopfdaten, erscheint dank kc:appearsOn aber zusätzlich auf den drei anderen Seiten — derselbe Wert, nur mehrfach angezeigt.

Drei Schlüssel sind relevant:

kc:pages — Array auf Form-Ebene. Reihenfolge bestimmt die Tab-Anzeige und die PDF-Seiten-Reihenfolge. Pro Eintrag mindestens id (intern, eindeutig) und title (Tooltip + PDF-Header). icon ist der kurze Tab-Label-Text — fehlt er, zeigt KCForms automatisch die laufende Nummer (01, 02, …).

kc:page — Pro Feld. Verweist auf die id einer Seite. Felder ohne kc:page landen automatisch auf der ersten Seite (Default-Bucket). Verweise auf nicht-existente IDs fallen ebenfalls in den Default-Bucket — so geht beim Umbenennen einer Seite kein Inhalt verloren.

kc:appearsOn — Optionaler Array pro Feld. Listet zusätzliche Seiten, auf denen das Feld erscheinen soll. Klassischer Anwendungsfall: die Kopfdaten („Name", „Personalnummer", „Reisezeitraum") wandern oben auf jeder Detail-Seite mit, damit der Anwender beim Blättern stets weiß, in welcher Abrechnung er sich befindet.

Beispiel-Formular

Das Beispielformular „Spesenabrechnung · Multi-Seiten" (Katalog Service, Ordner Multi-Seiten-Beispiele; installierbar unter System-Administration → Formular-Bausteine → Beispiele) zeigt das komplette Konzept:

  1. Kopfdaten — Reisende(r), Reisezweck, Reisezeitraum.
  2. Fahrtkosten — Detail-Tabelle mit Bahn/Flug/Pkw + Summenfeld.
  3. Verpflegung & Übernachtung — Tagespauschalen.
  4. Zusammenfassung — Gesamtsumme, Vorschuss, Auszahlung, Unterschrift.

Personalnummer, Name, Abreise und Rückkehr stehen via kc:appearsOn auf allen vier Seiten. Das Formular hat kc:showErrorsProminently aktiv — beim Validieren ohne Pflichtfelder springt das Banner an und führt per Klick zum Feld.

Verhältnis Web ↔ Druck

Aspekt Web PDF
kc:pages Tab-Reihenfolge Seiten-Reihenfolge
kc:page Default-Page eines Feldes Welche PDF-Seite druckt es
kc:appearsOn Zusätzliche Tabs, auf denen das Feld läuft ignoriert
format / margins ignoriert A4/A3/Letter/…, Ränder in mm
icon / title Tab-Beschriftung + Tooltip PDF-Seitenkopf

So bleibt die Datenschicht eine — derselbe Datensatz erzeugt sowohl die mehrseitige Web-Erfassung als auch den mehrseitigen PDF-Druck, ohne dass Felder doppelt definiert werden müssen.