Hierarchische Darstellung im FileMaker WebViewer, ganz ohne Script

Artikel mit Einzelteilen in einem WebViewer anzeigen, aufklappbar, farblich hervorgehoben, und das Ganze nur mit zwei Formelfeldern.

Wer in FileMaker schon mal versucht hat, Daten aus zwei Tabellen in einem Portal darzustellen, kennt das Problem: Ein Portal zeigt immer nur Datensaetze einer Bezugstabelle. Artikel und deren Einzelteile in einer gemeinsamen, hierarchischen Liste? Geht nicht, zumindest nicht mit Bordmitteln (Geht schon, der Aufwand ist aber hoch).

Die Ausgangslage, aus Artikel möchte ich die zugehörigen Katalogteile sehen.

Die gaengigen Workarounds wie Hilfstabellen, Virtual Lists oder Anzeigetabellen funktionieren, bringen aber alle ihren eigenen Overhead mit. Wir haben uns fuer einen anderen Weg entschieden: HTML im WebViewer, komplett generiert durch FileMaker-Formelfelder.

Das Ergebnis

Der WebViewer zeigt eine kompakte, aufklappbare Stueckliste:

• Artikel als farbige Header-Zeilen mit Bezeichnung, Menge, Preis und Kategorie
• Einzelteile darunter eingerueckt, per Klick auf- und zuklappbar
• Farbliche Zuordnung: Artikel des aktuell ausgewaehlten Produkts erscheinen in Gold, alle anderen in dezentem Grau

Das Ganze aktualisiert sich automatisch, ohne Script-Trigger, ohne Ladevorgang.

Die Idee

Statt Daten per Script in einen WebViewer zu schaufeln, lassen wir FileMaker das HTML direkt in einem Formelfeld zusammenbauen. Der WebViewer zeigt dieses Feld einfach an. Aendert sich ein Datensatz, berechnet FileMaker das Feld neu, der WebViewer zeigt den aktuellen Stand.

Dafuer braucht es genau zwei Formelfelder und einen WebViewer auf dem Layout.

Aufbau

Formelfeld 1: Einzelteile als HTML

In der Artikel-Tabelle liegt ein ungespeichertes Formelfeld. Es holt sich per List() die Bezeichnungen und Mengen aller zugehoerigen Einzelteile und gibt sie als fertige HTML-Divs zurueck:

While (
  [
    ~bez = List ( Einzelteile::bezeichnung ) ;
    ~men = List ( Einzelteile::menge ) ;
    ~anz = ValueCount ( ~bez ) ;
    ~i = 1 ;
    ~html = ""
  ] ;
  ~i <= ~anz ;
  [
    ~html = ~html
      & "<div class='teil'>"
      & GetValue ( ~bez ; ~i )
      & "<span class='menge'>" & GetAsNumber ( GetValue ( ~men ; ~i ) ) & "x</span>"
      & "</div>" ;
    ~i = ~i + 1
  ] ;
  ~html
)

Das Ergebnis ist ein Textblock wie:

<div class='teil'>Schraube M6x20<span class='menge'>4x</span></div>
<div class='teil'>Duebel S8<span class='menge'>4x</span></div>

Ein wichtiger Punkt: Der Output darf keine Zeilenumbrueche enthalten. List() im uebergeordneten Feld trennt nach Absatzmarken — mehrzeilige Werte wuerden das Mapping durcheinanderbringen.

Formelfeld 2: Das komplette HTML

In der Angebots-Tabelle sitzt das zweite Formelfeld. Es sammelt per List() alle Artikeldaten ein — Bezeichnung, Menge, Preise, Kategorie und das HTML-Feld der Einzelteile — und baut daraus ein vollstaendiges HTML-Dokument mit eingebettetem CSS und JavaScript.

Der Kern ist eine While-Schleife, die jeden Artikel durchgeht:

// Fuer jeden Artikel pruefen: gehoert er zum aktiven Produkt?
~cls = If ( ~prod = ~aktivID ; "aktiv" ; "inaktiv" )

