IoBroker JSON-Konfiguration: Ein Leitfaden für Anfänger

Diese Anleitung erklärt, wie Sie Konfigurationsoptionen für Ihren ioBroker-Adapter mithilfe von JSON definieren. Dieser Ansatz bietet eine benutzerfreundlichere und flexiblere Möglichkeit, die Adaptereinstellungen innerhalb der ioBroker-Administrationsoberfläche zu verwalten.

Was Sie benötigen

• ioBroker Admin Version 6 (oder neuer)
• Grundlegendes Verständnis der JSON-Syntax

Vorteile der JSON-Konfiguration

• Verbesserte Benutzerfreundlichkeit bei der Konfiguration von Adaptern
• Einfachere Integration komplexer Konfigurationsoptionen
• Klare Trennung zwischen Adaptercode und Konfiguration

Erste Schritte

1. Konfigurationsdatei definieren:

• Erstellen Sie eine Datei namens jsonConfig.json oder jsonConfig.json5 im Admin-Verzeichnis Ihres Adapters.
• JSON5 ist eine Erweiterung von JSON, die Kommentare ermöglicht und dadurch die Lesbarkeit der Konfigurationsdatei verbessert.

2. JSON-Konfiguration aktivieren:

• Fügen Sie in der io-package.json-Datei Ihres Adapters die folgende Zeile unter dem Abschnitt common hinzu:

{
    "common": {
        "adminUI": {
            "config": "json"
        }
    }
}

3. Struktur der Konfigurationsdatei:

Die Konfigurationsdatei definiert eine hierarchische Struktur von Registerkarten, Bereichen und Steuerelementen. Jedes Element verfügt über spezifische Attribute, die sein Verhalten und sein Erscheinungsbild in der Admin-Oberfläche bestimmen.

jsonConfig stellt automatisch sicher, dass die gesammelten Daten als Konfigurationsdaten für den Adapter aufgezeichnet und intern gespeichert werden, sodass sie im Adapter abgerufen und weiterverarbeitet werden können.

Das folgende Beispiel würde das folgende Konfigurationsobjekt erzeugen:

{
  options1: {
    myPort: 1234,
    options: {
      myType: 1,
    },
    myBool: false,
  },
}

Attributnamen, die mit "_" beginnen, werden nicht im Objekt gespeichert.

Beispiel einer jsonConfig mit mehreren Tabs

{
    "type": "tabs",
    "items": {
        "options1": {
            "type": "panel",
            "label": "Tab1",
            "icon": "base64 svg", // optional
            "items": {
                myPort: {
                    "type": "number",
                    "min": 1,
                    "max": 65565,
                    "label": "Number",
                    "sm": 6, // 1 - 12
                    "validator": "!!data.name", // else error
                    "hidden": "data.myType === 1", // hidden if myType is 1
                    "disabled": "data.myType === 2" // disabled if myType is 2
                },
                "options.myType": { // name could support more than one level
                    "newLine": true, // must start from new row
                    "type": "select",
                    "label": "Type",
                    "sm": 6, // 1 - 12
                    "options": [
                        {"label": "option 1", "value": 1},
                        {"label": "option 2", "value": 2}
                    ]
                },
                "myBool": {
                    "type": "checkbox",
                    "label": "My checkbox",
                },
                "_notSaved":"abc"
            }
        },
        "tab2": {
            "label": "Tab2",
            "type": "panel",
            "disabled": "data.myType === 1",
            "hidden": "data.myType === 2",
        }
    },
}

Weitere Beispiele finden sich in vielen anderen Adaptern auf GitHub im jeweiligen Admin-Verzeichnis.

Unterstützung für die Entwicklung von Tools

VS Code

Um die Validierung der jsonConfig in VS Code zu aktivieren, muss der folgende Abschnitt zur Datei ".vscode/settings.json" hinzugefügt werden.

    "json.schemas": [
        {
            "fileMatch": ["admin/jsonConfig.json", "admin/jsonCustom.json", "admin/jsonTab.json"],
            "url": "https://raw.githubusercontent.com/ioBroker/ioBroker.admin/master/packages/jsonConfig/schemas/jsonConfig.json"
        }
    ]

Gemeinsame Steuerelemente

Eine jsonConfig besteht aus mehreren hierarchisch strukturierten Elementen. Jedes Element kann einem der folgenden Typen angehören. Einige Elemente können weitere untergeordnete Elemente enthalten.

Sie können fast alle Komponenten in Aktion sehen, wenn Sie diesen Adapter testen: jsonconfig-demo.\ Sie können ihn über das GitHub-Symbol im Adminbereich installieren, indem Sie iobroker.jsonconfig-demo auf der Registerkarte npm eingeben.

• accordion: Akkordeon-Element für ausklappbare Inhalte (Admin 6.6.0 oder neuer)
• alive: Zeigt an, ob eine Instanz ausgeführt wird (schreibgeschützt)
• autocomplete: Eingabefeld mit Autovervollständigungsvorschlägen
• autocompleteSendTo: Autocomplete-Steuerelement mit Instanzwerten zum Senden von Daten
• certificate: Verwaltet Zertifikate für sichere Verbindungen
• certificateCollection: Wählt eine Sammlung für Let's Encrypt-Zertifikate aus
• certificates: Universeller Typ zur Verwaltung verschiedener Zertifikatstypen (ab Admin 6.4.0)
• checkbox: Kontrollkästchen für boolesche Werte
• checkDocker: Spezielle Komponente zur Überprüfung, ob Docker verfügbar ist, und falls ja, kann ein Kontrollkästchen aktiviert werden (ab Admin 7.8.0)
• checkLicense: Eine spezielle Komponente zur Online-Lizenzprüfung
• chips: Der Benutzer kann Wörter eingeben, die einem Array hinzugefügt werden.
• color: Farbauswahl
• coordinates: Bestimmt den aktuellen Standort und verwendet die Koordinaten aus system.config, falls diese nicht im Format latitude,longitude verfügbar sind.
• credential: Wählt eine Anmeldeinformation aus dem zentralen Anmeldeinformationsspeicher aus (verwaltet in den Administratoreinstellungen)
• cron: Konfiguriert Cron-Ausdrücke für die Planung von Aufgaben
• custom: Integriert benutzerdefinierte Komponenten für spezifische Funktionalitäten (nur Admin 6)
• datePicker: Ermöglicht Benutzern die Auswahl eines Datums
• deviceManager: Gerätemanager anzeigen
• divider: Erzeugt eine horizontale Trennlinie
• file: Eingabefeld mit Dateiauswahl und optionaler Upload-/Download-Funktion (nur Admin 6)
• fileSelector: Ermöglicht Benutzern die Auswahl von Dateien aus dem System (nur Admin6)
• func: Wählt eine Funktion aus der Liste enum.func aus (nur Admin 6)
• header: Erstellt eine Überschrift mit verschiedenen Größen (h1-h5)
• iframe: Zeigt iFrame mit der angegebenen URL an (admin >= 7.7.28)
• iframeSendTo: Zeigt ein iFrame mit URL aus dem Backend an (Admin >= 7.7.28)
• image: Lädt ein Bild hoch oder zeigt es an
• imageSendTo: Zeigt ein vom Backend empfangenes Bild an und sendet Daten basierend auf einem Befehl
• instance: Wählt eine Adapterinstanz aus.
• interface: Wählt die Schnittstelle des Hosts aus, auf der die Instanz ausgeführt wird.
• ip: Eingabefeld für IP-Adressen mit erweiterten Optionen
• jsonEditor: JSON-Editor für komplexe Konfigurationsdaten
• language: Wählt die Sprache der Benutzeroberfläche aus
• license: zeigt die Lizenzinformationen an, falls diese noch nicht akzeptiert wurden.
• number: Numerisches Eingabefeld mit Minimal-/Maximalwerten und Schrittweite
• oauth2: OAuth2-Authentifizierung für den Adapter aktivieren (Admin 7.6.18 oder neuer)
• objectId: Wählt eine Objekt-ID mit Name, Farbe und Symbol aus.
• panel: Registerkarte mit Elementen
• password: Passwort-Eingabefeld
• pattern: Schreibgeschütztes Feld, das ein Muster (z. B. eine URL) anzeigt
• port: Spezieller Eingang für Ports
• qrCode: Zeigt Daten als QR-Code an (Admin 7.0.18 oder neuer)
• qrCodeSendTo: Zeigt einen QR-Code mit den vom Backend empfangenen Daten an.
• room: Wählt einen Raum aus der Liste enum.room aus (nur Admin 6)
• select: Dropdown-Menü mit vordefinierten Optionen
• selectSendTo: Dropdown-Menü mit Instanzwerten zum Senden von Daten
• sendTo: Schaltfläche, die eine Anfrage an eine Instanz sendet
• setState: Schaltfläche, die den Zustand einer Instanz festlegt
• slider: Schieberegler zur Auswahl eines Wertes innerhalb eines Bereichs (nur Admin 6)
• state: Zeigt Steuerungselemente oder Informationen aus dem Status an (admin >= 7.1.0)
• staticImage: Zeigt ein statisches Bild an
• staticInfo: Zeigt statische Informationen in vorformatierter Form an, z. B. "Titel: Werteinheit" (admin >= 7.3.3)
• staticLink: Erstellt einen statischen Link
• staticText: Zeigt statischen Text an (z. B. eine Beschreibung)
• table: Tabelle mit Zeilen, die hinzugefügt, gelöscht oder neu angeordnet werden können
• tabs: Tabs mit Elementen
• text: Ein- oder mehrzeiliges Texteingabefeld
• textSendTo: Zeigt ein schreibgeschütztes Steuerelement mit den angegebenen Instanzwerten an.
• timePicker: Ermöglicht Benutzern die Auswahl einer Uhrzeit
• user: Wählt einen Benutzer aus der Liste system.user aus
• uuid: iobroker-UUID anzeigen
• yamlEditor: YAML-Editor für komplexe Konfigurationsdaten (admin >= 7.7.30)

