Beispiel Fleet-Management-Dashboard
Beispiel Fleet-Management-Dashboard
Dieses Beispiel zeigt ein Dashboard mit zwei Ansichten:
- einem Root-State mit einer Geräteübersicht als Tabelle
- einem Details-State mit einer Detailansicht für das ausgewählte Gerät
Der Aufbau eignet sich für Flotten, Gerätegruppen oder Anlagenlisten, bei denen zunächst mehrere Geräte gemeinsam angezeigt und anschließend einzelne Geräte im Detail betrachtet werden sollen.
Das Beispiel kann in gleicher Weise ausgeweitet werden auf eine beliebige Menge and Geräten/Aliases/States/Actions.
Schritt 1: Dashboard anlegen
Zunächst wird ein neues Dashboard erstellt, hier mit dem Namen Fleet Management Dashboard.
Schritt 2: Alias für die Flotte erstellen
Als Erstes wird ein Alias für alle Geräte der Flotte angelegt. Im Beispiel heißt dieser Alias Fleet.
Wichtige Eigenschaften:
- Alias-Name: Fleet
- Resolve as multiple entities ist aktiviert
- Gruppentyp: Entity list
- ausgewählte Geräte: DemoDevice_1 und DemoDevice_2
Dieser Alias dient später als Datenquelle für die Übersichtstabelle.
Schritt 3: Alias für die Detailansicht erstellen
Anschließend wird ein zweiter Alias mit dem Namen Details erstellt.
Wichtige Eigenschaften:
- Alias-Name: Details
- Gruppentyp: Entity from dashboard state
- Fallback-Gerät im Beispiel: DemoDevice_1
Dieser Alias löst immer das Gerät auf, das aktuell über den Dashboard-State übergeben wurde. Dadurch kann derselbe Details-State später für unterschiedliche Geräte wiederverwendet werden.
Schritt 4: Details-State anlegen
Damit das Dashboard zwischen Übersicht und Detailansicht wechseln kann, wird ein zweiter State angelegt. Im Beispiel heißt er DetailsState.
Danach gibt es zwei States:
- den Root-State als Startansicht
- den DetailsState als Ziel für die Detailnavigation
Über die State Auswahl oben links (neben der Zeitfenster Auswahl) kann man in den soeben erstellten Details State wechseln. Direkt nach dem Anlegen ist der Details-State noch leer.
Schritt 5: Tabelle im Root-State hinzufügen
Im Root-State wird nun ein Tabellen-Widget eingefügt, im Beispiel eine Entities Table.
Als Datenquelle wird der Alias Fleet verwendet.
Damit zeigt die Tabelle alle Geräte an, die im Fleet-Alias enthalten sind.
Schritt 6: Zeilenaktion zur Navigation konfigurieren
Damit ein Klick auf eine Tabellenzeile in die Detailansicht wechselt, wird im Tabellen-Widget unter Actions eine Aktion angelegt.
Die Aktion wird wie folgt konfiguriert:
- Action source: On row click
- Type: Navigate to the new dashboard state
- Target dashboard state: detailsstate
- Set entity from widget bleibt aktiviert
Der letzte Punkt ist entscheidend: Das angeklickte Gerät aus der Tabellenzeile wird dadurch an den Ziel-State übergeben. Der Alias Details kann dieses Gerät anschließend automatisch auflösen.
Schritt 7: Chart im Details-State hinzufügen
Nun wird in den DetailsState gewechselt und dort ein Chart-Widget angelegt.
Als Datenquelle wird diesmal nicht der Fleet-Alias, sondern der Alias Details verwendet.
Im Beispiel wird der Kanal Temperature angezeigt.
Optional: Dynamisches Label für die Legende
Für ein besser lesbares Chart kann der Data-Key angepasst werden.
Als Label wird im Beispiel gesetzt:
${entityName} Temperature
Dadurch erscheint später in der Legende nicht nur der Kanalname, sondern auch der Name des aktuell ausgewählten Geräts.
Schritt 8: Home-Button für die Rücknavigation anlegen
Zusätzlich wird im Details-State ein Button-Widget eingefügt, das zurück zur Übersicht führt.
Die Aktion wird wie folgt gesetzt:
- Action source: widget-action.body-click
- Type: Navigate to the previous dashboard state
Damit springt das Dashboard beim Klick auf den Button wieder in den zuvor geöffneten State zurück.
Ergebnis
Nach dem Speichern zeigt der Root-State die Geräteübersicht:
Ein Klick auf DemoDevice_1 öffnet den Details-State mit dem Temperaturverlauf dieses Geräts:
Ein Klick auf DemoDevice_2 führt in denselben Details-State, diesmal aber mit den Daten des zweiten Geräts:
Damit ist sichtbar, dass:
- dieselbe Detailseite für mehrere Geräte wiederverwendet wird
- das ausgewählte Gerät korrekt aus der Tabelle übernommen wird
- die Rücknavigation über den Home-Button funktioniert
Zurück zur Beispielübersicht: