Eigene HTML-Widgets

Wenn die eingebauten Widgets und die sechs Berichts-Visualisierungen nicht ausreichen, ziehen Sie einen HTML-Bericht als Widget hinein. Der HTML-Bericht kann alles, was HTML kann, und zusammen mit dem vollen Flexie-Scripting-Werkzeugkasten bauen Sie jedes Widget, das Sie sich vorstellen können.

So funktioniert es

Sie erstellen einen HTML-Bericht (Berichte → Neu → Ausgabeformat = HTML) mit einem Template, das genau das Layout erzeugt, das Sie möchten: KPI-Karten, eigene Diagramme, mehrteilige Raster, was auch immer.
Sobald dieser Bericht veröffentlicht ist, erscheint er im Menü „Widget hinzufügen" des Dashboards unter Berichte, genau wie ein Datengitter-Bericht, aber mit einem eigenen Subtyp: HTML.
Wenn Sie ihn als Widget hinzufügen, sind keine weiteren Visualisierungsentscheidungen nötig (keine Achsen, keine Wertespalten). Das gesamte gerenderte Template ist das Widget.

Das Widget rendert sein HTML innerhalb seiner Kachel auf dem Dashboard. Innerhalb dieser Kachel ist alles möglich: Ihre Styles, Ihr JavaScript, Ihre eigenen Mini-Diagramme.

Warum das wichtig ist

Die eingebaute Diagramm-Engine des Dashboards rendert Linie, Balken, Kreis und Funnel. Das ist bereits eine Menge. Aber wenn Sie wollen:

Drei KPIs in einer Kachel. Vertrieb, Leads, NPS nebeneinander, jeder mit eigener Farbe und eigenem Trendpfeil.
Eine Heatmap, eine Treemap, ein Sankey-Diagramm, alles außerhalb von Linie/Balken/Kreis/Funnel.
Ein eigenes Layout, eine Tabelle links, ein Diagramm rechts, Beschriftungen darunter.
Ein „Kanban-als-Widget", Spalten aus Ihren Daten gezeichnet.
Ein Live-Statusboard, farbcodierte Karten mit bedingter Formatierung.
Eingebettete Medien, eine PDF-Vorschau, ein Video, eine Bildergalerie, gesteuert von Ihren Daten.

…nichts davon passt in einen vordefinierten Visualisierungstyp. Mit einem HTML-Widget ist die Visualisierung genau das, was Sie schreiben, einschließlich des Einbindens von Diagrammbibliotheken Dritter über ein <script src="…">.

Ein Beispiel aus der Praxis: eine Drei-fach-KPI-Kachel

Ein einziges Widget, das drei KPIs nebeneinander zeigt, jeden mit eigener Farbe und einer kleinen Beschriftung.

Schritt 1: den HTML-Bericht erstellen

Berichte → Neu → Ausgabeformat = HTML. Fügen Sie dies in das Template-Feld ein:

