Конфигурация ioBroker в формате JSON: руководство для начинающих

В этом руководстве объясняется, как определить параметры конфигурации для вашего адаптера ioBroker с помощью JSON. Такой подход предлагает более удобный и гибкий способ управления настройками адаптера в административном интерфейсе ioBroker.

Что вам понадобится

• ioBroker Admin версии 6 (или новее)
• Базовое понимание синтаксиса JSON

Преимущества конфигурации JSON

• Улучшен пользовательский интерфейс при настройке адаптеров.
• Упрощенная интеграция сложных параметров конфигурации.
• Чёткое разделение между кодом адаптера и конфигурацией

Начиная

1. Определите конфигурационный файл:

• Создайте файл с именем jsonConfig.json или jsonConfig.json5 в административной директории вашего адаптера. JSON5 - это расширенная версия JSON, которая позволяет добавлять комментарии, делая файл конфигурации более читабельным.

2. Включить конфигурацию JSON:

• В файл io-package.json вашего адаптера добавьте следующую строку в раздел common:

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

3. Структура конфигурационного файла:

Конфигурационный файл определяет иерархическую структуру вкладок, панелей и элементов управления. Каждый элемент имеет определенные атрибуты, определяющие его поведение и внешний вид в административном интерфейсе.

jsonConfig автоматически гарантирует, что собранные данные будут записаны в качестве конфигурационных данных для адаптера и сохранены внутри него, чтобы их можно было извлечь и обработать в адаптере.

В следующем примере будет создан следующий объект конфигурации:

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

Если имя атрибута начинается с символа "", оно не будет сохранено в объекте.

Пример jsonConfig с несколькими вкладками

{
    "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",
        }
    },
}

Дополнительные примеры можно найти во многих других адаптерах на GitHub в соответствующем каталоге администрирования.

Поддержка разработки инструментов

VS Code

Для включения проверки jsonConfig в VS Code необходимо добавить следующий раздел в файл ".vscode/settings.json".

    "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"
        }
    ]

Общие элементы управления

Объект jsonConfig состоит из нескольких элементов, имеющих иерархическую структуру. Каждый из элементов может быть одного из следующих типов. Некоторые элементы могут содержать дополнительные дочерние элементы.

Вы сможете увидеть практически все компоненты в действии, протестировав этот адаптер: jsonconfig-demo. Установить его можно через значок GitHub в админке, введя iobroker.jsonconfig-demo на вкладке npm.

