Die Komponenten

Komponenten liegen in der Leiste links im Builder. Ziehen Sie eine auf die Seite und konfigurieren Sie sie im Bereich rechts.

Die elf auf einen Blick

Komponente	Landet bei	Gespeist von	Für
Datentabelle	volle Breite, 14 Zeilen	einem Bericht	eine Tabelle der Datensätze des Kunden
Kennzahl	Viertelbreite, 5 Zeilen	einem Bericht	eine Zahl, mit etwas, woran man sie misst
Diagramm	halbe Breite, 12 Zeilen	einem Bericht	eine Linie, Balken oder ein Kreis
Kalender	zwei Drittel, 16 Zeilen	einem Bericht	Termine, Aufträge, Fristen
Karte	halbe Breite, 12 Zeilen	einem Bericht	Orte, und Markierungen, die Kunden setzen können
Formular	halbe Breite, 12 Zeilen	einem Formular	den Kunden etwas schicken lassen
Button	6 Spalten, 2 Zeilen		zu einer Seite, einem Dialog oder einem Link
Überschrift	volle Breite, 2 Zeilen		ein Titel
Text	volle Breite, 4 Zeilen		ein Absatz
HTML	volle Breite, 8 Zeilen	Ihrem Markup	alles, was der Rest nicht kann
Dialog	nicht auf der Seite	Markup oder einem Formular	ein Dialog, den etwas anderes öffnet

Die fünf berichtsgespeisten Komponenten brauchen alle einen Bericht vom Typ Datentabelle, nie einen HTML-Bericht. Siehe Daten und Berichte.

Datentabelle

Eine Tabelle aus Zeilen, seitenweise, mit den Spalten und der Formatierung des Berichts.

Einstellung	Was sie bewirkt
Bericht	ein Datentabellen-Bericht. Pflicht
Datensatzlimit	Zeilen pro Seite. Standard 20
Sortierspalte	eine der Spalten des Berichts
Sortierrichtung	aufsteigend oder absteigend

Die Sortierung ist optional, und zwar beides zusammen: ein Bericht, der sich bereits selbst sortiert, braucht keine davon.

Eine Zelle wird so gezeichnet, wie der Bericht sie geschrieben hat, samt Formatierung und Links. Das ist meist genau richtig und hat eine Folge, die man prüfen sollte: ein für interne Nutzer gebauter Bericht enthält oft Links auf interne Bildschirme, die auf einem Portal zur Anmeldeseite führen. Ein Bericht für ein Portal will seine eigene Spaltenformatierung.

Kennzahl

Eine Zahl, mit etwas, woran man sie misst. Der Bericht liefert eine Zeile, und ihre Spalten füllen die Felder der Karte.

Einstellung	Was sie bewirkt
Bericht	ein Datentabellen-Bericht mit einer Zeile. Pflicht
Die Zahl	die Spalte mit dem Wert. Pflicht
Neben der Zahl	kurzer Text aus einer Spalte, etwa 6 Anträge
Verglichen mit	ein früherer Wert. Die Differenz wird für Sie berechnet
Ein Anstieg bedeutet	Es wird besser oder Es wird schlechter, damit ein Anstieg grün oder rot ist
Farbe	Neutral, Blau, Grün, Bernstein, Rot, Violett oder Aus einer Spalte
Farbe aus einer Spalte	Pflicht, sobald die Farbe aus dem Bericht kommt
Beim Klick auf die Karte	nichts, einen Dialog öffnen oder eine Seite öffnen

Drei Dinge, die man wissen sollte:

• Die Formatierung bleibt im Bericht. Rundung, Währungszeichen und Prozentzeichen sind Entscheidungen des Berichts, die Karte zeigt den Wert also genau so, wie er ankommt.
• Keine Zeile ist keine Null. Ein Bericht, der für diesen Kunden nichts liefert, zeichnet einen leeren Hinweis statt einer selbstbewussten 0.
• Die Karte ist die ganze Komponente. Ihr Name wird an ihrem oberen Rand gezeichnet, ein Name packt sie also nie in einen zweiten Kasten.

Öffnet ein Klick einen Dialog, reist die Berichtszeile mit, mit den Spaltennamen des Berichts als Schlüssel. Benennen Sie eine Spalte um, liest der Dialog einen anderen Schlüssel.

Diagramm

Ein Bericht, gezeichnet. Der Diagrammtyp wird zuerst gewählt, weil er entscheidet, welche der anderen Einstellungen gelten.