Durch die Verwendung von JSON-Konfiguration können Sie eine benutzerfreundliche und anpassungsfähige Konfigurationsumgebung für Ihren ioBroker-Adapter schaffen.

Beispielprojekte

Trennung der großen Konfigurationen

Enthält

Erfordert Administratorversion 6.17.1 oder neuer.

Um komplexe JSON-Dateien zu erstellen, können Sie andere JSON-Dateien einbinden. Die eingebundene Datei muss sich im selben Verzeichnis wie die Hauptdatei befinden.

{
  tabs: {
    tab1: {
      type: "panel", // data will be combined with the content of "tab1.json". If the same attribute is defined in both files, the value from the included file will be used.
      "#include": "tab1.json",
    },
  },
}

I18n - Internationalisierung

Es gibt mehrere Möglichkeiten, die Übersetzungen bereitzustellen. Nur die erste ist mit unserem Community-Übersetzungstool Weblate kompatibel und sollte daher den anderen vorgezogen werden!

Um die Übersetzungsfunktion zu aktivieren, müssen Sie die i18n-Eigenschaft auf oberster Ebene des JSON-Konfigurationsobjekts bereitstellen und aktivieren.

{
  i18n: true,
}

Übersetzung in separaten Dateien: kompatibel mit weblate

Standardmäßig müssen sich die Dateien in den folgenden Verzeichnissen befinden:

admin/i18n/de/translations.json
admin/i18n/en/translations.json

oder

admin/i18n/de.json
admin/i18n/en.json

Zusätzlich kann der Benutzer den Pfad zu den Dateien i18n, i18n: customI18n angeben und Dateien im Adminbereich bereitstellen:

  "i18n": "customI18n",

admin/customI18n/de/translations.json
admin/customI18n/en/translations.json

oder

admin/customI18n/de.json
admin/customI18n/en.json

Die Struktur einer Datei entspricht der folgenden Struktur

en.json:

{
  i18nText1: "Open",
  i18nText2: "Close",
  "This is a Text": "This is a Text",
}

de.json:

{
  i18nText1: "Öffnen",
  i18nText2: "Schließen",
  "This is a Text": "Dies ist ein Text",
}

Bei der Suche nach einer Übersetzung werden die Informationen im entsprechenden Feld verwendet, um die Datei mit dem gewünschten Text zu finden. Wird die Datei nicht gefunden, bleiben die Informationen aus dem Feld erhalten. Es wird empfohlen, den Text auf Englisch einzugeben.

Übersetzung direkt in den Feldern bereitstellen

Übersetzungen können in allen Feldern angegeben werden, die Text enthalten können. Beispiele für Felder sind Beschriftung, Titel, Tooltip, Text usw.

   "type": "text",
   "label: {
        "en": "house",
        "de": "Haus"
    }
}

Übersetzung direkt im i18n bereitstellen

Die Übersetzungen können auch direkt als Objekt im Attribut i18n auf der obersten Ebene des Objekts jsonConfig bereitgestellt werden.

Bei der Suche nach einer Übersetzung werden die Informationen im entsprechenden Feld verwendet, um die Eigenschaft mit dem Text im i18n-Objekt zu finden. Wird die Eigenschaft nicht gefunden, bleiben die Informationen aus dem Feld erhalten. Es wird empfohlen, den Text auf Englisch einzugeben.

Elementtypen

Jedes Element kann gemeinsame Merkmale und die dem jeweiligen Typ zugeordneten speziellen Attribute wie folgt haben:

tabs

Registerkarten mit Elementen

panel

Registerkarte mit Elementen

text

Textkomponente

number

color

Farbauswahl

checkbox

Kontrollkästchen anzeigen

slider

Schieberegler anzeigen (nur Admin6)

qrCode

Daten in einem QR-Code anzeigen (Admin >= 7.0.18)

ip

Bindungsadresse

user

Wählen Sie einen Benutzer aus der Systembenutzerliste aus. (Mit Farbe und Symbol)

room

Raum aus enum.room auswählen (mit Farbe und Symbol) - (nur Admin6)

func

Funktion aus enum.func auswählen (mit Farbe und Symbol) - (nur Admin6)

select

Jede Option in options kann Folgendes enthalten:

Beispiel für select options

[
  {"label": {"en": "option 1"}, "value": 1}, //...
]

oder

[
   {
      "items": [
         {"label": "Val1", "value": 1},
         {"label": "Val2", "value": 2}
         ],
      "name": "group1"
   },
   {
      "items": [
         {"label": "Val3", "value": 3},
         {"label": "Val4", "value": 4}
      ],
      "name": "group2"
   },
   {"label": "Val5", "value": 5}
]

autocomplete

image

Speichert das Bild als Datei des Objekts adapter.X oder als Base64 im Attribut

Beispiel für image

  "login-bg.png": {
       "type": "image",
       "accept": "image/png",
       "label": {
         "en": "Upload image"
       },
       "crop": true
     },
     "picture": {
       "type": "image",
       "base64": true,
       "accept": "image/*",
       "label": {
         "en": "Upload image"
       },
       "crop": true
     }
  }

oauth2

(admin >= 17.06.2018)

Zeigt die Schaltfläche „OAuth2-Authentifizierung“ an, um die Aktualisierungs- und Zugriffstoken für den Adapter zu erhalten.

