Manchmal entstehen die schönsten Lösungen aus einer simplen Frage: „Kann ich aus meiner Farbtabelle im WebViewer die Farbe anzeigen lassen?"

Bildschirmfoto 2026-03-01 um 14.56.09.

Was harmlos klingt, führte zu einer kompakten aber richtig nützlichen Lösung, vollständig in einer einzigen FileMaker-Calculation, ohne Plugin, ohne externe Datei.

Die Ausgangssituation

In einer Produktdatenbank gibt es eine Tabelle mit Lackfarben. Gespeichert sind Farbname, Farbnummer und Kategorie, klassisch eben. Die Farbnummern folgen dem Schema FST6002, was nichts anderes bedeutet als RAL 6002 (Laubgrün). Das ist der entscheidende Kniff: Die RAL-Nummer steckt direkt in der Farbnummer drin.

RAL-Farben haben definierte HEX-Werte. Also lässt sich aus FST6002 direkt #2D572C ableiten – kein manuelles Nachschlagen, kein externes API.

Der WebViewer-Ansatz

Der Plan: Ein WebViewer zeigt eine komplette Farbgalerie mit Suchfunktion, Kategoriefilter und Detailansicht. Klick auf eine Farbe öffnet die Detailansicht, von dort kann per Button ein FileMaker-Script aufgerufen werden – mit der Farbnummer als Parameter.

Die gesamte Logik steckt in einer einzigen Calculation:

"data:text/html,<!DOCTYPE html><html>..."

Kein GetAsURLEncoded, kein externes File. Einfach ein langer String.

Der entscheidende Trick: Einfache Anführungszeichen

Hier lauert die häufigste Falle beim WebViewer mit data:text/html. FileMaker erwartet den HTML-Inhalt als String in doppelten Anführungszeichen. Sobald im HTML selbst doppelte Anführungszeichen auftauchen (und HTML ist voll davon), gibt es Probleme.

Die Lösung ist denkbar einfach: Das gesamte HTML ausschließlich mit einfachen Anführungszeichen schreiben.

<div style='background:#2D572C;border-radius:50%'>●</div>

Statt:

<div style="background:#2D572C;border-radius:50%">●</div>

Auch GetAsURLEncoded entfällt komplett – FileMaker rendert den data:text/html-String direkt, solange keine doppelten Anführungszeichen darin stecken.

Das RAL-Mapping

Das Herzstück ist ein JavaScript-Array mit allen 231 RAL-Farben direkt im HTML:

var F=[
  {n:'Laubgrün', r:'FST6002', k:'RAL', h:'#2D572C'},
  {n:'Seidengrau', r:'FST7044', k:'RAL', h:'#CAC4B0'},
  // ...
];

Das Array wird beim Generieren der Calculation einmalig aus einer Tabelle und dem RAL-Mapping aufgebaut. Farben ohne definierten HEX-Code (Holzdekore, Sonderfarben) zeigen ein Schraffur-Muster.

FileMaker-Script aus dem WebViewer aufrufen

In der Detailansicht gibt es einen „Übernehmen"-Button. Per JavaScript wird direkt ein FileMaker-Script aufgerufen:

function fmScript(){
  var nr = document.getElementById('snr').textContent;
  if(typeof FileMaker != 'undefined'){
    FileMaker.PerformScript('Farbe_Uebernehmen', nr);
  }
}

FileMaker.PerformScript() ist die offizielle Schnittstelle zwischen WebViewer und FileMaker. Der zweite Parameter ist der Script-Parameter – hier die Farbnummer, die im Script dann per Get(ScriptParameter) abgerufen wird.

Der Farbkreis in Listen und Portalen

Bildschirmfoto 2026-03-01 um 15.02.33.

Als Bonus lässt sich aus der Farbnummer auch ein farbiger Kreis direkt in FileMaker-Layouts erzeugen, ganz ohne WebViewer (Kein WebViewer in FileMaker-Ausschnitten). Eine Berechnungsformel mit Falls und RGB():

SetzeVar ( [
  farbnr = Farben::FarbNr ;
  rgb = Falls (
    farbnr = "FST6002" ; RGB ( 45 ; 87 ; 44 ) ;
    farbnr = "FST7044" ; RGB ( 202 ; 196 ; 176 ) ;
    // alle 231 Einträge...
    RGB ( 180 ; 180 ; 180 )
  )
] ;
  TextFarbe ( "●" ; rgb )
)

Das ● Zeichen erscheint dann direkt in der Listenansicht oder im Portal in der korrekten RAL-Farbe. Klein, schnell, effektiv.

Fazit

Die fertige Lösung braucht keine externen Ressourcen, keinen Server, kein Plugin. Der WebViewer rendert eine vollständige Single-Page-App aus einem einzigen FM-String heraus. Die Kombination aus RAL-Mapping, einfachen Anführungszeichen und FileMaker.PerformScript() macht daraus ein vollwertiges Farbauswahl-Tool.

Manchmal sind die elegantesten Lösungen die, die aus einer schlichten Frage entstehen.