ioBroker VIS – JSON Table Widget – Teil 3 – DetailView

In diesem Artikel beschäftigen wir uns mit dem JSON Table Widget.

Zu keinem anderen Widget habe ich mehr Fragen und Probleme gelesen, wie zu dem ioBroker VIS JSON Table Widget. Mit dem Widget kann eine JSON-Tabelle in der Visualisierung dargestellt werden. JSON-Tabellen werden häufig von Adaptern als zusätzliche Datenpunkte zur Verfügung gestellt, in denen weitere Informationen hinterlegt sind.

Für den Artikel verwende ich hier den Adapter „yr“, mit dem Wetterinformationen des norwegischen Meteorologischen Institut in ioBroker integriert werden können. Der Adapter stellt dabei die Wettervorhersage als einzelne Datenpunkte sowie als JSON-Tabelle zur Verfügung.

Im dritten Teil der Artikelreihe nutzen wir nun die Anzeige von Detail-Informationen eines Eintrages. Hierzu verfügt das Widget über eine zusätzliche Eigenschaft.

Im ersten Schritt nehmen wir wieder unsere Tabelle aus dem zweiten Teil der Artikelreihe. Zusätzlich fügen wir noch eine weitere JSON-Tabelle unterhalb des Widgets hinzu. Dazu einfach wieder über die Widget-Liste auf der linken Seite nach dem JSON-Table Widget suchen und dieses auf der View einfügen.

Nach dem wir das Widget eingefügt haben, benötigen wir im nächsten Schritt die Widget-ID. Dazu klicken wir einfach das Widget an und sehen dann im Bereich Widgets die ID des aktiven Widgets.

Im nächsten Schritt benötigen wir diese ID zur Konfiguration der ersten JSON-Tabelle. Wir markieren jetzt das bereits eingefügte Widget und wählen die ID in der Auswahl Detailed widget aus. Somit werden die beiden Widgets miteinander verbunden.

Im nächsten Schritt setze ich noch zusätzlich die CSS-Klasse auf blacktable.

Wenn wir nun die View starten, werden die beiden JSON-Tabellen wie folgt dargestellt:

Mit einem Klick auf das obere Widget werden alle Details des markierten JSON-Datensatzes im unteren JSON-Table Widget dargestellt.

Ich hoffe euch gefällt dieser Artikel. Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer 🙂