Einstellung	Gilt für
Bericht	alle. Pflicht
Diagrammtyp	Linie, Balken oder Kreis. Pflicht
Datensatzlimit	Linie, Balken. Standard 20
Sortierspalte und Sortierrichtung	Linie, Balken
Horizontale (x) Achse	Linie, Balken. Pflicht
Vertikale (y) Achse	Linie, Balken. Pflicht, und nimmt mehr als eine Spalte
Segmentbeschriftungen und Segmentwerte	Kreis. Beide Pflicht

Ein Kreisdiagramm blendet Limit und Sortierung bewusst aus: ein Segment liest sich als Anteil an einem Ganzen, die Top 20 von 200 Zeilen zu zeichnen würde also unter jedes Segment einen Prozentwert setzen, der sich auf etwas bezieht, wonach niemand gefragt hat.

Die vertikale Achse ist die eine Einstellung, die mehrere Spalten nimmt, denn ein Liniendiagramm, das zwei Messgrößen vergleicht, ist ein ganz gewöhnlicher Wunsch.

Diagramme werden von denselben Renderern gezeichnet wie die Dashboards des CRM, ein hier gezeichneter Bericht und derselbe Bericht auf einem Dashboard sehen also gleich aus.

Kalender

Termine, Aufträge, Verlängerungen und Fristen, aus einem Bericht.

Einstellung	Was sie bewirkt
Bericht	ein Datentabellen-Bericht. Pflicht
Terminname	die Spalte mit dem Titel. Pflicht
Beginnt am	die Datumsspalte. Pflicht
Beginnt um	die Zeitspalte. Leer gelassen, ist jeder Termin ganztägig
Endet am und Endet um	optional
Termin-ID	die eigene ID des Datensatzes, weitergereicht an das, was ein Klick öffnet
Farbe	eine Spalte, die eine CSS-Farbe liefert, etwa #0b84cf
Öffnet in	Monat, Woche oder Liste
Klick auf einen Termin	nichts, einen Dialog öffnen oder eine Seite öffnen

Datum und Uhrzeit sind getrennte Spalten, weil Berichte sie getrennt halten. Die Uhrzeit macht aus einer Zeile einen Zeitpunkt statt eines ganzen Tages, und das wird je Zeile entschieden, ein Kalender hält also berechtigterweise beides.

Der sichtbare Monat erreicht Ihren Bericht. Während der Kunde navigiert, steht der Bereich auf dem Bildschirm dem SQL des Berichts als {{ range.from }} und {{ range.to }} zur Verfügung, eine Terminabfrage kann also einen Monat auf einmal liefern statt der ersten paar hundert Zeilen von allem.

Öffnet ein Klick einen Dialog, reist der Termin mit, mit der Rolle als Schlüssel (id, title, start, end, startDate, startTime, endDate, endTime), das Umbenennen einer Berichtsspalte bricht den Dialog also nicht.

Karte

Orte als Markierungen, aus einem Bericht.

Einstellung	Was sie bewirkt
Bericht	ein Datentabellen-Bericht. Pflicht
Spalte Breitengrad und Spalte Längengrad	Pflicht
Spalte mit dem Namen der Markierung	optional
Spalte, die beim Klick auf eine Markierung erscheint	optional
Zoom	Standard 4
Überlappende Markierungen gruppieren	zeichnet gedrängte Markierungen als einen nummerierten Kreis
Kunden Markierungen setzen und bearbeiten lassen	macht aus der Karte ein Eingabefeld
Markierung an diese Adresse senden	Pflicht, sobald Markierungen aktiv sind
Spalte mit der Standort-ID	nötig, um bestehende Standorte zu bearbeiten

Eine Zeile, deren Koordinaten fehlen oder außerhalb des gültigen Bereichs liegen, wird verworfen statt gezeichnet, eine unvollständige Zeile setzt also keine Markierung in den Atlantik. Eine Karte zeigt bis zu 200 Markierungen und hat bewusst keine Seitennavigation: entweder wird jede Markierung auf einmal gezeichnet, oder das Bild lügt darüber, wo die Dinge sind.

Gesetzte Markierungen werden an einen dynamischen Endpunkt von Ihnen geschickt. Die Adresse wird auf dem Server gelesen und erreicht die Seite nie, niemand kann also von außerhalb des Portals erfundene Koordinaten dorthin schicken. Ihr Endpunkt erhält die Position, den Namen und die Beschreibung, die Standort-ID, falls es eine gibt, und wer angemeldet ist. Antworten Sie mit der ID des gespeicherten Datensatzes ({"id": 123}), und der Kunde kann diese Markierung danach bearbeiten.