• accordion: Элемент аккордеона для сворачиваемого контента (Admin 6.6.0 или новее)
• alive: Отображает, запущен ли экземпляр (только для чтения)
• автозаполнение: Поле ввода с подсказками автозаполнения
• autocompleteSendTo: Элемент управления автозаполнения со значениями экземпляра для отправки данных
• certificate: Управляет сертификатами для защищенных соединений
• certificateCollection: Выбирает коллекцию сертификатов Let's Encrypt
• certificates: Универсальный тип для управления различными типами сертификатов (начиная с Admin 6.4.0)
• checkbox: Флажок для логических значений
• checkDocker: Специальный компонент для проверки доступности Docker, и если она есть, вы можете активировать флажок (из Admin 7.8.0)
• checkLicense: Специальный компонент для онлайн-проверки лицензии.
• chips: Пользователь может ввести слова, которые добавляются в массив.
• color: Выбор цвета
• coordinates: Определяет текущее местоположение и используемые координаты из system.config, если это невозможно в формате latitude,longitude.
• credential: Выбирает учетные данные из центрального хранилища учетных данных (управляется в настройках администратора)
• cron: Настраивает выражения cron для планирования задач
• custom: Интегрирует пользовательские компоненты для определенных функций (только для Admin 6)
• datePicker: Позволяет пользователям выбрать дату
• deviceManager: показать диспетчер устройств
• divider: Создает горизонтальный разделитель строк
• file: Поле ввода с возможностью выбора файла и дополнительной возможностью загрузки/скачивания (только для Admin 6)
• fileSelector: Позволяет пользователям выбирать файлы из системы (только Admin6)
• func: Выбирает функцию из списка enum.func (только для Admin 6)
• header: Создает заголовок разных размеров (h1-h5)
• iframe: Отобразить iframe с указанным URL (admin >= 7.7.28)
• iframeSendTo: Отображение iframe с URL-адресом из административной панели (admin >= 7.7.28)
• image: Загружает или отображает изображение
• imageSendTo: Отображает изображение, полученное с бэкэнда, и отправляет данные в соответствии с командой.
• instance: Выбирает экземпляр адаптера
• interface: Выбирает интерфейс хоста, на котором работает экземпляр.
• ip: Поле ввода IP-адресов с расширенными параметрами
• jsonEditor: JSON-редактор для сложных конфигурационных данных
• language: Выбирает язык пользовательского интерфейса
• license: отображает информацию о лицензии, если она еще не принята.
• number: Числовое поле ввода с минимальными/максимальными значениями и шагом.
• oauth2: Настройте аутентификацию OAuth2 для адаптера (Admin 7.6.18 или новее)
• objectId: Выбирает идентификатор объекта с именем, цветом и значком.
• панель: Вкладка с элементами
• password: Поле ввода пароля
• pattern: Поле только для чтения, отображающее шаблон (например, URL)
• порт: Специальный ввод для портов
• qrCode: Отображает данные в виде QR-кода (Admin 7.0.18 или новее)
• qrCodeSendTo: Отображает QR-код с данными, полученными из бэкэнда.
• room: Выбирает комнату из списка enum.room (только для Admin 6)
• выбрать: Выпадающее меню с предопределенными параметрами
• selectSendTo: Выпадающее меню со значениями экземпляра для отправки данных
• sendTo: Кнопка, отправляющая запрос экземпляру
• setState: Кнопка, устанавливающая состояние экземпляра
• slider: Ползунок для выбора значения в заданном диапазоне (только для Admin 6)
• state: Отображение элементов управления или информации из состояния (admin >= 7.1.0)
• staticImage: Отображает статическое изображение
• staticInfo: Отображает статическую информацию в предварительно отформатированном виде, например, "Заголовок: единица измерения значения" (admin >= 7.3.3)
• staticLink: Создает статическую ссылку
• staticText: Отображает статический текст (например, описание)
• table: Таблица со строками, которые можно добавлять, удалять или изменять порядок.
• tabs: Вкладки с элементами
• текст: Поле ввода текста в одну или несколько строк
• textSendTo: Отображает элемент управления только для чтения с заданными значениями из экземпляра.
• timePicker: Позволяет пользователям выбрать время
• user: Выбирает пользователя из списка system.user
• uuid: Показать UUID iobroker
• yamlEditor: Редактор YAML для сложных конфигурационных данных (admin >= 7.7.30)

Используя конфигурацию в формате JSON, вы можете создать удобный и адаптируемый интерфейс настройки для вашего адаптера ioBroker.

Примеры проектов

Разделение крупных конфигураций

Включает

Требуется admin версии 6.17.1 или новее.

Для создания сложных JSON-файлов можно включать другие JSON-файлы. Включаемый файл должен находиться в том же каталоге, что и основной файл.

{
  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 - Интернационализация

Существует несколько вариантов предоставления переводов. Только первый из них совместим с нашим инструментом перевода Weblate, поэтому ему следует отдавать предпочтение!

Для включения функции перевода необходимо указать и активировать свойство i18n на верхнем уровне объекта конфигурации JSON.

{
  i18n: true,
}

Перевод в отдельных файлах: совместимо с Weblate

По умолчанию файлы должны находиться в следующих каталогах:

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

или

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

Кроме того, пользователь может указать путь к файлам i18n, i18n: customI18n и указать файлы в административной панели:

  "i18n": "customI18n",

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

или

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

Структура файла соответствует следующей структуре.

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",
}

При поиске перевода информация из соответствующего поля используется для поиска свойства с текстом в файлах. Если свойство не найдено, информация из поля остается неизменной. Рекомендуется вводить текст на английском языке.

Вводите перевод непосредственно в поля

Перевод можно указать во всех полях, которые могут содержать текст. Примеры таких полей: метка, заголовок, всплывающая подсказка, текст и т. д.

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

Обеспечьте перевод непосредственно в i18n

Переводы также могут быть предоставлены непосредственно в виде объекта в атрибуте i18n на верхнем уровне объекта jsonConfig.

