FileMaker bietet von Haus aus keine native Möglichkeit, Markdown-Text in Formatsortierungen umzuwandeln oder direkt auf Layouts darzustellen. Eine elegante Lösung ist der Einsatz eines Web Viewers mit der JavaScript-Bibliothek marked.js.
Wer diesen Weg wählt, stößt jedoch schnell auf seltsame Darstellungsfehler: Abbrüche im Text, ungewollte Absatzzeichen (¶) oder JavaScript-Syntaxfehler.
In diesem Beitrag zeigen wir, wo die Stolpersteine liegen und wie die beste Lösung aussieht.
Das Problem: Mehrzeiliger Text in JavaScript
Ein typischer Ansatz für das Rendern im Web Viewer sieht so aus:
const markdownText = " & Quote ( Table::MarkdownField ) & ";Das führt zu Problemen:
- Zeilenumbrüche zerbrechen den JS-Code: Standard-Strings in JavaScript (
"...") dürfen sich nicht über mehrere Zeilen erstrecken. Da Markdown nativ Zeilenumbrüche enthält, bricht das Parsing mit einemUncaught SyntaxErrorab. Quote()ist unflexibel: Die Funktion maskiert den Text zwar für FileMaker, erzeugt in Kombination mit Zeilenumbrüchen aber ungültigen JS-Code.
Die Lösung: JavaScript Template Literals
Die sauberste Lösung nutzt Backticks (`) in JavaScript. Backticks ermöglichen mehrzeilige Strings (Template Literals) ohne Escaping-Probleme.
1. Web Viewer Formel
Setze folgende Berechnung in deinen Web Viewer (oder deine Web-Viewer-Variable):
"data:text/html,<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'></script>
<style>
body { font-family: system-ui, -apple-system, sans-serif; padding: 12px; margin: 0; line-height: 1.5; }
code { background-color: #f4f4f4; padding: 2px 4px; border-radius: 4px; font-family: monospace; }
pre code { display: block; padding: 8px; overflow-x: auto; font-family: monospace; }
blockquote { border-left: 4px solid #ccc; margin-left: 0; padding-left: 16px; color: #666; }
</style>
</head>
<body>
<div id='content'></div>
<script>
const markdownText = \`" & Table::MarkdownField & "\`;
document.getElementById('content').innerHTML = marked.parse(markdownText);
</script>
</body>
</html>"Zusatz-Tipp: Kontextverlust in Popovern vermeiden
Soll der Web Viewer in einem Popover innerhalb eines Ausschnitts (Portal) liegen, greift FileMaker beim Aufrufen oft fälschlicherweise auf den ersten Datensatz der Relation zu.
Lösung per Skript-Trigger:
- Vergib für den Web Viewer einen Objektnamen (z. B.
wv_markdown). - Erstelle ein Skript beim Trigger
OnPopoverEnter:
Setze Variable [ $$markdown_content ; Wert: RelatierteTabelle::MarkdownFeld ]
Objekt aktualisieren [ Objektname: "wv_markdown" ]3. Ersetze das Feld in der Web-Viewer-Berechnung durch $$markdown_content:
const markdownText = \`" & $$markdown_content & "\`;Damit wird der Inhalt dynamisch aus der aktiven Portalzeile übergeben und der Web Viewer rendert das Markdown korrekt.