Um dies nutzen zu können, müssen Sie zunächst die OAuth2-Daten (Client-ID, Geheimnis usw.) an das ioBroker-Wartungsteam übermitteln, damit dieses sie in die Cloud einbinden kann.

Beispiel für oauth2

  "_oauth2": {
       "type": "oauth2",
       "identifier": "spotify",
       "label": "Get Spotify OAuth2 Token",
       "refreshLabel": "Refresh Spotify OAuth2 Token",
       "icon": "data:image/svg+xml;base64,...",
  }

Siehe auch OAUTH2.md für weitere Informationen.

objectId

Objekt-ID: Anzeige mit Name, Farbe und Symbol

Beispiele für customFilter

Nur Objekte mit bestimmten benutzerdefinierten Einstellungen anzeigen

{common: {custom: true}}

Nur Objekte mit benutzerdefinierten SQL.0-Einstellungen anzeigen (nur die jeweilige Instanz)

{common: {custom: 'sql.0'}}

Nur Objekte der Adapter influxdb oder sql oder history anzeigen

{common: {custom: '_dataSources'}}

Nur Objekte mit benutzerdefinierten Einstellungen für einen bestimmten Adapter anzeigen (alle Instanzen)

{common: {custom: 'adapterName.'}}

Nur Kanäle anzeigen

{type: 'channel'}

Nur Kanäle und Geräte anzeigen

{type: ['channel', 'device']}

Nur Zustände vom Typ 'Zahl' anzeigen

