Die Widgets

Alles, was auf einem Bildschirm zu sehen ist, ist ein Widget. Die Palette Widgets links vom Canvas bringt 32 mitgelieferte Widgets mit — von dieser Seite gehen Sie mit dem Wissen weg, wofür jedes gut ist, und mit den wichtigsten im Detail erklärt. Hat die App von Ihnen programmierte Widgets, erscheinen sie in derselben Palette, im Abschnitt Benutzerdefiniert.

#Der Katalog nach Kategorie

#Formularfelder

Alle binden sich an ein Feld eines Datensatz-Datastores (Abschnitt Datenbindung) und nehmen an der Validierung teil — siehe die Formulare.

Widget	Wofür es gut ist
Textfeld	Einzeiliger Text. Hat Maske, den Modus Passwort (Text verbergen) und einen Platzhalter.
Textbereich	Langer, mehrzeiliger Text — Notizen, Beschreibungen.
Zahl	Numerische Werte.
Ja/Nein	Ein boolescher Schalter.
Auswahlliste	Auswahl aus Optionen: Feste Liste, Enum aus dem Modell oder Datastore; mit Durchsuchbar, Mehrfachauswahl und dem Modus Baum (hierarchisch).
Datum	Datum, Datum und Uhrzeit oder nur Uhrzeit (das Feld Typ entscheidet).
Farbe	Auswahl einer Farbe.
Datei-Upload	Upload per Ziehen und/oder Button, mit Vorschau, Größenbegrenzung und Wahl des Speichers.

#Aktionen und Navigation

Widget	Wofür es gut ist
Button	Die klassische Aktion. Anzeigen: Symbol + Text, Nur Symbol oder Nur Text; die Aktion beim Klick navigiert, öffnet ein Modal oder führt Code aus.
Menü-Button	Ein Button, der weitere Optionen öffnet. Aussehen: Geteilt (der Körper handelt, der Pfeil öffnet das Menü), Menü oder Hamburger. Jede Option kann sich über Bedingungen ausblenden oder deaktivieren.
Link	Klickbarer Text — Ziel: Bildschirm der App (mit Parametern) oder Externe URL (mit In neuem Tab öffnen).
Breadcrumb	Der „Sie sind hier“-Pfad, mit klickbaren Ebenen und einer letzten Ebene, die fest oder an ein Feld gebunden ist.
Export	Ein Button, der die Daten eines Datastores als Tabellenblatt (.xlsx) herunterlädt — gewählte Felder, optional Kopfzeile einschließen und Dateiname mit {date}.

#Struktur

Widget	Wofür es gut ist
Panel	Ein Container mit Rahmen und Titel — er ordnet Widgets, die sich fortan gemeinsam bewegen.
Tabs	Ein Container mit Registern; jedes Kind-Widget gehört zu einem Tab. Stil der Tabs: Kasten, Pillen oder Unterstrich.
Feste Leiste	Eine Leiste über die volle Breite, Oben oder Unten am Bildschirm angeheftet — für immer sichtbare Aktionsleisten.
Linie	Eine Trennlinie, Horizontal oder Vertikal — Farbe und Strich kommen aus dem Aussehen.

#Inhalt und Medien

Widget	Wofür es gut ist
Beschriftung	Einfacher Text — Titel, Bildunterschriften, einzelne Werte. Nimmt Werte im Satz an ({n} im Text).
Markdown	Reichhaltiger Text in Markdown geschrieben — fest oder aus einem Feld kommend.
Bild	Ein Bild über Feste URL, Asset der App oder Feld (dynamisch); Anpassung: Einpassen, Füllen oder Strecken.
Externe Seite	Bettet eine Seite von außen ein (eine Karte, ein Video, BI von Dritten) oder von Ihnen geschriebenes HTML. Läuft isoliert: Sie sieht weder die Sitzung noch die Daten der App.

#Daten

Widget	Wofür es gut ist
Tabelle	Das Grid der Datensätze — typisierte Spalten, Sortierung, Auswahl und Aktions-Buttons. Details unten.
Liste	Datensätze als vertikale Liste, mit Feldern in Rollen (Titel, Untertitel, Text, Beschriftung) und optionalem Bild.
Karten	Dieselbe Vorlage wie die Liste, aber als Kartenraster mit N Spalten.
Diagramm	Gezeichnete Serien — Balken, Linien, Kreise und mehr. Details unten.
KPI	Ein Streifen numerischer Indikatoren mit Trends, Ziel und Sparkline. Details unten.

