Direkt zum Hauptinhalt

Ein Dashboard auf einen gezeichneten Bildschirm bringen

Ziel​

Die Seite, die früher ein Dashboard war – Zahlen, Diagramme, ein Raster aus Datensätzen und ein Formular, um einen hinzuzufügen –, als Bildschirm bauen, den Sie gezeichnet haben.

Warum es das gibt​

Ein Dashboard besteht aus Kacheln, Zahlen, Diagrammen und ein paar eingebetteten Datensatzflächen. Ein gezeichneter Bildschirm hatte die ersten beiden und keins der letzten beiden, also hat er jetzt beides: ein Steuerelement Diagramm und ein Steuerelement Tabellenansicht oder Formular.

Was Sie gegenüber dem Dashboard-Artefakt gewinnen: Das Layout gehört Ihnen. Die Kacheln sind gewöhnliche Kästen, sie können also jede Größe und jede Farbe haben und jeden gezeichneten Zustand tragen; und die Seite kann navigieren, Overlays öffnen und Handler ausführen, denn sie ist ein Bildschirm.

Was Sie aufgeben, ist der Abfrage-Generator pro Widget aus dem Kachel-Designer. Eine Zahl ist hier ein einziges loadRecords – dieselbe Zeile, die jeder andere Studio-Bildschirm schreibt.

Eine Zahl ist eine gezählte Abfrage​

loadRecords("par_ticket", "probe", {
  top: 1,
  where: { par_status: 100000002 },
  countInto: "statusActive"
});

In countInto landet, wie viele Zeilen übereinstimmen – nicht, wie viele zurückkamen. top: 1 hält das ehrlich: Die Zählung läuft über alles, und die Seite, die niemand liest, ist so klein, wie eine Seite nur sein kann. probe ist ein Zustandsfeld, das Sie einmal deklarieren und nie ansehen.

Zeichnen Sie dann einen großen Text, und binden Sie seinen Text an text(state.statusActive).

Zählen, was fehlt. where vergleicht nur auf Gleichheit, daher ist „die, bei denen ein Feld leer ist“ eine eigene Option, empty: eine Liste von Feldern, die keinen Wert haben dürfen.

loadRecords("pbo_position", "probe", {
  top: 1,
  where: { state: 0 },
  empty: ["pbo_currentoccupant"],
  countInto: "vacant"
});

Das zählt die offenen Positionen, auf denen niemand sitzt. Es ist dieselbe Bedingung wie der Filter ist leer einer Ansicht, sodass eine Kachel und die Liste daneben übereinstimmen.

Ein Diagramm​

Legen Sie Komponenten → Diagramm ab. Auf der Registerkarte App:

  • Diagramm – Balken, gestapelte Balken, Linie, Fläche, Kreis oder Ring.

  • Wert – eine Liste von { label, value }:

    [
      { label: "New", value: state.statusNew },
      { label: "Active", value: state.statusActive },
      { label: "Resolved", value: state.statusResolved }
    ]

Das Diagramm gehört der Plattform selbst und ist keine Zeichnung. Das ist wichtiger, als es klingt: Das Schwierige an einem Diagramm sind die Wahl der Achsenstriche, überlappende Beschriftungen und die Daten, gegen die niemand entworfen hat – ein Ergebnis ohne Zeilen, ein Ausreißer, der vierhundertmal so groß ist wie der Rest, eine Kategorie mit neunzig Zeichen. Das wird bei jedem Rendern entschieden. Bei einem Diagramm, das Sie gezeichnet hätten, wäre es einmal entschieden, von Ihnen, anhand der Beispieldaten vor Ihnen: richtig im Designer und falsch in der Produktion.

Schreiben Sie die Worte in das Steuerelement. Jeder Text, den Sie in ein Diagramm zeichnen, wird zu seinem barrierefreien Namen – ohne ihn kündigt ein Screenreader „Grafik“ an und sonst nichts. Er wird nicht über das Diagramm gezeichnet; ein sichtbarer Titel gehört in den Bereich darüber.

Es gibt keine zweite Achse, und es wird keine geben. Zwei Messgrößen auf zwei Skalen in einem Rahmen laden zu einem Vergleich ein, den die Geometrie nicht hergibt. Zwei Messgrößen unterschiedlicher Größenordnung sind zwei Diagramme.