Formular

Ein bestehendes Flexie-Formular, in die Seite gezeichnet.

Einstellung	Was sie bewirkt
Volle Breite, so hoch wie der Inhalt	empfohlen für alles außer dem kürzesten Formular
Formular	das anzuzeigende Formular. Pflicht

Nur veröffentlichte externe Formulare können verwendet werden. Ein internes Formular wird von Mitarbeitenden an einem geöffneten Datensatz ausgefüllt, es hat auf einem Portal also nichts, woran es sich öffnen könnte.

Das Formular weiß, wer angemeldet ist, Felder, die zum Datensatz des Kunden passen, sind also vorausgefüllt. Einreichungen kommen genau so an wie von Ihrer Website, jeder Workflow, der bereits auf dieses Formular hört, funktioniert also weiter. Siehe Formulare.

Button

Einstellung	Was sie bewirkt
Beschriftung	Pflicht
Tut	Öffnet eine Seite, Öffnet einen Dialog oder Öffnet einen Link
Seite, Dialog oder Adresse	was die Aktion eben braucht. Pflicht
Stil	Primär, Sekundär oder Link

Überschrift

Einstellung	Was sie bewirkt
Inhalt	der Text. Pflicht
Größe	Groß, Mittel oder Klein

Text

Einstellung	Was sie bewirkt
Inhalt	ein Absatz. Zeilenumbrüche bleiben erhalten

Eine Überschrift und ein Absatz sind ihr eigener Inhalt, keiner von beiden wird also in einen Bereich gezeichnet, bis Sie einem einen Namen geben, der eine Titelleiste braucht, in der er stehen kann.

HTML

Ihr eigenes Markup, auf dem Server gegen den angemeldeten Kunden gerendert.

Einstellung	Was sie bewirkt
Komponente rahmen	standardmäßig an. Schalten Sie es aus, und es gibt gar keinen Rahmen: die Seite zeigt exakt Ihr Markup
Volle Breite, so hoch wie der Inhalt	für ein Dokument, dessen Länge je Kunde variiert
Inhalt	das Markup, geschrieben im eingebauten Editor

Das ist der Notausgang, und er hat eine eigene Seite: HTML-Komponenten. Was dieses Markup aufrufen kann, steht in Die JavaScript-API.

Dialog

Ein Dialog. Er wird nicht auf einer Seite platziert: er liegt im Dialogfach und wird von etwas anderem geöffnet: einem Button, einem Kalendertermin, einer Kennzahlkarte oder Ihrem eigenen Skript.

Einstellung	Was sie bewirkt
Titel	Pflicht
Öffnet	Wenn etwas ihn öffnet, Sobald die Seite erscheint oder Bei einem benannten Ereignis
Ereignisname	Pflicht für das dritte
Breite	Standard oder Volle Breite
Inhalt aus	Hier geschrieben oder Einem Formular
Formular	Pflicht, wenn er ein Formular hält
Inhalt	Pflicht, wenn das Markup hier geschrieben wird

Genau eines der letzten beiden wird je abgefragt, und ein Dialog, der keines von beiden hält, ist der Konfigurationsfehler ohne Symptom auf der Seite: er liegt fertig aussehend im Fach, und der Erste, der ihm begegnet, ist ein Kunde, der etwas anklickt und einen leeren Dialog bekommt. Veröffentlichen wird verweigert, solange einer in diesem Zustand ist, und das Fach markiert ihn.

Ein Dialog wird bei jedem Öffnen neu geladen, er zeigt also immer aktuelle Daten, und sein Skript sieht immer die Parameter, mit denen er geöffnet wurde.

Welche, für die häufigen Wünsche

Der Wunsch	Die Komponente
"Meinen Kunden ihre Rechnungen zeigen"	Datentabelle
"Ihren Saldo nach oben stellen"	Kennzahl
"Die Ausgaben über das Jahr zeigen"	Diagramm
"Ihre nächsten Termine zeigen"	Kalender
"Sie sagen lassen, wohin geliefert wird"	Karte mit aktiven Markierungen
"Sie etwas anfragen lassen"	Formular
"Ihnen ein Dokument aus ihren eigenen Daten zeigen"	HTML, volle Höhe
"Sie aus einer Zeile eine Detailansicht öffnen lassen"	Dialog, per Klick geöffnet