{common: {type: 'number'}

Nur Zustände vom Typ 'Zahl' und 'Zeichenkette' anzeigen

{common: {type: ['number', 'string']}

Nur Zustände mit Rollen anzeigen, die mit „switch“ beginnen

{common: {role: 'switch'}

Nur Zustände mit Rollen anzeigen, die mit switch und button beginnen

{common: {role: ['switch', 'button']}

password

Dieser Feldtyp wirkt sich nur auf die Benutzeroberfläche aus. Passwörter und andere sensible Daten müssen verschlüsselt gespeichert werden! Dazu muss der Schlüssel in der io-package.json unter nativeEncrypted hinterlegt werden. Zusätzlich können Sie verhindern, dass diese Eigenschaft an andere Adapter als admin und cloud ausgeliefert wird, indem Sie sie in der Datei io-package.json unter protectedNative hinzufügen.

instance

chips

Der Benutzer kann das Wort eingeben, und es wird hinzugefügt (siehe Cloud => Dienste => Whitelist). Die Ausgabe ist ein Array, falls kein delimiter definiert ist.

alive

Dient lediglich als Indikator dafür, ob die Instanz aktiv ist, und kann im "ausgeblendeten" und "deaktivierten" Zustand verwendet werden (wird nicht in der Konfiguration gespeichert).

Nur Text: Instanz läuft, Instanz läuft nicht

pattern

Das schreibgeschützte Feld mit einem Muster wie 'https://${data.ip}:${data.port}' (wird nicht in der Konfiguration gespeichert) Texteingabe mit dem schreibgeschützten Flag, das ein Muster anzeigt.

sendTo

Schaltfläche, die eine Anfrage an die aktuelle Instanz sendet (https://github.com/iobroker-community-adapters/ioBroker.email/blob/master/admin/index_m.html#L128)

setState

Schaltfläche zum Festlegen des Instanzstatus

staticText

Statischer Text wie Beschreibung

Es muss genau eines von label oder text angegeben werden - nicht beide.

staticLink

staticImage

table

Tabelle mit Elementen, die gelöscht, hinzugefügt, nach oben oder nach unten verschoben werden können.

accordion

Akkordeonmenü mit Elementen, die gelöscht, hinzugefügt, nach oben oder nach unten verschoben werden können (Admin 6.6.0 und neuer)

jsonEditor

Schaltfläche zum Öffnen eines JSON(5)-Editors. JSON5 wird ab Admin-Version 5.7.3 unterstützt.

Der Editor selbst gehört nicht zu dieser Bibliothek: Er wird vom Host zusammen mit der Eigenschaft AceEditor von JsonConfig / JsonConfigComponent bereitgestellt. react-ace bringt die gesamte Eigenschaft ace-builds mit sich und würde andernfalls in jedem Bundle landen, das diese Bibliothek verwendet, einschließlich benutzerdefinierter Komponenten und Adapter, obwohl nur drei der sechzig Steuerelemente jemals einen Editor anzeigen. Ohne diesen wird das Feld als einfacher Textbereich dargestellt, der weiterhin gelesen und beschrieben werden kann.

yamlEditor

Schaltfläche zum Öffnen eines YAML-Editors mit Syntaxprüfung. (Ab Admin-Version 7.7.30)

language

Sprache auswählen

certificate

certificates

Es handelt sich um einen universellen Typ, der die Attribute certPublic, certPrivate, certChained und leCollection für Sie verwaltet.

Beispiel:

{
  "_certs": {
    "type": "certificates",
    "newLine": true,
    "hidden": "!data.secure",
    "sm": 12
  }
}

certCollection

Wählen Sie eine Zertifikatssammlung aus, verwenden Sie einfach alle Sammlungen oder verzichten Sie ganz auf Let's Encrypt.

credential

Wählen Sie eine Anmeldeinformation aus dem zentralen Anmeldeinformationsspeicher aus. Die Anmeldeinformationen können in den Administratoreinstellungen (Einstellungen → Anmeldeinformationen) verwaltet werden, und die Adapterkonfiguration speichert lediglich die ID der ausgewählten Anmeldeinformation (z. B. system.credentials.anthropic) im entsprechenden Attribut.

Sofern disableCreation nicht festgelegt ist, wird neben dem Auswahlfeld eine Schaltfläche ➕ angezeigt, die direkt ein kleines Dialogfeld zum Hinzufügen von Anmeldeinformationen öffnet - ähnlich dem Admin-Dialog. Es bietet Vorlagen (mit Symbolen), gefiltert nach credentialType (z. B. Anthropic / ChatGPT / Google Gemini für ai sowie die allgemeinen Vorlagen „Anmelden & Passwort“ und „Schlüssel“). Die gewählte Vorlage definiert das Formular, einen vorgeschlagenen Namen und das Symbol; die geheimen Felder werden beim Speichern mit dem Systemschlüssel verschlüsselt. Die neu erstellten Anmeldeinformationen werden als system.credentials.<name> gespeichert und sofort ausgewählt.

Beispiel:

{
  "credentialId": {
    "type": "credential",
    "credentialType": "email",
    "label": "E-Mail account",
    "disableCreation": false,
    "sm": 6
  }
}

Jede Anmeldeinformation hat eine von zwei Formen: login (ein login- und ein password-Feld) oder key (ein einzelnes key-Feld, z. B. ein API-Schlüssel). Im Adapter werden die Anmeldeinformationen mit @iobroker/adapter-core gelesen und entschlüsselt.

import { Credentials } from '@iobroker/adapter-core';

const cred = await Credentials.getCredentials<Credentials.LoginPasswordCredentials>(this, this.config.credentialId);
// cred.values.login, cred.values.password (already decrypted)
// or for the key form: Credentials.KeyCredentials -> cred.values.key

custom

nur Admin6

Beispiel für eine URL

• custom/customComponents.js: In diesem Fall werden die Dateien von /adapter/ADAPTER_NAME/custom/customComponents.js geladen.
• https://URL/myComponent: direkt von der URL
• ./adapter/ADAPTER_NAME/custom/customComponent.js: In diesem Fall werden die Dateien von /adapter/ADAPTER_NAME/custom/customComponents.js geladen.

datePicker

Dem Benutzer ermöglichen, ein Datum auszuwählen; das UI-Format stammt aus der konfigurierten Konfiguration.

timePicker

Dem Benutzer die Auswahl eines Datums ermöglichen; die zurückgegebene Zeichenkette ist eine auswertbare Datumszeichenkette oder hat das Format HH:mm:ss

divider

horizontale Linie

header

cron

Zeigt die CRON-Einstellungen an. Sie haben 3 Optionen:

• simple - zeigt einfache CRON-Einstellungen an
• complex - zeigt CRON mit "Minuten", "Sekunden" usw. an
• Weder „einfach“ noch „komplex“ - Der Benutzer kann im Dialog zwischen einfach und komplex wechseln.

fileSelector

Wählen Sie eine Datei aus einem Ordner über ein Dropdown-Menü aus. Und wenn Sie möchten, können Sie eine neue Datei in diesen Ordner hochladen.

nur Admin6

file

Eingabefeld mit Dateiauswahl. Es wird als Textfeld mit einer Schaltfläche zum Öffnen des Dialogs angezeigt. Nur Admin6.

imageSendTo

zeigt das vom Backend empfangene Bild als Base64-Zeichenkette an.

Beispielcode im Backend für imageSendTo

adapter.on("message", (obj) => {
  if (obj.command === "send") {
    const QRCode = require("qrcode");
    QRCode.toDataURL(
      "3ca4234a-fd81-fdb8-5584-08c732f70e4d",
      (err, url) =>
        obj.callback && adapter.sendTo(obj.from, obj.command, url, obj.callback)
    );
  }
});

qrCodeSendTo

Sendet einen Befehl an die Adapterinstanz und zeigt die Antwortzeichenfolge als QR-Code an. Das Backend muss eine einfache Zeichenkette (die zu kodierenden Daten) zurückgeben.

Beispielcode im Backend für qrCodeSendTo

adapter.on("message", (obj) => {
    if (obj.command === "send") {
        // return the string to be encoded in the QR code
        obj.callback && adapter.sendTo(obj.from, obj.command, "https://example.com/pair?token=abc123", obj.callback);
    }
});

iframe

Zeigt einen iFrame mit der angegebenen URL an. (aus Admin 7.7.28)

Beispiel für iframe

{
  "type": "iframe",
  "url": "https://example.com",
  "allowFullscreen": true,
  "sandbox": "allow-same-origin allow-scripts",
  "loading": "lazy",
  "reloadOnShow": false
}

iframeSendTo

Zeigt einen iFrame mit einer vom Backend empfangenen URL an. (aus Admin 7.7.28)

Das Backend muss eine URL als Zeichenkette zurückgeben.

Beispiel für iframeSendTo

{
  "type": "iframeSendTo",
  "command": "getUrl",
  "jsonData": "{\"param\": \"${data.value}\"}",
  "height": 600
}

Beispielcode im Backend für iframeSendTo

adapter.on("message", (obj) => {
  if (obj.command === "getUrl") {
    const url = "https://example.com?param=" + obj.message.param;
    adapter.sendTo(obj.from, obj.command, url, obj.callback);
  }
});

selectSendTo

Zeigt das Dropdown-Menü mit den angegebenen Instanzwerten an.

Der Backend-Handler kann Elemente mit einem optionalen Feld description: [{"value": 1, "label": "one", "description": "Some hint"}, ...] zurückgeben. Die Beschreibung wird unterhalb der Bezeichnung im Dropdown-Menü angezeigt.

Beispielcode im Backend für selectSendTo

adapter.on("message", (obj) => {
  if (obj) {
    switch (obj.command) {
      case "command":
        if (obj.callback) {
          try {
            const { SerialPort } = require("serialport");
            if (SerialPort) {
              // read all found serial ports
              SerialPort.list()
                .then((ports) => {
                  adapter.log.info(`List of port: ${JSON.stringify(ports)}`);
                  adapter.sendTo(
                    obj.from,
                    obj.command,
                    ports.map((item) => ({
                      label: item.path,
                      value: item.path,
                    })),
                    obj.callback
                  );
                })
                .catch((e) => {
                  adapter.sendTo(obj.from, obj.command, [], obj.callback);
                  adapter.log.error(e);
                });
            } else {
              adapter.log.warn("Module serialport is not available");
              adapter.sendTo(
                obj.from,
                obj.command,
                [{ label: "Not available", value: "" }],
                obj.callback
              );
            }
          } catch (e) {
            adapter.sendTo(
              obj.from,
              obj.command,
              [{ label: "Not available", value: "" }],
              obj.callback
            );
          }
        }

        break;
    }
  }
});

autocompleteSendTo

Zeigt ein Autovervollständigungssteuerelement mit den angegebenen Instanzwerten an.

Um diese Option nutzen zu können, muss Ihr Adapter einen Nachrichtenhandler implementieren:

Das Ergebnis des Befehls muss ein Array der Form ["value1", {"value": "value2", "label": "Value2"}, ...] sein (Schlüssel und Namen (Werte) müssen eindeutig sein). Siehe selectSendTo für ein Handler-Beispiel.

textSendTo

Zeigt ein schreibgeschütztes Steuerelement mit den angegebenen Instanzwerten.

Um diese Option zu nutzen, muss Ihr Adapter einen Nachrichtenhandler implementieren: Das Ergebnis des Befehls muss eine Zeichenkette oder ein Objekt mit den folgenden Parametern sein:

{
  text: "text to show", // mandatory
  style: { color: "red" }, // optional
  icon: "search", // optional. It could be base64 or link to an image in the same folder as jsonConfig.json file
  // possible predefined names: edit, rename, delete, refresh, add, search, unpair, pair, identify, play, stop, pause, forward, backward, next, previous, lamp, backlight, dimmer, socket, settings, group, user, qrcode, connection, no-connection, visible
  iconStyle: { width: 30 }, // optional
}

Beispiel für textSendTo

adapter.on("message", (obj) => {
  if (obj) {
    switch (obj.command) {
      case "command":
        obj.callback &&
          adapter.sendTo(
            obj.from,
            obj.command,
            "Received " + JSON.stringify(obj.message),
            obj.callback
          );
        // or with style
        obj.callback &&
          adapter.sendTo(
            obj.from,
            obj.command,
            {
              text: "Received " + JSON.stringify(obj.message),
              style: { color: "red" },
              icon: "search",
              iconStyle: { width: 30 },
            },
            obj.callback
          );
        // or as html
        obj.callback &&
          adapter.sendTo(
            obj.from,
            obj.command,
            `<div style="color: green">${JSON.stringify(obj.message)}</div>`,
            obj.callback
          );
        break;
    }
  }
});

coordinates

Ermittelt den aktuellen Standort und verwendet die Koordinaten system.config, falls dies nicht in der Form latitude,longitude möglich ist.

interface

Wählen Sie die Schnittstelle des Hosts aus, auf dem die Instanz ausgeführt wird.

Gemeinsame Eigenschaften von Steuerelementen

Layoutoptionen xl,lg,md,sm,xs

Mithilfe dieser Optionen lässt sich die Breite von Elementen auf verschiedenen Bildschirmgrößen festlegen, um ein responsives und anpassungsfähiges Layout auf verschiedenen Geräten zu gewährleisten.

Gültige Zahlen sind 1 bis 12.

Wenn Sie eine Zahl angeben, beispielsweise 6, beträgt die Breite des Elements 6/12 (50 %) der Bildschirmbreite. Geben Sie beispielsweise 3 an, beträgt die Breite des Elements 3/12 (25 %) der Bildschirmbreite. Weisen Sie den verschiedenen Layoutoptionen Zahlen zu, um die Breite des Elements für die unterschiedlichen Bildschirmgrößen festzulegen.

Die folgenden Optionen sind die empfohlenen Voreinstellungen, die für die meisten Fälle geeignet sind.

"xs": 12,
"sm": 12,
"md": 6,
"lg": 4,
"xl": 4,

Es wird empfohlen, das Layout zu überprüfen.

Das jeweilige Layout sollte für jeden Adapter überprüft werden, um festzustellen, ob das Layout in allen Auflösungen angezeigt und verwendet werden kann.

Dies kann beispielsweise mit den Web Developer Tools getestet werden, die in jeden Chromium-basierten Browser integriert sind.

Schritt 1: Öffnen Sie die Webentwicklertools mit F12

Schritt 2: Öffnen Sie die Geräte-Symbolleiste (1).

Schritt 3: Verschiedene Geräte auswählen (2)

In den Einstellungen der Webentwicklertools können Sie bei Bedarf eigene Geräte mit exakten Breiten erstellen.

Weitere Optionen

Elemente abhängig vom Betriebssystem anzeigen

Jedes Element (einschließlich panel, tabs, Tabellenspalten und einzelne select-Optionen) kann auf das Betriebssystem des ioBroker-Hosts beschränkt werden, auf dem die konfigurierte Instanz ausgeführt wird. Es ist nicht das Betriebssystem des Browsers.

{
    "comPort":  { "type": "text", "label": "COM port", "os": "win32" },
    "ttyPort":  { "type": "text", "label": "Serial device", "os": ["linux", "darwin"] },
    "sudoHint": { "type": "staticText", "text": "The service must be started with sudo", "notOs": "win32" }
}

Zulässige Werte sind die Werte von node.js process.platform (wie in common.os oder io-package.json): aix, android, cygwin, darwin, freebsd, haiku, linux, netbsd, openbsd, sunos, win32.

• Wenn os definiert ist, wird das Element nur auf den angegebenen Betriebssystemen angezeigt.
• Wenn notOs definiert ist, wird das Element auf allen Betriebssystemen außer den angegebenen angezeigt.
• Wenn das Betriebssystem des Hosts nicht erkannt werden kann (z. B. wenn das Hostobjekt nicht lesbar ist), das Element

wird angezeigt. Es ist besser, ein Element zu viel anzuzeigen, als ein notwendiges zu verbergen.

• Ein nicht angezeigtes Element wird nicht gelöscht: Der Wert bleibt in der Konfiguration unverändert, genau wie bei hidden.

Der Wert default eines solchen Elements wird jedoch nicht in die Konfiguration geschrieben.

Für komplexere Bedingungen können die Variablen _os, _arch und _host in jeder JS-Funktion (hidden, disabled, validator, defaultFunc, onChange.calculateFunc, confirm.condition) und in den Textmustern label, help usw. verwendet werden:

{
    "type": "text",
    "label": "Path to the executable file",
    "disabled": "_os === 'win32'",
    "defaultFunc": "_os === 'win32' ? 'C:\\\\Program Files\\\\app.exe' : '/usr/bin/app'",
    "help": "Host ${_host.id} runs ${_os} on ${_arch}"
}

Elemente je nach ioBroker-Zustand ein- oder ausblenden.

Mit dependsOnStates kann ein Element auf die Werte von ioBroker-Zuständen reagieren. Die Zustände werden abonniert, sodass das Element bei einer Zustandsänderung sofort aktualisiert wird - ein Neuladen des Konfigurationsdialogs ist nicht erforderlich.

{
    "startBrowse": {
        "type": "sendTo",
        "command": "browse",
        "label": "${_states.running?.val ? 'Stop browse' : 'Start browse'}",
        "dependsOnStates": { "running": ".info.browsing" },
        "disabled": "!!_states.running?.val"
    }
}

• dependsOnStates wird als {"<alias>": "<state ID>"} geschrieben. Die Werte sind in allen JS-Funktionen verfügbar.

(hidden, disabled, validator, defaultFunc, onChange.calculateFunc, confirm.condition) und in den Textmustern von label, help, tooltip und so weiter bis _states.<alias>.

• _states.<alias> enthält das gesamte Zustandsobjekt, also _states.running?.val, _states.running?.ts,

_states.running?.ack kann verwendet werden. Existiert der Zustand nicht, ist es null, daher sollte immer ?. verwendet werden.

• Eine Status-ID, die mit einem Punkt beginnt, adressiert die eigene Instanz: .info.browsing => myAdapter.0.info.browsing.

Jede zweite ID wird unverändert verwendet, sodass auch die Zustände anderer Adapter überwacht werden können.

• Die ID kann Muster wie ${data.xxx} enthalten, z. B. "device": "${data.deviceInstance}.info.connection".

Bei einer Konfigurationsänderung wird das Problem erneut gelöst. Platzhalter (*) sind nicht zulässig.

• Wenn sich einer der Zustände ändert, werden hidden, disabled, label, help, validator und defaultFunc dieser Funktion aktualisiert.

Das Element wird neu berechnet. Jeder Zustand wird nur einmal abonniert, unabhängig davon, wie viele Elemente (oder Tabellenzeilen) ihn verwenden.

• Die Kurzform "dependsOnStates": ["admin.0.info.connection"] verwendet die ID selbst als Alias:

_states['admin.0.info.connection'].

• Das Attribut kann für jedes Element verwendet werden, auch für panel, tabs und Tabellenspalten.

Hinweis: Ältere Admin-Versionen kennen _states nicht und würden bei der Auswertung einer solchen Funktion einen Fehler auslösen, sodass das Element sichtbar und aktiviert bleibt.

Hinweis: Ältere Admin-Versionen kennen _os nicht und würden "hidden": "_os !== 'linux'" zu true auswerten, wodurch das Element überall ausgeblendet würde. Daher sollten os/notOs bevorzugt werden, da diese von älteren Admin-Versionen einfach ignoriert werden (das Element wird angezeigt). Falls eine JavaScript-Funktion verwendet werden muss, sollte diese defensiv implementiert werden: "hidden": "!!_os && _os !== 'linux'".

Docker

Wenn ein Element davon abhängt, ob der ioBroker selbst in einem Docker-Container läuft, kann das Attribut docker verwendet werden:

{
    "service":    { "type": "checkbox", "label": "Install as service", "docker": false },
    "volumeHint": { "type": "staticText", "text": "The directory must be mapped as volume", "docker": true }
}

• "docker": true - Das Element wird nur angezeigt, wenn der ioBroker in einem Docker-Container ausgeführt wird.
• "docker": false - Das Element wird nur angezeigt, wenn der ioBroker nicht in einem Docker-Container ausgeführt wird. Der Docker-Status kann nicht aus den Objekten gelesen werden, er muss von einem laufenden Host angefordert werden.

Wenn keine Antwort erfolgt, bleibt der Status unbekannt und das Element wird angezeigt.

Die Anfrage wird nur gesendet, wenn die Konfiguration tatsächlich docker oder _host.docker verwendet; alle anderen Anfragen werden ignoriert.

Die Konfigurationen verursachen keinen zusätzlichen Datenverkehr.

• In den JS-Funktionen ist der Status als _host.docker verfügbar (true, false oder undefined, falls unbekannt) und

die Version des offiziellen ioBroker Docker-Images als _host.dockerVersion.

Verwechseln Sie dies nicht mit der checkDocker-Kontrolle: Diese prüft, ob auf dem Host eine Docker-Installation zur Steuerung von Containern verfügbar ist, und nicht, ob der ioBroker selbst in Docker läuft.

Optionen mit detaillierter Konfiguration

defaultSendTo

Befehl zum Anfordern eines Anfangswerts von der laufenden Instanz, Beispiel: "myInstance": {"type": "text", "defaultSendTo": "fill"}

• data - statische Daten
• jsonData - statische Daten
• Falls weder data noch jsonData definiert sind, werden die folgenden Informationen gesendet: {"attr": "<Attributname>", "value": "<aktueller Wert>"}
• button - Schaltflächenbeschriftung zum erneuten Auslösen der Anfrage von der Instanz
• buttonTooltip - Tooltip für Schaltflächen (Standard: Daten pro Instanz anfordern)
• buttonTooltipNoTranslation - Schaltflächen-Tooltip nicht übersetzen
• allowSaveWithError - Ermöglicht das Speichern der Konfiguration auch dann, wenn die Instanz offline ist.

confirm

• Bedingung - JS-Funktion: true Bestätigungsdialog anzeigen
• text - Text des Bestätigungsdialogs
• title - Titel des Bestätigungsdialogs
• ok - Text für die OK-Schaltfläche
• cancel - Text für die Schaltfläche "Abbrechen"
• type - Einer der folgenden Werte: info, warning, error, none
• alsoDependsOn - Array mit Attributen, um die Bedingung auch anhand dieser Attribute zu prüfen.

Autovervollständigung

Number, text, checkbox und select unterstützen die automatische Vervollständigung, um die Auswahl von Optionen zu ermöglichen, wenn diese als benutzerdefinierte Einstellungen verwendet werden. In diesem Fall wird der Wert als Array aller möglichen Werte bereitgestellt.

Beispiel:

// ...
   "timeout": {
      "type": "number",
      "label": "Timeout"
   }
// ...

"data": {
   "timeout": [1000, 2000, 3000]
}

In diesem Fall muss die Eingabe als Text erfolgen, wie im Beispiel __different__ dargestellt. Zur Vervollständigung stehen drei mögliche Werte zur Verfügung. Benutzer können aus den Dropdown-Menüs 1000, 2000 oder 3000 auswählen oder einen eigenen Wert eingeben, z. B. 500.

Boolesche Werte müssen den Status „unbestimmt“ unterstützen, wenn ein Wert [false, true] ist.

Für nicht geänderte __different__ muss der abweichende Wert zurückgegeben werden:

Eingang:

"data": {
   "timeout": [1000, 2000, 3000]
}

Ausgabe, wenn das Timeout nicht geändert wurde:

"newData": {
   "timeout": "__different__"
}

Der Wert __different__ ist reserviert und darf von keinem Texteingabefeld vom Benutzer akzeptiert werden.

Die Komponente muss wie folgt aussehen

<SchemaEditor
    style={customStyle}
    className={classes.myClass}
    schema={schema}
    customInstancesEditor={CustomInstancesEditor}
    data={common.native}
    onError={(error, attribute) => {/* error can be true/false or text. Attribute is optional */}}
    onChanged={(newData, isChanged) => console.log('Changed ' + isChanged)}
/>

Wird kein Schema angegeben, muss das Schema automatisch aus den Daten erstellt werden.

• boolean => Kontrollkästchen
• text => Texteingabe
• number => number
• name bind => ip
• Name Port => Nummer, min=1, max=0xFFFF
• name timeout => number, help="ms"

Todo

Die folgenden Kapitel stammen aus der Originaldatei SCHEMA.MD. Ich habe den Inhalt nicht im Detail verstanden und er musste von Bluefox überarbeitet werden.

JS-Funktionen

Konfigurationsdialog

Die JS-Funktion lautet:

const myValidator = "_alive === true && data.options.myType == 2";

const func = new Function(
  'data',          // actual obj.native or obj.common.custom['adapter.X'] object
                   // If table, so data is current line in the table
  'originalData',  // data before changes
  '_system',       // system config => 'system.config'=>common
  '_alive',        // If instance is alive
  '_common',       // common part of instance = 'system.config.ADAPTER.X' => common
  '_socket',       // socket connection
  '_instance',     // instance number
  'arrayIndex',    // filled only by table and represents the row index
  'globalData',    // filled only by table and represents the obj.native or obj.common.custom['adapter.X'] object
  '_changed',      // indicator if some data was changed and must be saved
  '_href',         // Current browser href
  'getObject',     // You can call `await getObject(data.id)`in hidden, disabled, pattern functions
  '_os',           // Operating system of the host, where the instance runs: 'win32', 'linux', 'darwin', ...
  '_arch',         // Architecture of the host, where the instance runs: 'x64', 'arm64', ...
  '_host',         // Information about the host: {id, os, osType, arch, release, nodeVersion, controllerVersion, docker, dockerVersion}
  '_states',       // Values of the states from `dependsOnStates`: {<alias>: <state object or null>}
  myValidator.includes('return') ? myValidator : 'return ' + myValidator); // e.g. "_alive === true"

const isValid = func(data, systemConfig.common, instanceAlive, adapter.common, this.props.socket);

Ändert sich der Status alive, müssen alle Felder erneut aktualisiert, validiert, deaktiviert oder ausgeblendet werden.

Folgende Variablen stehen in der JS-Funktion in den Adaptereinstellungen zur Verfügung:

• data - native Einstellungen für diese Instanz oder die aktuelle Zeile in der Tabelle (um auf alle Einstellungen zuzugreifen, verwenden Sie globalData)
• _system - Systemkonfiguration
• _alive - bedeutet, dass die Instanz lebt
• _common - Allgemeine Einstellungen für diese Instanz
• _socket - Socket
• _instance - Instanznummer
• arrayIndex - wird nur in Tabellen verwendet und repräsentiert die aktuelle Zeile in einem Array
• globalData - wird nur in der Tabelle für alle Einstellungen verwendet und nicht nur in einer einzelnen Tabellenzeile
• _os - Betriebssystem des Hosts, auf dem die Instanz ausgeführt wird (process.platform), z. B. linux, win32, darwin. Leerer String, falls unbekannt.
• _arch - Architektur des Hosts, auf dem die Instanz ausgeführt wird, z. B. x64, arm64
• _host - Informationen über den Host: {id, os, osType, arch, release, nodeVersion, controllerVersion, docker, dockerVersion}. docker ist undefined, wenn der Docker-Status nicht angefordert wurde oder der Host nicht geantwortet hat.
• _states - Werte der Zustände aus dependsOnStates: {<alias>: <Zustandsobjekt>}. null, falls der Zustand nicht existiert

Dialog für benutzerdefinierte Einstellungen

Die JS-Funktion lautet:

const myValidator =
  "customObj.common.type === 'boolean' && data.options.myType == 2";

const func = new Function(
  "data",
  "originalData",
  "_system",
  "instanceObj",
  "customObj",
  "_socket",
  arrayIndex,
  "_os",
  "_arch",
  "_host",
  "_states",
  myValidator.includes("return") ? myValidator : "return " + myValidator
); // e.g. "_alive === true"

const isValid = func(
  data || this.props.data,
  this.props.originalData,
  this.props.systemConfig,
  instanceObj,
  customObj,
  this.props.socket
);

Folgende Variablen stehen in der JS-Funktion in den benutzerdefinierten Einstellungen zur Verfügung:

• data - aktuelle benutzerdefinierte Einstellungen oder aktuelle Zeile in der Tabelle (um auf alle Einstellungen zuzugreifen, verwenden Sie globalData)
• originalData - Unveränderte Daten
• _system - Systemkonfiguration
• instanceObj - Adapterinstanzobjekt
• customObj - das aktuelle Objekt selbst
• _socket - Socket
• arrayIndex - wird nur in Tabellen verwendet und repräsentiert die aktuelle Zeile in einem Array
• globalData - wird nur in der Tabelle für alle Einstellungen verwendet und nicht nur in einer einzelnen Tabellenzeile
• _os - Betriebssystem des Hosts, auf dem die Instanz ausgeführt wird (process.platform), z. B. linux, win32, darwin. Leerer String, falls unbekannt.
• _arch - Architektur des Hosts, auf dem die Instanz ausgeführt wird, z. B. x64, arm64
• _host - Informationen über den Host: {id, os, osType, arch, release, nodeVersion, controllerVersion, docker, dockerVersion}. docker ist undefined, wenn der Docker-Status nicht angefordert wurde oder der Host nicht geantwortet hat.
• _states - Werte der Zustände aus dependsOnStates: {<alias>: <Zustandsobjekt>}. null, falls der Zustand nicht existiert

{
   "general": {
      // ....
      "customSettingsValidator": "customObj.common.type === 'boolean' && data.options.myType == 2",
      // ....
   }
}

Sie können die Anwendung der benutzerdefinierten Einstellungen auf bestimmte Zustände beschränken, indem Sie statesFilter im Stammelement (panel oder tabs) der benutzerdefinierten Einstellungen definieren:

jsonCustom.json:

{
   "i18n": true,
   "type": "panel",
   "statesFilter": true, // or "^hm-rpc\\.\\d\\..*\\.STATE$" - apply on "hm-rpc.X.*.STATE" states only
   "items": {
        // ...
   }
}

Benutzerdefinierte Komponente

<CustomInstancesEditor
    common={common.data}
    alive={isInstanceAlive}
    data={data}
    socket={this.props.socket}
    themeName={this.props.themeName}
    themeType={this.props.themeType}
    theme={this.props.theme}
    name="accessAllowedConfigs"
    onChange={(newData, isChanged) => {}}
    onError={error => /* error can be true/false or text */ {}}
/>

Beispiele finden Sie im telegram oder in pushbullet Adapter.

JSON-Registerkarte im Adminbereich

Ab der Admin-Version 7.6.x können Sie die Registerkarte (z. B. backitup oder matter) über die JSON-Konfiguration definieren.

Dazu müssen Sie in io-package.json im folgenden Teil von common definieren:

{
   "common": {
      // ....
      "adminTab": {
         "link": "jsonTab.json", // the name could be any, but only ends with `.json` or `.json5`
         // all following parameters are optional
         "icon": "AABBCC", // base64 icon. If not provided, the adapter icon will be taken
         "name": "TabName", // String or multi-language object for menu label
         "singleton": true, // Tab will not have an instance number, and for all instances will exist only one menu item.
         "order": 10, // Order in the admin tab (0 is disabled, 1 - first after static menu items, 200 is last)
      },
      // ....
   }
}

Die Datei jsonTab.json5 könnte beispielsweise so aussehen:

{
   "i18n": "tabI18n", // folder name in admin, where the translations are stored (relative to "admin" folder)
   "command": "tab", // If defined, the tab will send a message by initializing to backend with command "tab" (string contained in "sendTo")
   "items": {
      "memHeapTotal": {
         // This will show "system.adapter.admin.0.memHeapTotal" value
         "type": "state",
         "label": "Memory",
         "sm": 12,
         "system": true,
         "oid": "memHeapTotal"
      },
      "infoConnected": {
         // This will show "admin.0.info.connected" value
         "newLine": true,
         "type": "state",
         "label": "Info about connected socket clients",
         "sm": 12,
         "oid": "info.connected"
      },
      "dayTime": {
         // This will show "javascript.0.variables.dayTime" value
         "newLine": true,
         "type": "state",
         "label": "Aktuelle Zeit",
         "sm": 12,
         "foreign": true,
         "oid": "javascript.0.variables.dayTime"
      },
      "value": {
         // This will show "data.value" value from "sendTo" answer
         "newLine": true,
         "type": "text",
         "readOnly": "true",
         "label": "Value from sendTo answer",
         "sm": 12,
      }
   }
}

Wird sendTo angegeben, empfängt die Instanz eine Nachricht (common.messagebox muss in io-package.json wahr sein) mit dem Befehl tab oder, falls es sich um einen String handelt, mit einem in sendTo gespeicherten Wert.

Die Instanz muss mit folgender Struktur antworten:

onMessage = (obj: ioBroker.Message): void => {
    if (obj?.command === 'tab' && obj.callback) {
        // if not instance message
        this.sendTo(obj.from, obj.command, { data: { value: 5 } }, obj.callback);
    }
};

Schemafehler melden

Erstellen Sie hier ein Problem: https://github.com/ioBroker/ioBroker.admin/issues

Für den Maintainer

Um den Speicherort des JsonConfig-Schemas zu aktualisieren, erstellen Sie einen Pull Request für diese Datei: https://github.com/ioBroker/ioBroker.admin/blob/master/packages/jsonConfig/schemas/jsonConfig.json

Für Entwickler

Das Schema wird hier verwendet: https://github.com/SchemaStore/schemastore/blob/6da29cd9d7cc240fb4980625f0de6cf7bd8dfd06/src/api/json/catalog.json#L3214

Changelog

10.0.2 (2026-09-15)

• (@MiSchroe) Fixed: CRON schema accepts either simple or complex or none of them
• (@GermanBluefox) Updated Schema

10.0.1 (2026-09-12)

• (@GermanBluefox) The schema was corrected: closable to closeable.
• (@GermanBluefox) Updated packages

10.0.0 (2026-09-04)

• (@GermanBluefox) The schema allows the root property command of a JSON tab now. It was documented and honoured by admin, but every jsonTab.json5 that uses it was reported as invalid: https://github.com/ioBroker/ioBroker.admin/issues/3610
• (@GermanBluefox) The schema of divider accepts any CSS color and a height as a CSS length, as the control has always rendered them. Until now only primary/secondary and a number were allowed
• (@GermanBluefox) Added ack to the state control: the value is written as a command (ack: false) by default, as before, and an adapter that only shows its own value can now ask for an acknowledged write
• (@GermanBluefox) Added highlight to the state control, which highlights the line on mouse over, like staticInfo already did
• (@GermanBluefox) Breaking for hosts: react-ace is not a dependency of this library anymore. The host hands the editor in with the new property AceEditor of JsonConfig / JsonConfigComponent, together with the modes json, json5, yaml and the themes clouds_midnight, chrome. Without it the editors are plain text areas. Until now every bundle that uses this library carried the whole ace-builds along, the custom components of all adapters included

9.1.2 (2026-09-01)

• (@GermanBluefox) Replaced react-color with the ColorPicker from @iobroker/gui-components in the color component

9.1.1 (2026-08-31)

• (@GermanBluefox) Do not show export import on narrow devices

9.1.0 (2026-08-31)

• (@GermanBluefox) Added progress bar to the state component
• (@GermanBluefox) Added the possibility to show or hide elements depending on the states: dependsOnStates and the JS variable _states

9.0.23 (2026-08-27)

• (@krobipd) Corrected: the object browser stayed empty after closing the object customization dialog if any object was changed while the dialog was open (ioBroker/ioBroker.admin#3391)
• (@krobipd) Changed: ObjectBrowserClass.subscribes and .recordStates are Sets instead of arrays now
• (@krobipd) Improved: object browser performance on large installations — bursts of object changes cause one tree rebuild instead of several, state-change echoes no longer trigger redraws, subscription bookkeeping is no longer quadratic, and rows outside the viewport skip layout and paint

9.0.22 (2026-08-21)

• (@GermanBluefox) Corrected layout of Config view

9.0.21 (2026-08-19)

• (@GermanBluefox) Added the possibility to show or hide elements depending on the operating system of the host: os, notOs and the JS variables _os, _arch, _host
• (@GermanBluefox) Added the possibility to show or hide elements depending on the docker installation: docker and _host.docker

9.0.20 (2026-08-13)

• (@GermanBluefox) Correcting ConfigSelect component

9.0.19 (2026-08-09)

• (@GermanBluefox) Correcting autocompleteSendTo component

9.0.18 (2026-08-07)

• (@GermanBluefox) Updated packages

9.0.14 (2026-07-31)

• (@GermanBluefox) Updated packages

9.0.9 (2026-07-30)

• (@GermanBluefox) Improvement of I18n

9.0.7 (2026-07-26)

• (@GermanBluefox) Breaking: React 19 + MUI 9 + TS 6
• (@GermanBluefox) Added loading of the new custom components

8.5.5 (2026-07-24)

• (@GermanBluefox) Trying to improve the behaviour of tabs

8.5.4 (2026-07-23)

• (@GermanBluefox) Corrected the displaying of zero number values
• (@GermanBluefox) Trying to improve the behaviour of tabs

8.5.3 (2026-07-20)

• (@GermanBluefox) Changed the handling of Tabs

8.5.0 (2026-07-12)

• (@GermanBluefox) No functional updates, but only strict types for all components and attributes. This will help to avoid errors in the future.

8.4.15 (2026-07-04)

• (@GermanBluefox) Extended Credentials Component with AWS and Azure

8.4.13 (2026-06-29)

• (@GermanBluefox) Corrected the file selector component
• (@GermanBluefox) Implemented no translation for the select component
• (@GermanBluefox) Implemented debug mode for components to analyze JS functions
• (@ThomasPohl) Corrected rendering of the link in the static text component

8.4.11 (2026-06-21)

• (@GermanBluefox) Added missing translations

8.4.10 (2026-06-20)

• (@GermanBluefox) Fixed state component

8.4.9 (2026-06-19)

• (@GermanBluefox) Moved translations from adapter-react to this repository

8.4.8 (2026-06-18)

• (@GermanBluefox) Allowed creating credentials directly in the credential component (templates with icons, filtered by credentialType; can be disabled with disableCreation)

8.4.7 (2026-06-07)

• (@GermanBluefox) Added a credential component

8.4.5 (2026-05-30)

• (@GermanBluefox) Fixing help rendering

8.4.4 (2026-05-29)

• (@GermanBluefox) Corrected groups in the select component

8.4.3 (2026-05-24)

• (@GermanBluefox) Optimization of interfaces

8.4.1 (2026-05-19)

• (@GermanBluefox) Allowed to use await getObject(data.oid)?.common?.type === 'boolean' in hidden, pattern or disabled

8.3.13 (2026-05-16)

• (@GermanBluefox) Added _href to jsonData

8.3.11 (2026-04-29)

• (@GermanBluefox) Added instance option for all sendTo components to override the target adapter instance

8.3.9 (2026-04-17)

• (@GermanBluefox) Updated packages

8.3.8 (2026-04-13)

• (@GermanBluefox) Adjust a path to images

8.3.5 (2026-04-11)

• (@GermanBluefox) Extend schema for staticLink and staticImage components

8.3.4 (2026-04-09)

• (@GermanBluefox) Added horizontal option for select component with format: "radio" to display radio buttons in a row
• (@GermanBluefox) Added icon option for select component options to display icons next to labels

8.3.2 (2026-03-31)

• (@GermanBluefox) Added possibility to provide custom components

8.2.22 (2026-03-29)

• (@GermanBluefox) Corrected error for "state" component

8.2.19 (2026-03-27)

• (@GermanBluefox) Added option "small cards" for device manager

8.2.18 (2026-03-25)

• (@GermanBluefox) Added the possibility to use own Client ID for oauth authentication
• (@GermanBluefox) Added the possibility to show a small image and open it in full size by clicking on it

8.2.11 (2026-03-20)

• (@GermanBluefox) Correcting unit in schema
• (@GermanBluefox) Fill other config fields when an object ID is selected

8.2.8 (2026-03-15)

• (@GermanBluefox) Added radio button control for the state component ('select')

8.2.7 (2026-03-14)

• (@GermanBluefox) Made the secondary text in 'select' and 'selectSendTo' smaller, italic and semi-transparent

8.2.6 (2026-03-14)

• (@GermanBluefox) Added description for options in 'select' or 'selectSendTo' component

8.2.5 (2026-03-12)

• (@GermanBluefox) Extended the staticText component with HTML and JSON visualization

8.2.3 (2026-03-04)

• (@GermanBluefox) Increased the QR code padding

8.2.2 (2026-03-03)

• (@GermanBluefox) Added option sendFirstByClick to imageSendTo
• (@GermanBluefox) Added a new component: qrCodeSendTo
• (@GermanBluefox) Added option digits to state component
• (@GermanBluefox) Trying to fix indication of the problems in the table

8.1.11 (2026-02-12)

• (@GermanBluefox) Added the copy-to-clipboard dialog for sendTo

8.1.9 (2026-02-10)

• (@GermanBluefox) Hiding the whole line in the table if shown as card and the line is empty
• (@GermanBluefox) Added the header to the table in the card mode

8.1.3 (2026-02-09)

• (@GermanBluefox) Added component yamlEditor for editing YAML files in admin

8.1.1 (2026-02-06)

• (@GermanBluefox) Added iframe and iframeSendTo components

8.0.8 (2026-01-27)

• (@GermanBluefox) Fixing the alive component
• (@GermanBluefox) Fixing the datePicker component

8.0.7 (2026-01-27)

• (@GermanBluefox) Updated adapter-react-v5

8.0.6 (2025-11-10)

• (@GermanBluefox) Added width to many table elements

8.0.5 (2025-10-25)

• (@GermanBluefox) Do not translate certificates names
• (@GermanBluefox) Update packages

8.0.3 (2025-10-23)

• (@GermanBluefox) Do not translate certificates names

8.0.2 (2025-10-23)

• (@GermanBluefox) Renamed gui-components to adapter-react-v5

8.0.1 (2025-10-23)

• (@GermanBluefox) initial commit

License

It shows the license information if not already accepted. One of attributes texts or licenseUrl must be defined. When the license is accepted, the defined configuration attribute will be set to true.

checkDocker

• (admin >= 7.7.2) initial implementation

Special component to check if Docker is installed and running. If docker is installed, a checkbox will be shown to allow the usage of docker.

checkLicense

Very special component to check the license online. It's required exactly license and useLicenseManager properties in native.

uuid

Show iobroker UUID

port

Special input for ports. It checks automatically if the port is used by other instances and shows a warning

state

• (admin >= 7.1.0) Show control or information from the state
• (admin >= 7.6.4) attributes showEnterButton and setOnEnterKey

staticInfo

Shows static information in preformatted form, like "Title: value unit" (admin >= 7.3.3) This control is used mostly in dynamic forms

infoBox

Shows closable static text with optional title and icon. (From admin >= 7.6.19)

deviceManager

show device manager. For that, the adapter must support device manager protocol. See iobroker/dm-utils.

Here is an example of how to show the device manager in a tab:

{
    //...
    "_deviceManager": {
        "type": "panel",
        "label": "Device manager",
        "items": {
            "_dm": {
                "type": "deviceManager",
                "sm": 12,
                "style": {
                    "width": "100%",
                    "height": "100%",
                    "overflow": "hidden"
                }
            }
        },
        "style": {
            "width": "100%",
            "height": "100%",
            "overflow": "hidden"
        },
        "innerStyle": {
            "width": "100%",
            "height": "100%",
            "overflow": "hidden"
        }
    }
}

License

The MIT License (MIT)

Copyright (c) 2019-2026 @GermanBluefox dogafox@gmail.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.