Ein Raster oder ein Formular aus einer Tabelle​

Legen Sie Komponenten → Tabellenansicht oder Formular ab. Auf der Registerkarte App:

FeldBedeutung
ZeigtDie Zeilen einer Ansicht, Ein Formular für einen neuen Datensatz oder Ein Formular für einen Datensatz
Tabelleaus den Tabellen der Umgebung gewählt – tippen Sie, um nach Name oder logischem Namen zu filtern
Ansicht / Formularaus den Ansichten oder Formularen dieser Tabelle gewählt, oder Standard der Tabelle

Was erscheint, ist das Original: das modellgesteuerte Raster mit eigener Sortierung, eigener Seitennavigation, eigener Spaltenauswahl und eigenen Berechtigungen pro Datensatz; oder das eigene Schnellerfassungsformular der Tabelle, mit seinen Pflichtregeln und seinen Plug-in-Schritten. Nichts daran wird neu gezeichnet, und deshalb ist ein Feld, das in der Tabelle erforderlich ist, auch hier erforderlich.

Ein Formular für einen Datensatz nimmt den Datensatz aus seiner Bindung Wert – eine ID, meist aus etwas, das jemand auf demselben Bildschirm ausgewählt hat.

Schritte​

  1. Zeichnen Sie die Seite: eine Überschrift, eine Reihe von Kacheln, Bereiche für die Diagramme und Bereiche für die Flächen.
  2. Deklarieren Sie den Zustand – ein Feld pro Zahl, plus probe.
  3. Legen Sie jede Zählabfrage in den Handler Geladen des Bildschirms und dieselben Zeilen hinter eine Schaltfläche Aktualisieren.
  4. Legen Sie die Diagramme und die Flächen ab, und füllen Sie ihre Felder aus.
  5. Geben Sie jedem Objekt Einschränkungen, damit die Seite das Fenster füllt – die Kacheln verteilen sich, die Diagramme und die Flächen halten ihre Kanten.

Zuerst das Beispiel importieren​

Studio — Dashboard ist genau diese Seite, fertig gebaut. Importieren Sie es, drücken Sie Add 24 tickets, und betrachten Sie jedes Steuerelement im Designer neben seinem Ergebnis in der Shell.

Fehlerbehebung​

  • Die Fläche sagt, sie wisse nicht, welche Tabelle. – Das Feld Tabelle ist leer. Speichern warnt davor, statt es abzulehnen, damit Sie später fertig werden können.
  • Die Fläche sagt, es gebe keine solche Tabelle. – Die Tabelle wurde gelöscht, seit sie gewählt wurde, oder die App wurde in eine Umgebung importiert, die sie nicht hat. Das Feld Tabelle zeigt noch den alten Namen; wählen Sie eine, die die Umgebung hat.
  • Die Fläche sagt, dieser Host könne keine modellgesteuerte Fläche anzeigen. – Sie sehen die Vorschau des Designers, hinter der keine Umgebung steht. Öffnen Sie die App in der Shell.
  • Das Diagramm ist leer. – Sein Wert ist keine Liste von { label, value }. Eine Zeile, die nicht diese Form hat, wird verworfen statt als Null dargestellt, eine falsche Form zeigt sich also als fehlender Balken.
  • Die Zahlen bewegen sich nicht, nachdem ich einen Datensatz hinzugefügt habe. – Nichts hat die Abfragen erneut ausgeführt. Legen Sie sie hinter eine Schaltfläche Aktualisieren, oder führen Sie sie in dem Handler erneut aus, der den Datensatz geschrieben hat.
  • Die Zahlen haben sich bewegt, das eingebettete Raster aber nicht. – Eine eingebettete Fläche ist das eigene Raster oder Formular der Plattform, und ihr gehört ihre Abfrage, sodass das erneute Ausführen Ihrer Abfragen sie nicht berührt. Beenden Sie den Handler mit reloadSurfaces(), das jede eingebettete Tabelle und jedes Formular auf dem Bildschirm neu anzeigt. Tun Sie das sowohl in dem Handler, der die Datensätze erstellt hat, als auch in Aktualisieren – vierundzwanzig neue Zeilen mit einer leeren Tabelle daneben sind das Verwirrendste, was ein Dashboard tun kann.

Verwandte Szenarien​