#Boards und Planung

Widget	Wofür es gut ist
Kanban	Zwischen Statusspalten ziehbare Karten. Details unten.
Kalender	Ereignisse in den Ansichten Tag/Woche/Monat/Jahr. Details unten.
Gantt	Balken von Start→Ende mit Fortschritt, Gruppen und Abhängigkeiten. Details unten.

#Dokumente und Prozesse

Widget	Wofür es gut ist
Bericht	Zeigt einen Bericht der App (PDF) im Bildschirm, mit Parametern, die an das gebunden sind, was auf dem Bildschirm steht, und einer Aktionsleiste zum Aktualisieren und Herunterladen.
Status des Prozesses	Die Historie und der aktuelle Schritt der Workflows eines Datensatzes, mit Entscheidungs-Buttons, wenn die offene Aufgabe dem gehört, der zusieht.
Meine Aufgaben	Der Aufgabeneingang für Workflow-Aufgaben des angemeldeten Benutzers — er öffnet den Bildschirm der Aufgabe und entscheidet von dort.

#Die Tabelle

Die Tabelle ist das meistgenutzte Widget der Plattform: Sie bindet sich an einen Listen-Datastore und zeigt die Datensätze als Grid, mit Paginierung, Sortierung und Auswahl.

#Spalten

Wenn Sie den Datastore binden, entsteht eine Spalte je Feld. Danach feilen Sie: Nutzen Sie unter Spalten das + Spalte, um eine hinzuzufügen, und klicken Sie auf dem Canvas auf eine Spalte, um sie zu bearbeiten — der Inspektor wechselt zu ihr.

Jede Spalte hat Kopfzeile, Breite, Über die Kopfzeile sortierbar, Ausgeblendet — und einen Typ:

Typ	Was er tut
Text	Der Wert so, wie er ist, mit optionaler Maske (# = Zeichen).
Zahl	Formatiert den Wert: Zahl (regional) (mit Nachkommastellen, Tausendertrennzeichen, Kompakt — 1,2 Mio. statt 1 234 567 —, Präfix und Suffix) oder Maske (# = Ziffer).
Link	Die Zelle wird klickbar. Ziel: Bildschirm der App (mit Parametern aus Feld der Zeile, URL-Parameter oder Fester Wert) oder Skript — Ihr Code, der beim Klick läuft.
Bild	Zeigt das Bild, dessen Adresse/Inhalt im Feld steht.
Datei	Ein Download-Link zur Datei, auf die das Feld verweist.

#Aktionen der Tabelle

In der Kategorie Verhalten erzeugt der Aktionsabschnitt die CRUD-Buttons: Aktualisieren, Neu hinzufügen, Datensatz bearbeiten, Datensatz löschen und Mehrere löschen. Jede eingeschaltete Aktion erzeugt einen freien Button auf dem Canvas, der mit der Tabelle verknüpft ist — Sie positionieren und gestalten diesen Button wie jeden anderen.

• Neu hinzufügen und Datensatz bearbeiten öffnen einen Bildschirm oder ein Modal Ihrer Wahl (typischerweise das Formular des Datensatzes), mit den Parametern, die aus der Zeile gefüllt werden.
• Datensatz bearbeiten und Datensatz löschen sind nur mit einer ausgewählten Zeile aktiv; Mehrere löschen arbeitet über die Mehrfachauswahl (der Schalter, der die Spalte mit Kontrollkästchen hinzufügt).
• Die schreibenden Aktionen setzen voraus, dass der Datastore einen Primärschlüssel hat — der Inspektor weist darauf hin: Der Datastore braucht einen Primärschlüssel.

#Formulare (Eingaben + Datensatz + Validierung)

Es gibt kein Widget „Formular“: Ein Formular ist die Summe dreier Teile, und genau diese Freiheit lässt Sie das Datenblatt so entwerfen, wie Sie wollen.

1. Legen Sie einen Datensatz-Datastore auf dem Bildschirm an (siehe Datastores und Daten) — zum Beispiel conta, geladen über den Schlüssel, der aus dem Routen-Parameter id kommt.
2. Ziehen Sie die Formularfelder (Textfeld, Auswahlliste, Datum…) auf den Bildschirm und binden Sie bei jedem die Datenbindung an das richtige Feld des Datastores.
3. Setzen Sie einen Button „Speichern“, dessen Ereignis den Datastore speichert — die vordefinierte Aktion Datastore speichern des Ereignis-Editors schreibt den Code für Sie (siehe Ereignisse und das SDK).

Die Validierung lebt in jedem Feld, in der Kategorie Validierung:

• Erforderlich — das Feld muss ausgefüllt sein.
• Die Standardregeln: Min. Zeichen, Max. Zeichen, Ist E-Mail, Ist Telefonnummer, Ist Zahl, Min. Wert, Max. Wert, Muster (Regex) und Gleich dem Feld (Passwortbestätigung zum Beispiel).
• Validierung per Skript — für Ihre eigene Logik: Der Code bekommt value (den aktuellen Wert des Feldes) und gibt true zurück, wenn er gültig ist, oder die Fehlermeldung. Eine Steuernummer, eine IBAN, eine Geschäftsregel.

Beim Speichern läuft die Validierung vollständig: erst die Pflichtfelder, dann die Regeln, dann das Skript. Der Datensatz geht nur weiter, wenn alles besteht.

#Das Diagramm

Das Diagramm bindet sich an einen Datastore und zeichnet Serien. Unter Typ des Diagramms wählen Sie: Balken, Linie, Fläche, Kreis / Donut, Streuung, Radar, Gauge (Messanzeige), Trichter oder Heatmap.

Das Wesentliche ist die Zuordnung, in der Kategorie Daten:

• Kategoriefeld (X-Achse / Segmente) — was die Balken/Segmente trennt.
• Wertfelder — ein oder mehrere numerische Felder; jedes ist eine Serie.
• Serienfeld (Gruppierung) — als Alternative zu mehreren Werten: pivotiert nach dem ersten Wertfeld und erzeugt eine Serie je eigenem Wert (ohne Werte zählt es Datensätze).

Und danach die Feinarbeit:

Option	Was sie tut
Gestapelt, Horizontal, Weiche Linien, Werte an den Punkten	Varianten der Zeichnung, je nach Typ.
Legende, Position der Legende, Tooltip	Das Beiwerk des Diagramms. Die Legende lässt sich zum Positionieren auch direkt im Diagramm ziehen.
Format der Werte	Dasselbe Format wie bei den Zahlenspalten der Tabelle, angewendet auf Achsen, Beschriftungen und Tooltip.
Skala der Werte	Linear oder Logarithmisch — die logarithmische hilft, wenn sich die Serien um Größenordnungen unterscheiden.
Eine zweite Achse verwenden	Eine Achse rechts mit eigener Skala — um eine Summe in Euro und eine Anzahl im selben Diagramm zu vereinen.
Serien	Typ je Serie (Kombinationen aus Balken und Linien) und welche Serien auf die 2. Achse gehen.
Erweiterte Optionen	Ein Code-Editor mit allen Eigenschaften der Diagramm-Engine, mit Autovervollständigung — über die Konfiguration gelegt, für die Fälle, die die Felder nicht abdecken.

#Das KPI

Das KPI ist ein Streifen von Indikatoren — vier Zahlen nebeneinander macht man mit einem Widget mit vier Indikatoren, nicht mit vier Widgets: Ausrichtung und Abstände sind damit garantiert.

Jeder Indikator (unter Indikatoren ▸ Indikator hinzufügen) hat:

• Beschriftung und Symbol, mit Position der Beschriftung (Über dem Wert / Unter dem Wert).
• Wert (Feld) + Aggregation (Summe, Durchschnitt, Anzahl, Maximum, Minimum, Erster, Letzter) über die Datenmenge — oder einen Manueller Wert, wenn keine Daten gebunden sind.
• Trends (Trend hinzufügen) — Vergleiche unter der Zahl, mit Referenzfeld, dem Format Prozent oder Absoluter Wert und Weniger ist besser (Farben umkehren): Bei wachsenden Schulden muss der Pfeil rot sein.
• Ziel — Kein Ziel, Manueller Wert oder Feld der Datenquelle, mit optionalem Fortschrittsbalken.
• Sparkline anzeigen — die Mini-Linie der Historie, mit Feld der Serie.
• Zeitraum (aus dem Feld) — von welchem Abschluss die Zahl spricht (ein ISO-Datum wird als MM/JJJJ angezeigt).

Die Datenmenge teilt sich das Widget, aber jeder Indikator kann eine Eigene Datenmenge haben.

#Das Kanban

Das Kanban zeigt die Datensätze als Karten in Spalten — die Opportunity-Pipeline der Kundenverwaltung ist ein Kanban nach Status.

1. Binden Sie den Datastore und wählen Sie das Statusfeld (Spalte) — das Feld, das sagt, in welcher Spalte jede Karte steht.
2. Legen Sie die Quelle der Spalten fest: Statisch (Sie fügen jede Spalte mit Beschriftung, Wert und Farbe hinzu) oder Enum (die Spalten kommen aus den Werten eines Enums des Modells).
3. Setzen Sie die Vorlage der Karte zusammen — die Felder und Rollen, wie bei der Liste.

Mit eingeschaltetem Karten ziehen erlauben speichert das Verschieben einer Karte den neuen Status sofort am Datensatz. Feld der Reihenfolge (ein numerisches Feld) macht die Sortierung innerhalb der Spalte dauerhaft. Die Spalte „Ohne Kategorie“ fängt die Datensätze ein, deren Status zu keiner Spalte passt; Anzahl der Karten zeigt die Summe in der Kopfzeile.

Die Aktionen: Klick auf eine Karte (bearbeiten) und Karte erstellen (Button in der Spalte) — jede kann zu einem Bildschirm navigieren, ein Modal öffnen (mit den Parametern der Zeile und der Spalte) oder ein Ereignis für Ihren Code auslösen.

#Der Kalender

Der Kalender zeigt Datensätze mit Datum als Ereignisse, in den Ansichten Tag, Woche, Monat und Jahr.

• Felder: Datumsfeld (Start), Endfeld (optional) (mehrtägige Ereignisse), Titelfeld.
• Farbe der Ereignisse: Einheitlich oder Nach Feld — mit einer Zuordnung Wert → Farbe (ein Typ-Enum zum Beispiel).
• Ansicht: Startansicht, Verfügbare Ansichten, Erster Wochentag (Montag/Sonntag), Max. Ereignisse pro Tag in der Monatsansicht, die Stunden Start/Ende in den Tages-/Wochenansichten, Navigationsleiste und Buttons zum Ansichtswechsel.
• Aktionen: Klick auf ein Ereignis (bearbeiten) und Tag-/Zeitraumauswahl (erstellen) — Start und Ende gehen als Parameter an den Zielbildschirm, bereit, das Anlegeformular vorzufüllen.

Der Kalender lädt nur die Datensätze des sichtbaren Zeitraums — den Monat zu wechseln holt den neuen Monat, nicht die ganze Tabelle.

#Das Gantt

Das Gantt zeichnet Balken von Start→Ende auf einer Zeitachse — Projektplanung, Kampagnen, Kunden-Onboarding.

• Felder: Startfeld, Endfeld, Feld der Beschriftung, Fortschrittsfeld (0–100) und Gruppenfeld (gruppiert Zeilen).
• Feld der Abhängigkeiten — die IDs (Primärschlüssel) der Vorgänger, als JSON-Liste oder kommagetrennt; das Gantt zeichnet die Pfeile.
• Anfangs-Zoom (Tag, Woche, Monat), Heute-Linie und Wochenenden schattieren.
• Aktionen: Klick auf einen Balken (bearbeiten) und Klick auf leere Fläche (erstellen) — das angeklickte Datum geht als Parameter mit.

Das Gantt ist zum Lesen: Die Balken lassen sich nicht ziehen — die Daten werden im Formular des Datensatzes geändert.

#Warum nicht…?

• Warum erscheint der Abschnitt Validierung bei meinem Widget nicht? Nur Formularfelder validieren — ein Button oder eine Beschriftung haben keinen Wert zum Validieren.
• Warum erscheint das Widget in der Palette, ist aber grau auf dem Canvas? Es ist deaktiviert (Schalter Aktiv in der Kategorie Layout), oder eine Regel bzw. ein Ereignis hat es deaktiviert.
• Warum sehe ich keine Daten auf dem Canvas? Der Canvas zeigt Stichproben — die echten Daten erscheinen in der Vorschau und in der veröffentlichten App. Prüfen Sie die Bindung im Kapitel Datastores und Daten.