При поиске перевода информация из соответствующего поля используется для поиска свойства с текстом в объекте i18n.

Если свойство не найдено, информация из поля остается неизменной. Рекомендуется вводить текст на английском языке.

Типы элементов

Каждый элемент может иметь общие атрибуты и специальные атрибуты, относящиеся к соответствующему типу, следующим образом.

tabs

Вкладки с элементами

panel

Вкладка с элементами

text

Текстовый компонент

number

color

выбор цвета

checkbox

показать флажок

slider

показать слайдер (только для Admin6)

qrCode

Отображение данных в QR-коде (admin >= 7.0.18)

ip

адрес привязки

user

Выбрать пользователя из system.user. (С указанием цвета и значка)

room

Выберите комнату из enum.room (с цветом и значком) - (только для Admin6)

func

Выберите функцию из enum.func (с цветом и значком) - (только для Admin6)

select

Каждый параметр в options может иметь:

Пример для select options

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

или

[
   {
      "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

сохраняет изображение как файл объекта adapter.X или в формате base64 в атрибуте

Пример для 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 >= 6.17.18)

Отображает кнопку аутентификации OAuth2 для получения токенов обновления и доступа для адаптера.

Для использования этой функции необходимо сначала предоставить данные OAuth2 (идентификатор клиента, секретный ключ и т. д.) команде технической поддержки ioBroker, чтобы они могли добавить их в облако.

Пример для oauth2

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

См. также OAUTH2.md для получения дополнительной информации.

objectId

Идентификатор объекта: отобразить его с именем, цветом и значком.

Примеры для customFilter

Показывать только объекты с некоторыми пользовательскими настройками

{common: {custom: true}}

Отображать только объекты с пользовательскими настройками SQL.0 (только для конкретного экземпляра)

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

Отображать только объекты адаптеров influxdb или sql или history

{common: {custom: '_dataSources'}}

Отображать только объекты с пользовательскими настройками для конкретного адаптера (все экземпляры)

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

Показывать только каналы

{type: 'channel'}

Показывать только каналы и устройства

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

Показывать только состояния типа 'число'

{common: {type: 'number'}

Показывать только состояния типа 'число' и 'строка'

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

Показывать только штаты с ролями, начинающимися с switch

{common: {role: 'switch'}

Отображать только штаты с ролями, начинающимися с switch и button

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

password

Этот тип поля влияет только на пользовательский интерфейс. Пароли и другие конфиденциальные данные следует хранить в зашифрованном виде! Для этого ключ необходимо указать в файле io-package.json в разделе nativeEncrypted. Кроме того, вы можете защитить это свойство от передачи другим адаптерам, кроме admin и cloud, добавив его в protectedNative в файле io-package.json.

instance

chips

Пользователь может ввести слово, и оно будет добавлено (см. облако => сервисы => Белый список). Если параметр delimiter не определен, на выходе получается массив.

alive

Это всего лишь индикатор того, активен ли экземпляр, и его можно использовать в состояниях "скрытый" и "отключенный" (он не будет сохранен в конфигурации).

Просто текст: Экземпляр запущен, Экземпляр не запущен

pattern

Поле только для чтения с шаблоном типа 'https://${data.ip}:${data.port}' (не будет сохранено в конфигурации). Текстовое поле ввода с флагом "только для чтения", отображающее шаблон.

sendTo

Кнопка, отправляющая запрос текущему экземпляру (https://github.com/iobroker-community-adapters/ioBroker.email/blob/master/admin/index_m.html#L128)

setState

кнопка, которая устанавливает состояние экземпляра

staticText

Статический текст, похожий на описание

Необходимо указать ровно один из пунктов label или text, но не оба одновременно.

staticLink

staticImage

table

Таблица с элементами, которые можно удалить, добавить, переместить вверх, переместить вниз.

accordion

Аккордеон с элементами, которые можно удалять, добавлять, перемещать вверх или вниз (Admin 6.6.0 и новее)

jsonEditor

Кнопка для открытия редактора JSON(5). JSON5 поддерживается начиная с версии административной панели 5.7.3.

Сам редактор не принадлежит этой библиотеке: хост передает его вместе со свойством AceEditor из JsonConfig / JsonConfigComponent. react-ace включает в себя весь ace-builds, и в противном случае он попал бы в каждый пакет, использующий эту библиотеку, включая пользовательские компоненты адаптеров, хотя редактор отображается только в трех из шестидесяти элементов управления. Без него поле возвращается к обычной текстовой области, которую по-прежнему можно читать и записывать.

yamlEditor

Кнопка для открытия редактора YAML с проверкой синтаксиса. (Начиная с административной версии 7.7.30)

language

выберите язык

certificate

certificates

Это универсальный тип, который управляет атрибутами certPublic, certPrivate, certChained и leCollection.

Пример:

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

certCollection

Выберите коллекцию сертификатов, используйте все коллекции или вообще не используйте Let's Encrypt.

credential

Выберите учетные данные из центрального хранилища учетных данных. Управление учетными данными осуществляется в настройках администратора (Настройки → Учетные данные), а в конфигурации адаптера в соответствующем атрибуте хранится только идентификатор выбранных учетных данных (например, system.credentials.anthropic).

Если параметр disableCreation не задан, рядом с селектором отображается кнопка ➕, которая открывает небольшое диалоговое окно «Добавить учетные данные» - аналогичное диалоговому окну администратора. Оно предлагает шаблоны (с иконками), отфильтрованные по параметру credentialType (например, Anthropic / ChatGPT / Google Gemini для ai, а также общие шаблоны «Логин и пароль» и «Ключ»). Выбранный шаблон определяет форму, предлагаемое имя и иконку; секретные поля шифруются системным секретом при сохранении. Вновь созданные учетные данные сохраняются как system.credentials.<name> и выбираются немедленно.

Пример:

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

У каждого пользователя есть одна из двух форм: login (поля login и password) или key (одно поле key, например, ключ API). В адаптере чтение и расшифровка учетных данных осуществляется с помощью @iobroker/adapter-core:

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

только Администратор6

Пример URL-адреса

• custom/customComponents.js: в этом случае файлы будут загружены из /adapter/ADAPTER_NAME/custom/customComponents.js
• https://URL/myComponent: прямая ссылка из URL
• ./adapter/ADAPTER_NAME/custom/customComponent.js: в этом случае файлы будут загружены из /adapter/ADAPTER_NAME/custom/customComponents.js

datePicker

Предоставить пользователю возможность выбрать поле ввода даты; формат пользовательского интерфейса задается в соответствии с заданными параметрами.

timePicker

Позволяет пользователю выбрать дату в поле ввода; возвращаемая строка представляет собой строку даты, пригодную для анализа, или имеет формат HH:mm:ss

divider

горизонтальная линия

header

cron

Отображает настройки CRON. У вас есть 3 варианта:

• simple - отображает простые настройки CRON
• complex - отображает CRON с указанием "минут", "секунд" и так далее.
• Нет вариантов «простой» или «сложный» - Пользователь может переключаться между простым и сложным режимами в диалоговом окне

fileSelector

Выберите файл из одной папки в виде выпадающего меню. И при желании вы можете загрузить новый файл в эту папку.

только Администратор6

file

Поле ввода с селектором файлов. Оно будет отображаться как текстовое поле с кнопкой рядом для открытия диалогового окна. Только для Admin6.

imageSendTo

отображает изображение, полученное с бэкэнда в виде строки base64.

Пример кода в бэкэнде для 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

Отправляет команду экземпляру адаптера и отображает строку ответа в виде QR-кода. Бэкенд должен вернуть обычную строку (данные для кодирования).

Пример кода в бэкэнде для 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

Отображает iframe с указанным URL-адресом. (из Admin 7.7.28)

Пример для iframe

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

iframeSendTo

Отображает iframe с URL-адресом, полученным из бэкэнда. (из Admin 7.7.28)

Бэкенд должен возвращать URL-адрес в виде строки.

Пример для iframeSendTo

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

Пример кода в бэкэнде для 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

Отображает выпадающее меню со значениями, заданными в экземпляре.

Обработчик на стороне бэкэнда может возвращать элементы с необязательным полем description: [{"value": 1, "label": "one", "description": "Some hint"}, ...]. Описание отображается под меткой в выпадающем списке.

Пример кода на бэкэнде для 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

Отображает элемент управления автозаполнением, использующий значения, заданные в экземпляре.

Для использования этой опции ваш адаптер должен реализовывать обработчик сообщений:

Результатом команды должен быть массив в формате ["value1", {"value": "value2", "label": "Value2"}, ...] (ключи и имена (значения) должны быть уникальными). Пример обработчика см. в selectSendTo

textSendTo

Отображает элемент управления только для чтения, заданный значениями из экземпляра.

Для использования этой опции ваш адаптер должен реализовывать обработчик сообщений: Результатом команды должна быть строка или объект со следующими параметрами:

{
  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
}

Пример для 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

Определяет текущее местоположение и используемые координаты system.config, если это невозможно в форме latitude,longitude

interface

Выберите интерфейс хоста, на котором запущен экземпляр.

Общие атрибуты элементов управления

Параметры макета xl,lg,md,sm,xs

Эти параметры используются для определения ширины элементов на экранах разных размеров, обеспечивая адаптивный и отзывчивый дизайн на различных устройствах.

Допустимые числа - от 1 до 12.

Если вы укажете число, например, 6, то ширина элемента составит 6/12 (50%) от ширины экрана, или, например, 3, то ширина элемента составит 3/12 (25%) от ширины экрана. Присвоение чисел различным параметрам компоновки позволяет задать ширину элемента для разных размеров экрана.

Ниже представлены рекомендуемые предустановки, подходящие для большинства случаев.

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

Рекомендуется проверить схему расположения

Для каждого адаптера следует проверить соответствующую схему расположения элементов, чтобы убедиться, что она отображается и используется во всех разрешениях.

Это можно проверить, например, с помощью инструментов веб-разработчика, которые встроены в каждый браузер на основе Chromium.

Шаг 1: Откройте инструменты веб-разработчика, нажав клавишу F12.

Шаг 2: Откройте панель инструментов устройства (1)

Шаг 3: Выберите разные устройства (2)

В настройках инструментов веб-разработчика вы можете создавать собственные устройства с точно заданной шириной, если это необходимо.

Дополнительные опции

Отображение элементов в зависимости от операционной системы

Каждый элемент (включая panel, tabs, столбцы таблицы и отдельные параметры select) может быть ограничен операционной системой хоста ioBroker, на котором работает настроенный экземпляр. Это не операционная система браузера.

{
    "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" }
}

Допустимые значения соответствуют значениям из node.js process.platform (как в common.os или io-package.json): aix, android, cygwin, darwin, freebsd, haiku, linux, netbsd, openbsd, sunos, win32.

• Если указан параметр os, элемент будет отображаться только в указанных операционных системах.
• Если параметр notOs задан, элемент будет отображаться во всех операционных системах, кроме указанных.
• Если операционная система хоста не может быть определена (например, объект хоста недоступен для чтения), элемент

будет показано. Лучше показать один элемент больше, чем скрыть необходимый.

• Неотображаемый элемент не удаляется: его значение остается неизменным в конфигурации, точно так же, как и у hidden.

Однако значение default такого элемента не будет записано в конфигурацию.

Для более сложных условий переменные _os, _arch и _host могут использоваться в каждой функции JavaScript (hidden, disabled, validator, defaultFunc, onChange.calculateFunc, confirm.condition), а также в текстовых шаблонах label, help и так далее:

{
    "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}"
}

Отображать или отключать элементы в зависимости от состояния ioBroker

С помощью dependsOnStates элемент может реагировать на значения состояний ioBroker. На состояния подписывается пользователь, поэтому элемент обновляется немедленно при изменении состояния - перезагрузка диалога конфигурации не требуется.

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

• Параметр dependsOnStates записывается как {"<alias>": "<state ID>"}. Значения доступны во всех функциях JavaScript.

(hidden, disabled, validator, defaultFunc, onChange.calculateFunc, confirm.condition) и в текстовых шаблонах label, help, tooltip и так далее, например, _states.<alias>.

• _states.<alias> содержит весь объект состояния, поэтому _states.running?.val, _states.running?.ts,

Можно использовать _states.running?.ack. Если состояние не существует, используется null, поэтому всегда используйте ?..

• Идентификатор состояния, начинающийся с точки, указывает на собственный экземпляр: .info.browsing => myAdapter.0.info.browsing.

Все остальные идентификаторы используются как есть, поэтому можно отслеживать и состояние других адаптеров.

• Идентификатор может содержать шаблоны ${data.xxx}, например, "device": "${data.deviceInstance}.info.connection".

Если конфигурация изменится, проблема будет решена заново. Использование символов подстановки (*) не допускается.

• Если изменяется одно из состояний, то hidden, disabled, label, help, validator и defaultFunc этого объекта.

Значение элемента будет пересчитано заново. Каждое состояние подписывается только один раз, независимо от того, сколько элементов (или строк таблицы) его используют.

• Краткая форма "dependsOnStates": ["admin.0.info.connection"] использует сам идентификатор в качестве псевдонима:

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

• Этот атрибут может использоваться для любого элемента, в том числе для панели, вкладок и столбцов таблицы.

Примечание: старые версии административной панели не распознают _states и выдадут ошибку при выполнении такой функции, поэтому элемент останется видимым и активным.

Примечание: старые версии административной панели не распознают _os и будут интерпретировать "hidden": "_os !== 'linux'" как true, скрывая элемент повсюду. Поэтому следует отдавать предпочтение os/notOs, поскольку старые версии административной панели просто игнорируют их (элемент будет показан). Если необходимо использовать функцию JavaScript, напишите её с запасом: "hidden": "!!_os && _os !== 'linux'".

Docker

Если элемент зависит от того, работает ли сам ioBroker в контейнере Docker, можно использовать атрибут docker:

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

• "docker": true - элемент будет отображаться только в том случае, если ioBroker работает в контейнере Docker.
• "docker": false - элемент будет отображаться только в том случае, если ioBroker не работает в контейнере Docker.
• Состояние Docker нельзя прочитать из объектов, его необходимо запросить у работающего хоста. Если хост

Если ответ не получен, состояние остаётся неизвестным, и элемент будет показан.

• Запрос будет отправлен только в том случае, если в конфигурации действительно используется docker или _host.docker, поэтому все остальные варианты не подойдут.

Настройки не приводят к увеличению трафика.

• В функциях JavaScript состояние доступно как _host.docker (true, false или undefined, если значение неизвестно) и

версия официального образа Docker для ioBroker - _host.dockerVersion.

Не путайте это с элементом управления checkDocker: тот проверяет наличие установленного Docker на хосте для управления контейнерами, а не то, работает ли сам ioBroker в Docker.

Параметры с подробной конфигурацией

defaultSendTo

Команда для запроса начального значения у запущенного экземпляра, например: "myInstance": {"type": "text", "defaultSendTo": "fill"}

• данные - статические данные
• jsonData - статические данные
• Если параметры data и jsonData не определены, будет отправлена следующая информация: {"attr": "<имя атрибута>", "value": "<текущее значение>"}
• button - метка кнопки для повторного запуска запроса от экземпляра
• buttonTooltip - Всплывающая подсказка для кнопки (по умолчанию: Запрос данных по экземпляру)
• buttonTooltipNoTranslation - Не переводить всплывающую подсказку кнопки
• allowSaveWithError - Разрешить сохранение конфигурации, даже если экземпляр находится в автономном режиме.

confirm

• condition - Функция JavaScript: true показать диалог подтверждения
• текст - текст диалога подтверждения
• title - заголовок диалога подтверждения
• ok - Текст для кнопки OK
• отмена - Текст для кнопки «Отмена»
• type - Один из следующих вариантов: info, warning, error, none
• alsoDependsOn - массив с атрибутами, позволяющий проверять условие также по этим атрибутам.

Автозаполнение

Number, text, checkbox, select поддерживают автозаполнение, позволяющее выбирать варианты, если они используются в качестве пользовательских настроек. В этом случае значение будет предоставлено в виде массива всех возможных значений.

Пример:

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

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

В этом случае ввод должен быть текстовым, как показано в обозначении __different__, с возможностью автозаполнения, предлагающей три возможных значения. Пользователи могут выбрать из выпадающего списка 1000, 2000 или 3000 или ввести собственное новое значение, например, 500.

Логическое значение должно поддерживать неопределенность, если значение равно [false, true].

Для неизмененного значения __different__ необходимо вернуть другое значение:

Вход:

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

Если время ожидания не было изменено, выведите следующий результат:

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

Значение __different__ зарезервировано, и ни один текстовый ввод не может принять его от пользователя.

Компонент должен выглядеть следующим образом

<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)}
/>

Если схема не указана, она должна быть создана автоматически на основе данных.

• логическое значение => флажок
• текст => текстовый ввод
• number => number
• имя bind => ip
• имя порт => номер, мин=1, макс=0xFFFF
• name timeout => number, help="ms"

Todo

Следующие главы взяты из оригинального файла SCHEMA.MD. Я не до конца понял содержание, и мне потребовалась помощь bluefox для его доработки.

Функции JavaScript

Диалог конфигурации

Функция JavaScript:

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);

