Neues YouTube-Video: Visualisierung im Devices-Adapter

[Ein ehemaliger Benutzer]

Hallo,

Eine Frage an ioBroker-Gurus.

Ich möchte gerne in einem Adapter mit jsonConfig eine Konfigurations-Maske bauen, die es mir erlauben würde verschaltete Objekte zu konfigurieren.

Am Ende möchte ich eine Liste von Objekten haben, die einen freigewählten Namen haben und eine Liste von "Properties". Jede Property wiederum hat einen Namen (aus einer vordefinierten Liste von möglichen Namen) und eine Liste von "Mappings". Die Mappings-Liste kann leer sein. Ob die Mappings-Liste einer Property leer ist, hängt vom Propertynamen ab. Die Mappingsliste, wenn sie nicht leer ist, hat eine bestimmte Anzahl von Elementen, was auch durch Propertynamen vorgegeben ist.

Ich glaube man könnte es mit verschachtelten Tabellen implementieren, was auch so weit funktioniert:

Was ich nicht weiss ist, wie ich diese ganzen Bedingungen enforcen könnte. Also wie kann ich je nach Propertynamen die Mappingsliste vorbelegen oder sicherstellen, dass kein Element zu der Mappingstabelle hinzugefügt werden kann.

Idealerweise würde ich in der Konfigurations-UI bereits "falsche" Konfigurationen verhindern wollen und nicht erst die Konfiguration validieren, wenn auf SAVE geklickt wurde.

Hat jemand eine Idee? Oder bin ich hier total auf dem falschen Weg und könnte es ganz einfach anders implementieren?

[AlCalzone]

@iwg Schon der Thread-Titel verfehlt schon den Sinn von jsonConfig.

Komplexe Konfiguration mit jsonConfig

jsonConfig ist für einfache Konfigurationsoberflächen gedacht. Keine komplexe Logik, ggf. ein paar Dinge die voneinander abhängen. Quasi die 90% der Adapter, die ne Handvoll Werte eintragen müssen.

Es könnte eventuell mit den xyzSendTo-Feldern gehen, wo dir der Adapter abhängig von den übergebenen Daten die Dropdown-Inhalte zurück gibt. Das müsste dir aber jemand beantworten, der sich mit jsonConfig auch auskennt.

[Ein ehemaliger Benutzer]

@alcalzone
Danke für Deine Antwort.

Das habe ich mir bereits gedacht :( Mittlerweile bin ich von der Idee jsonConfig zu verwenden abgerückt.
Allerdings ist mir noch nicht ganz klar was in einem komplexen Fall der richtige Weg wäre. Angenommen ich würde meine Konfiguration mit Angular, oder was auch immer, als eine Web-App implementieren, wie könnte ich die dann an ioBroker Konfigurations-Mechanismen anbinden?

[AlCalzone]

@iwg Die üblichen Wege wären entweder handgeschriebenes HTML/JS mit Styling via MaterializeCSS, oder wie viele der komplexeren Adapterkonfigurationen mittels React und der Material-UI library.

Bei React wäre der Vorteil, dass es auch eine offizielle Library für die Integration in ioBroker gibt, die dir vieles abnimmt:
https://github.com/ioBroker/adapter-react-v5

Wenn du mit dem Creator einen adapter erstellst und dort React auswählst, wird dir im Übrigen auch eine Konfig-UI mit adapter-react erstellt. Die Abhängigkeit solltest du ggf. noch durch @iobroker/adapter-react-v5 ersetzen, da der Creator by default noch die alte Version nutzt.

Darüber hinaus habe ich einen Wrapper geschrieben, der das ganze mit deutlich weniger Boilerplate-Code hinbekommt:
https://github.com/AlCalzone/iobroker-react (repo)
https://alcalzone.github.io/iobroker-react/#/ (Doku)
https://alcalzone.github.io/iobroker-react/#/components/SettingsApp?id=example (Beispiel einer Settings UI)
Allerdings arbeitet auch der derzeit noch mit der Vorgängerversion von adapter-react, d.h. du musst ggf. noch etwas Tricksen, was styling angeht.

[Ein ehemaliger Benutzer]

@alcalzone
Vielen Dank!
Ich schaue mir das an.