<style>
  .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .kpi     { padding: 1rem; border-radius: 8px; color: #fff; text-align: center; }
  .kpi.green  { background: #16a34a; }
  .kpi.blue   { background: #1d4ed8; }
  .kpi.orange { background: #ea580c; }
  .kpi-num  { font-size: 2rem; font-weight: 700; line-height: 1; }
  .kpi-lbl  { font-size: .75rem; opacity: .9; margin-top: .35rem;
              text-transform: uppercase; letter-spacing: .04em; }
</style>

<div class="kpi-row">
  <div class="kpi green">
    <div class="kpi-num">{{ findCount("deal", "is_won", 1) }}</div>
    <div class="kpi-lbl">Won deals (all-time)</div>
  </div>
  <div class="kpi blue">
    <div class="kpi-num">{{ findCount("lead", "is_published", 1) }}</div>
    <div class="kpi-lbl">Active leads</div>
  </div>
  <div class="kpi orange">
    <div class="kpi-num">{{ findCount("case", "status", "open") }}</div>
    <div class="kpi-lbl">Open cases</div>
  </div>
</div>

Nennen Sie ihn „Quick KPIs", speichern, veröffentlichen.

Dashboard → Widget hinzufügen → Kategorie Berichte → Quick KPIs auswählen. Setzen Sie die Widget-Größe z. B. auf 50 % × 215px. Speichern.

Das Dashboard hat nun eine Drei-fach-KPI-Kachel, die bei jeder Aktualisierung Live-Zählungen abruft.

Was Sie darin verwenden können

Alles, was Flexie Scripting bietet, steht zur Verfügung, siehe HTML-Berichte: Was das Template nutzen kann für die vollständige Liste. Am nützlichsten für Widgets:

findCount(...) / findSum(...), Aggregate direkt aus der Datenbank, ideal für „große Zahl"-Kacheln.
query("SELECT ..."), wenn Sie eine kleine Liste von Zeilen für ein eigenes Layout brauchen.
getDealStats, getInvoiceStats, getCaseStats, Kennzahlenbündel für eine Entität, in einem einzigen Aufruf zurückgegeben.
now(), date(...), dateAdd(...), für Beschriftungen und „letzte X Tage"-Fenster.
formatCurrency, numberFormat, truncate, für präsentable Werte.
qrCode, betten Sie einen live aktualisierten, datengetriebenen QR-Code in ein Widget ein.

Für eine Liste von Datensätzen, die Sie als eigenes Layout rendern:

{% set hot = query("
  SELECT name, amount, stage_id
  FROM   deals
  WHERE  is_won = 0 AND is_lost = 0
  ORDER  BY amount DESC
  LIMIT  5
") %}

<h3>Hot deals</h3>
<ul style='margin: 0; padding-left: 1.2rem;'>
  {% for d in hot %}
    <li>{{ d.name }} — {{ d.amount | number_format(0) }}</li>
  {% endfor %}
</ul>

Ein eigenes Diagramm hinzufügen

Sie können jede beliebige JavaScript-Diagrammbibliothek per <script src> einbinden und ihr Daten direkt aus einem query(...) zuführen:

<div id="chart" style="height: 220px;"></div>
<script src="https://cdn.example.com/some-chart-lib.min.js"></script>
<script>
  const data = {{ query("
    SELECT month, sales
    FROM   monthly_sales
    WHERE  year = 2026
    ORDER  BY month
  ") | json_encode | raw }};

  new SomeChartLib(document.getElementById('chart'), {
    type: 'heatmap',
    data
  });
</script>

| json_encode | raw ist der sichere Weg, einen serverseitig berechneten Wert in einen <script>-Block einzubetten. Es erzeugt ein korrekt escaptes JSON-Literal, das das JavaScript nicht durch Anführungszeichen, Zeilenumbrüche oder nicht druckbare Zeichen zerstören kann. Siehe den Hinweis zur Sicherheit.

Größe und Aktualisierung

Eigene HTML-Widgets folgen demselben Größenmodell wie jedes andere Widget: Wählen Sie eine Breite (25 / 50 / 75 / 100%) und eine Höhe (einen voreingestellten Pixelwert oder Auto, um mit dem Inhalt mitzuwachsen). Verwenden Sie Auto, wenn die natürliche Höhe Ihres HTML unvorhersehbar ist; wählen Sie eine feste Höhe, wenn die Kachel sich in eine Reihe mit gleicher Höhe wie ihre Nachbarn einfügen soll.

Derselbe Cache-Lebensdauer-Mechanismus gilt. Setzen Sie sie niedriger für KPI-Kacheln, die sich live anfühlen sollen, höher für monatliche Zusammenfassungen.

Für eine der eingebauten Visualisierungen: Linie, Balken, Kreis, Funnel mit einem Bericht-Widget ist weit einfacher, als es in HTML nachzubauen.
Wenn dieselbe einfache Kennzahl bereits ein eingebautes Widget ist: Nutzen Sie das eingebaute. HTML-Widgets sind aufwendiger in der Pflege.
Für sehr große Datensätze: Die Obergrenze von 1.000 Zeilen gilt auch für query(...) und Verwandte innerhalb des Templates. Aggregieren Sie vor dem Rendern.

Sicherheit & Pflege

Behandeln Sie HTML-Widgets wie Code:

Beschränken Sie, wer sie bearbeiten darf. Ein Nutzer mit dem Bearbeiten-Recht auf Berichten kann beliebiges JavaScript in eine Kachel legen, das jeder andere Betrachter ausführt.
Immer | json_encode | raw für alles, was Sie in <script> einfügen.
Escapen Sie immer alles, was Sie in href oder src einfügen, mit url_encode.
Fügen Sie keine undurchsichtigen Code-Schnipsel Dritter ein, die Sie nicht verstehen.

Siehe HTML-Berichte: Sicherheit für die ausführlichere Behandlung.

Nächste Schritte

Layout & Freigabe: Größe, Reihenfolge, Caching, öffentliche Freigabe.
Berichte: HTML-Berichte: die Datenquellen-Seite des Ganzen.