Aktive Artikel bekommen die CSS-Klasse aktiv und damit den goldenen Hintergrund. Inaktive bleiben grau. Gleichzeitig werden aktive Artikel standardmaessig aufgeklappt angezeigt, inaktive zugeklappt.

WebViewer

Der WebViewer auf dem Layout bekommt als URL einfach:

"data:text/html," & Angebot::wv_html_artikel_teile

Keine externe Datei, kein Script, kein Nachladen.

Das Auf- und Zuklappen

Ein kleiner JavaScript-Block im HTML sorgt dafuer, dass Klicks auf die Artikel-Zeile die zugehoerigen Einzelteile ein- oder ausblenden. Der Pfeil dreht sich dabei mit — eine CSS-Transition auf transform: rotate(90deg), gesteuert ueber eine Klasse.

function toggle(el) {
  var gruppe = el.closest('.gruppe');
  var teile = gruppe.querySelector('.teile');
  var pfeil = el.querySelector('.toggle');
  if (teile) teile.classList.toggle('offen');
  if (pfeil) pfeil.classList.toggle('offen');
}

Die Animation laeuft ueber max-height mit einer CSS-Transition — schlank und ohne externe Bibliotheken.

Warum kein Script?

Der naheliegende Weg waere: Ein Script baut JSON auf, uebergibt es per Perform JavaScript in Web Viewer an eine loadData()-Funktion im HTML. Das funktioniert, hat aber einen Nachteil: Man braucht Script-Trigger. Bei jedem Datensatzwechsel, nach jedem Aendern, nach jedem Loeschen muss das Script erneut laufen.

Mit Formelfeldern passiert das automatisch. FileMaker wertet ungespeicherte Formelfelder bei jedem Zugriff neu aus. Der WebViewer zeigt immer den aktuellen Stand, ohne dass jemand ein Script anstossen muss. Weiterer Hintergrund, da ich über Referenzen arbeite, werden niemals alle Formeln berechnet und FileMaker läuft weiterhin flüssig.

Was man noch draufsetzen kann

Die Basis steht, aber das HTML im WebViewer laesst sich beliebig erweitern:

Rueckgaben an FileMaker: Mit FileMaker.PerformScript() im JavaScript kann ein Klick auf einen Artikel oder ein Einzelteil ein FileMaker-Script ausloesen. So lassen sich Detail-Ansichten oeffnen, Datensaetze ansteuern oder Bearbeitungsdialoge starten — der WebViewer wird damit zur interaktiven Oberflaeche.

Farbcodes visuell darstellen: Statt den Farbcode als Text anzuzeigen, kann man ihn als farbigen Punkt rendern. Ein kleiner CSS-Kreis mit dynamischer background-color, gespeist aus einer Zuordnungstabelle oder direkt als Hex-Wert.

Suchfeld mit Live-Filter: Ein Eingabefeld im WebViewer, das per JavaScript die angezeigten Artikel und Teile in Echtzeit filtert. Keine erneute Berechnung noetig — das HTML ist schon da, JavaScript blendet nur aus.

Drag & Drop fuer Sortierung: Mit etwas mehr JavaScript lassen sich Artikel per Drag & Drop umsortieren und die neue Reihenfolge per Callback an FileMaker zurueckgeben.

Inline-Editing: Mengen oder Preise direkt im WebViewer aendern, ohne in ein FileMaker-Feld wechseln zu muessen. Der geaenderte Wert geht per FileMaker.PerformScript() zurueck in die Datenbank.

Fazit

Der WebViewer ist in FileMaker oft ein unterschaetztes Werkzeug. Fuer hierarchische Darstellungen, die mit Portal-Bordmitteln nicht machbar sind, bietet er eine elegante Loesung. Der Ansatz ueber Formelfelder haelt die Komplexitaet niedrig: kein Script-Management, keine Lade-Logik, keine Synchronisationsprobleme.

Zwei Formelfelder, ein WebViewer, fertig.

Ronny Schrader — MaRo-Programmierung GbR FileMaker-Entwicklung seit ueber 30 Jahren