Если статус alive изменится, все поля необходимо будет обновить, проверить, отключить или скрыть заново.

В настройках адаптера в функции JavaScript доступны следующие переменные:

• data - собственные настройки для этого экземпляра или текущей строки в таблице (для доступа ко всем настройкам используйте globalData)
• _system - конфигурация системы
• _alive - означает, что экземпляр жив.
• _common - общие настройки для этого экземпляра
• _socket - сокет
• _instance - номер экземпляра
• arrayIndex - используется только в таблицах и представляет текущую строку в массиве.
• globalData - используется только в таблице для всех настроек, а не только в одной строке таблицы.
• _os - операционная система хоста, на котором работает экземпляр (process.platform), например, linux, win32, darwin. Пустая строка, если неизвестна.
• _arch - архитектура хоста, на котором работает экземпляр, например, x64, arm64
• _host - информация о хосте: {id, os, osType, arch, release, nodeVersion, controllerVersion, docker, dockerVersion}. docker имеет значение undefined, если состояние Docker не запрашивалось или хост не ответил.
• _states - значения состояний из dependsOnStates: {<alias>: <state object>}. null, если состояние не существует.

Диалог пользовательских настроек

Функция JavaScript:

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
);

В пользовательских настройках в функции JavaScript доступны следующие переменные:

• data - текущие пользовательские настройки или текущая строка в таблице (для доступа ко всем настройкам используйте globalData)
• originalData - Неизмененные данные
• _system - конфигурация системы
• instanceObj - объект экземпляра адаптера
• customObj - сам текущий объект
• _socket - сокет
• arrayIndex - используется только в таблицах и представляет текущую строку в массиве.
• globalData - используется только в таблице для всех настроек, а не только в одной строке таблицы.
• _os - операционная система хоста, на котором работает экземпляр (process.platform), например, linux, win32, darwin. Пустая строка, если неизвестна.
• _arch - архитектура хоста, на котором работает экземпляр, например, x64, arm64
• _host - информация о хосте: {id, os, osType, arch, release, nodeVersion, controllerVersion, docker, dockerVersion}. docker имеет значение undefined, если состояние Docker не запрашивалось или хост не ответил.
• _states - значения состояний из dependsOnStates: {<alias>: <state object>}. null, если состояние не существует.

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

Вы можете ограничить применение пользовательских настроек только определенными состояниями, определив statesFilter в корневом элементе (panel или tabs) пользовательских настроек:

jsonCustom.json:

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

Пользовательский компонент

<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 */ {}}
/>

Примеры можно найти в адаптере [telegram или в pushbullet.

Вкладка JSON в админке

Начиная с административной версии 7.6.x, вы можете определить вкладку (например, backitup или matter) с помощью конфигурации JSON.

Для этого необходимо определить следующее в разделе io-package.json в части common:

{
   "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)
      },
      // ....
   }
}

Файл jsonTab.json5 может выглядеть следующим образом:

{
   "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,
      }
   }
}

Если указан параметр sendTo, экземпляр получит сообщение (common.messagebox должен быть истинным в io-package.json) с командой tab или со значением, хранящимся в sendTo, если это строка. Экземпляр должен ответить структурой следующего вида:

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);
    }
};

Сообщить об ошибке схемы

Создайте заявку здесь: https://github.com/ioBroker/ioBroker.admin/issues

Для сопровождающего

Чтобы обновить расположение схемы JsonConfig, создайте запрос на слияние в этот файл: https://github.com/ioBroker/ioBroker.admin/blob/master/packages/jsonConfig/schemas/jsonConfig.json

Для разработчика

Схема используется здесь: 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.