@iobroker/json-config 9.0.23 → 9.1.0

package/README.md

@@ -1503,6 +1503,7 @@ In the Settings of the Web developer tools, you can create your own devices with
 | `notOs`                  | Do not show this element on these operating systems of the host, on which the instance runs: `"win32"` or `["linux", "darwin"]`                                                       |
 | `docker`                 | Show this element only if the ioBroker runs (`true`) or does not run (`false`) in a docker container                                                                                  |
 | `disabled`               | JS function that could use `native.attribute` for calculation                                                                                                                         |
+| `dependsOnStates`        | ioBroker states, on which this element depends: `{"running": ".info.browsing"}`. See [Show or disable elements depending on ioBroker states](#show-or-disable-elements-depending-on-iobroker-states) |
 | `help`                   | help text (multi-language)                                                                                                                                                            |
 | `helpLink`               | href to help (could be used only together with `help`)                                                                                                                                |
 | `style`                  | CSS style in ReactJS notation: `radiusBorder` and not `radius-border`.                                                                                                                |
@@ -1558,6 +1559,42 @@ the text patterns of `label`, `help` and so on:
 }
 ```
 
+### Show or disable elements depending on ioBroker states
+
+With `dependsOnStates`, an element can react on the values of ioBroker states. The states are subscribed,
+so the element is updated immediately if a state changes - no reload of the configuration dialog is required.
+
+```json5
+{
+    "startBrowse": {
+        "type": "sendTo",
+        "command": "browse",
+        "label": "${_states.running?.val ? 'Stop browse' : 'Start browse'}",
+        "dependsOnStates": { "running": ".info.browsing" },
+        "disabled": "!!_states.running?.val"
+    }
+}
+```
+
+- `dependsOnStates` is written as `{"<alias>": "<state ID>"}`. The values are available in **all** JS functions
+  (`hidden`, `disabled`, `validator`, `defaultFunc`, `onChange.calculateFunc`, `confirm.condition`) and in the
+  text patterns of `label`, `help`, `tooltip` and so on as `_states.<alias>`.
+- `_states.<alias>` contains the **whole state object**, so `_states.running?.val`, `_states.running?.ts`,
+  `_states.running?.ack` can be used. It is `null` if the state does not exist, so always use `?.`.
+- A state ID that starts with a dot addresses the own instance: `.info.browsing` => `myAdapter.0.info.browsing`.
+  Every other ID is used as it is, so the states of other adapters can be monitored too.
+- The ID may contain `${data.xxx}` patterns, e.g. `"device": "${data.deviceInstance}.info.connection"`.
+  It will be resolved anew if the configuration changes. Wildcards (`*`) are **not** allowed.
+- If one of the states changes, `hidden`, `disabled`, `label`, `help`, `validator` and `defaultFunc` of this
+  element will be calculated anew. Every state is subscribed only once, independent of how many elements
+  (or table lines) use it.
+- The short form `"dependsOnStates": ["admin.0.info.connection"]` uses the ID itself as an alias:
+  `_states['admin.0.info.connection']`.
+- The attribute may be used on every element, also on `panel`, `tabs` and table columns.
+
+**Note:** old admin versions do not know `_states` and would throw an error by the evaluation of such a
+function, so the element would stay visible and enabled.
+
 **Note:** old admin versions do not know `_os` and would evaluate `"hidden": "_os !== 'linux'"` to `true`
 and so hide the element everywhere. Because of that, `os`/`notOs` should be preferred, as they are simply
 ignored by old admin versions (the element will be shown). If a JS function must be used, write it
@@ -1708,6 +1745,7 @@ const func = new Function(
   '_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);
@@ -1728,6 +1766,7 @@ The following variables are available in JS function in adapter settings:
 - `_os` - operating system of the host, on which the instance runs (`process.platform`), e.g. `linux`, `win32`, `darwin`. Empty string if unknown
 - `_arch` - architecture of the host, on which the instance runs, e.g. `x64`, `arm64`
 - `_host` - information about the host: `{id, os, osType, arch, release, nodeVersion, controllerVersion, docker, dockerVersion}`. `docker` is `undefined` if the docker state was not requested or the host did not answer
+- `_states` - values of the states from [`dependsOnStates`](#show-or-disable-elements-depending-on-iobroker-states): `{<alias>: <state object>}`. `null` if the state does not exist
 
 ### Custom settings dialog
 
@@ -1748,6 +1787,7 @@ const func = new Function(
   "_os",
   "_arch",
   "_host",
+  "_states",
   myValidator.includes("return") ? myValidator : "return " + myValidator
 ); // e.g. "_alive === true"
 
@@ -1774,6 +1814,7 @@ The following variables are available in JS function in custom settings:
 - `_os` - operating system of the host, on which the instance runs (`process.platform`), e.g. `linux`, `win32`, `darwin`. Empty string if unknown
 - `_arch` - architecture of the host, on which the instance runs, e.g. `x64`, `arm64`
 - `_host` - information about the host: `{id, os, osType, arch, release, nodeVersion, controllerVersion, docker, dockerVersion}`. `docker` is `undefined` if the docker state was not requested or the host did not answer
+- `_states` - values of the states from [`dependsOnStates`](#show-or-disable-elements-depending-on-iobroker-states): `{<alias>: <state object>}`. `null` if the state does not exist
 
 ```json5
 {
@@ -1907,10 +1948,14 @@ The schema is used here: https://github.com/SchemaStore/schemastore/blob/6da29cd
 	### **WORK IN PROGRESS**
 -->
 ## Changelog
+### 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
+- (@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

package/build/JsonConfigComponent/ConfigGeneric.d.ts

@@ -90,8 +90,60 @@ export default class ConfigGeneric<Props extends ConfigGenericProps = ConfigGene
     private reportedHidden;
     private calculateTimeout;
     private readonly AsyncFunction;
+    /** Resolved `dependsOnStates` of this element: alias => state ID */
+    protected stateAliases: Record<string, string> | null;
+    /** True if this element has subscribed on states, so it must unsubscribe if `dependsOnStates` disappears */
+    protected statesSubscribed: boolean;
     constructor(props: Props);
     protected getCachedObject(id: string): Promise<ioBroker.Object | null>;
+    /**
+     * Bring the `dependsOnStates` attribute into the form `{ alias: stateID }`.
+     * In the short array form the state ID is used as an alias too.
+     *
+     * @param dependsOnStates value of the `dependsOnStates` attribute
+     * @returns aliases with the still unresolved state IDs
+     */
+    static normalizeDependsOnStates(dependsOnStates: Record<string, string> | string[] | undefined): Record<string, string>;
+    /**
+     * Build the real state ID out of a `dependsOnStates` entry: resolve the `${data.xxx}` patterns and
+     * expand a leading dot (`.info.running`) to the namespace of the own instance.
+     *
+     * @param id state ID from the schema
+     * @returns the resolved state ID or an empty string if it cannot be used
+     */
+    protected resolveStateId(id: string): Promise<string>;
+    /**
+     * Resolve all state IDs of a `dependsOnStates` attribute.
+     *
+     * @param dependsOnStates value of the `dependsOnStates` attribute
+     * @returns aliases with the resolved state IDs
+     */
+    protected resolveDependsOnStates(dependsOnStates: Record<string, string> | string[] | undefined): Promise<Record<string, string>>;
+    /**
+     * Subscribe on the given state IDs. The promise is resolved as soon as all values are known,
+     * so the following calculation does not run with unknown states.
+     *
+     * @param ids resolved state IDs
+     */
+    protected subscribeOnStateIds(ids: string[]): Promise<void>;
+    /**
+     * Resolve the `dependsOnStates` attribute of this element and subscribe on the states.
+     *
+     * It is called before every calculation and not only once, because a state ID can contain a
+     * `${data.xxx}` pattern and so it can change if the user changes the configuration.
+     */
+    protected updateStateSubscriptions(): Promise<void>;
+    /** True if this element depends on ioBroker states */
+    protected usesDependsOnStates(): boolean;
+    /** One of the states from `dependsOnStates` changed => recalculate `hidden`, `disabled`, ... */
+    protected onDependsOnStateChanged: () => void;
+    /**
+     * Values of the subscribed states for the JS functions and patterns (`_states.<alias>`).
+     *
+     * @param aliases alias => state ID. If omitted, the aliases of this element are used
+     * @returns alias => state object. `null` if the state does not exist
+     */
+    protected getStateValues(aliases?: Record<string, string> | null): Record<string, ioBroker.State | null>;
     componentDidMount(): Promise<void>;
     private defaultSendTo;
     componentWillUnmount(): void;
@@ -104,7 +156,9 @@ export default class ConfigGeneric<Props extends ConfigGenericProps = ConfigGene
     getText(text: ioBroker.StringOrTranslated | undefined | null | {
         /** @deprecated */
         func: ioBroker.StringOrTranslated;
-    }, noTranslation?: boolean): string;
+    }, noTranslation?: boolean, 
+    /** Values for `_states`. If omitted, the states of this element are used */
+    states?: Record<string, ioBroker.State | null>): string;
     getTextAsync(text: ioBroker.StringOrTranslated, noTranslation?: boolean): Promise<string>;
     renderDialogConfirm(): JSX.Element | null;
     getIcon(iconSettings?: ConfigIconType | null): JSX.Element | null;
@@ -147,8 +201,12 @@ export default class ConfigGeneric<Props extends ConfigGenericProps = ConfigGene
      * @returns false if the element must not be shown on this host
      */
     static isHostAllowed(schema: Pick<ConfigItem, 'os' | 'notOs' | 'docker'>, hostInfo?: JsonConfigHostInfo): boolean;
-    execute(func: string | boolean | Record<string, string> | undefined, defaultValue: string | number | boolean | undefined, data: Record<string, any> | undefined, arrayIndex: number | undefined, globalData: Record<string, any> | undefined, funcName?: string): Promise<string | number | boolean | undefined>;
-    executeCustom(func: string | boolean | Record<string, string> | undefined, data: Record<string, any>, customObj: Record<string, any> | undefined, instanceObj: ioBroker.InstanceObject | undefined, arrayIndex: number | undefined, globalData: Record<string, any> | undefined, funcName?: string): Promise<string | boolean | number | null | undefined>;
+    execute(func: string | boolean | Record<string, string> | undefined, defaultValue: string | number | boolean | undefined, data: Record<string, any> | undefined, arrayIndex: number | undefined, globalData: Record<string, any> | undefined, funcName?: string, 
+    /** Values for `_states`. If omitted, the states of this element are used */
+    states?: Record<string, ioBroker.State | null>): Promise<string | number | boolean | undefined>;
+    executeCustom(func: string | boolean | Record<string, string> | undefined, data: Record<string, any>, customObj: Record<string, any> | undefined, instanceObj: ioBroker.InstanceObject | undefined, arrayIndex: number | undefined, globalData: Record<string, any> | undefined, funcName?: string, 
+    /** Values for `_states`. If omitted, the states of this element are used */
+    states?: Record<string, ioBroker.State | null>): Promise<string | boolean | number | null | undefined>;
     calculate(schema: Record<string, any>): Promise<{
         error: boolean;
         disabled: boolean;
@@ -164,10 +222,14 @@ export default class ConfigGeneric<Props extends ConfigGenericProps = ConfigGene
     getObject: (id: string) => Promise<ioBroker.Object | null>;
     getPatternAsync(pattern: string | {
         func: string;
-    }, data?: Record<string, any> | null, noTranslation?: boolean): Promise<string>;
+    }, data?: Record<string, any> | null, noTranslation?: boolean, 
+    /** Values for `_states`. If omitted, the states of this element are used */
+    states?: Record<string, ioBroker.State | null>): Promise<string>;
     getPattern(pattern: string | {
         func: string;
-    }, data?: Record<string, any>, noTranslation?: boolean): string;
+    }, data?: Record<string, any>, noTranslation?: boolean, 
+    /** Values for `_states`. If omitted, the states of this element are used */
+    states?: Record<string, ioBroker.State | null>): string;
     updateCalculatedValues(): void;
     render(): string | JSX.Element | null;
 }

package/build/JsonConfigComponent/ConfigGeneric.js

@@ -65,6 +65,10 @@ export default class ConfigGeneric extends Component {
     reportedHidden = false;
     calculateTimeout = null;
     AsyncFunction;
+    /** Resolved `dependsOnStates` of this element: alias => state ID */
+    stateAliases = null;
+    /** True if this element has subscribed on states, so it must unsubscribe if `dependsOnStates` disappears */
+    statesSubscribed = false;
     constructor(props) {
         super(props);
         this.AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
@@ -98,7 +102,128 @@ export default class ConfigGeneric extends Component {
         }
         return (await this.props.oContext.socket.getObject(id)) || null;
     }
+    /**
+     * Bring the `dependsOnStates` attribute into the form `{ alias: stateID }`.
+     * In the short array form the state ID is used as an alias too.
+     *
+     * @param dependsOnStates value of the `dependsOnStates` attribute
+     * @returns aliases with the still unresolved state IDs
+     */
+    static normalizeDependsOnStates(dependsOnStates) {
+        const result = {};
+        if (!dependsOnStates) {
+            return result;
+        }
+        if (Array.isArray(dependsOnStates)) {
+            dependsOnStates.forEach(id => {
+                if (id && typeof id === 'string') {
+                    result[id] = id;
+                }
+            });
+        }
+        else if (isObject(dependsOnStates)) {
+            Object.keys(dependsOnStates).forEach(alias => {
+                if (dependsOnStates[alias] && typeof dependsOnStates[alias] === 'string') {
+                    result[alias] = dependsOnStates[alias];
+                }
+            });
+        }
+        else {
+            console.error(`[JsonConfigComponent] Invalid dependsOnStates: ${JSON.stringify(dependsOnStates)}`);
+        }
+        return result;
+    }
+    /**
+     * Build the real state ID out of a `dependsOnStates` entry: resolve the `${data.xxx}` patterns and
+     * expand a leading dot (`.info.running`) to the namespace of the own instance.
+     *
+     * @param id state ID from the schema
+     * @returns the resolved state ID or an empty string if it cannot be used
+     */
+    async resolveStateId(id) {
+        let result = (id || '').toString();
+        if (result.includes('${')) {
+            result = await this.getPatternAsync(result, null, true);
+        }
+        result = result.trim();
+        if (result.startsWith('.')) {
+            result = `${this.props.oContext.adapterName}.${this.props.oContext.instance || 0}${result}`;
+        }
+        if (result.includes('*')) {
+            console.error(`[JsonConfigComponent] Wildcards are not allowed in dependsOnStates: ${result}`);
+            return '';
+        }
+        return result;
+    }
+    /**
+     * Resolve all state IDs of a `dependsOnStates` attribute.
+     *
+     * @param dependsOnStates value of the `dependsOnStates` attribute
+     * @returns aliases with the resolved state IDs
+     */
+    async resolveDependsOnStates(dependsOnStates) {
+        const aliases = ConfigGeneric.normalizeDependsOnStates(dependsOnStates);
+        const resolved = {};
+        for (const alias of Object.keys(aliases)) {
+            const id = await this.resolveStateId(aliases[alias]);
+            if (id) {
+                resolved[alias] = id;
+            }
+        }
+        return resolved;
+    }
+    /**
+     * Subscribe on the given state IDs. The promise is resolved as soon as all values are known,
+     * so the following calculation does not run with unknown states.
+     *
+     * @param ids resolved state IDs
+     */
+    async subscribeOnStateIds(ids) {
+        if (!ids.length && !this.statesSubscribed) {
+            return;
+        }
+        this.statesSubscribed = !!ids.length;
+        await this.props.oContext.subscribeStates?.(this, ids, this.onDependsOnStateChanged);
+    }
+    /**
+     * Resolve the `dependsOnStates` attribute of this element and subscribe on the states.
+     *
+     * It is called before every calculation and not only once, because a state ID can contain a
+     * `${data.xxx}` pattern and so it can change if the user changes the configuration.
+     */
+    async updateStateSubscriptions() {
+        this.stateAliases = await this.resolveDependsOnStates(this.props.schema?.dependsOnStates);
+        await this.subscribeOnStateIds(Object.values(this.stateAliases));
+    }
+    /** True if this element depends on ioBroker states */
+    usesDependsOnStates() {
+        return !!this.props.schema?.dependsOnStates || this.statesSubscribed;
+    }
+    /** One of the states from `dependsOnStates` changed => recalculate `hidden`, `disabled`, ... */
+    onDependsOnStateChanged = () => {
+        this.forceUpdate();
+    };
+    /**
+     * Values of the subscribed states for the JS functions and patterns (`_states.<alias>`).
+     *
+     * @param aliases alias => state ID. If omitted, the aliases of this element are used
+     * @returns alias => state object. `null` if the state does not exist
+     */
+    getStateValues(aliases) {
+        const map = aliases === undefined ? this.stateAliases : aliases;
+        const result = {};
+        if (map) {
+            Object.keys(map).forEach(alias => {
+                result[alias] = this.props.oContext.getStateValue?.(map[alias]) ?? null;
+            });
+        }
+        return result;
+    }
     async componentDidMount() {
+        if (this.usesDependsOnStates()) {
+            // Subscribe before the first calculation, so `defaultFunc` and `hidden` already see the values
+            await this.updateStateSubscriptions();
+        }
         if (this.props.schema?.defaultFunc) {
             if (this.props.custom) {
                 this.defaultValue = await this.executeCustom(this.props.schema.defaultFunc, this.props.data, this.props.customObj, this.props.oContext.instanceObj, this.props.arrayIndex, this.props.globalData, 'defaultFunc');
@@ -195,6 +320,10 @@ export default class ConfigGeneric extends Component {
         if (this.props.attr) {
             this.props.oContext.registerOnForceUpdate?.(this.props.attr);
         }
+        // Not only if `statesSubscribed` is true: the element could have released its states before (an ID
+        // with a `${data.xxx}` pattern was resolved to nothing), but it is still registered in the pool
+        this.props.oContext.unsubscribeStates?.(this);
+        this.statesSubscribed = false;
         if (this.sendToTimeout) {
             clearTimeout(this.sendToTimeout);
             this.sendToTimeout = null;
@@ -259,14 +388,16 @@ export default class ConfigGeneric extends Component {
             ConfigGeneric.setValue(data[part], attr, value);
         }
     }
-    getText(text, noTranslation) {
+    getText(text, noTranslation, 
+    /** Values for `_states`. If omitted, the states of this element are used */
+    states) {
         if (!text) {
             return '';
         }
         if (typeof text === 'string') {
             const strText = noTranslation ? text : I18n.t(text);
             if (strText.includes('${')) {
-                return this.getPattern(strText, undefined, noTranslation);
+                return this.getPattern(strText, undefined, noTranslation, states);
             }
             return strText;
         }
@@ -277,9 +408,9 @@ export default class ConfigGeneric extends Component {
                 if (typeof funcText.func === 'object') {
                     return this.getPattern(funcText.func[this.lang] ||
                         funcText.func.en ||
-                        '', undefined, true);
+                        '', undefined, true, states);
                 }
-                return this.getPattern(funcText.func, undefined, noTranslation);
+                return this.getPattern(funcText.func, undefined, noTranslation, states);
             }
             return text[this.lang] || text.en || '';
         }
@@ -604,7 +735,9 @@ export default class ConfigGeneric extends Component {
         }
         return true;
     }
-    async execute(func, defaultValue, data, arrayIndex, globalData, funcName) {
+    async execute(func, defaultValue, data, arrayIndex, globalData, funcName, 
+    /** Values for `_states`. If omitted, the states of this element are used */
+    states) {
         let fun;
         if (isObject(func)) {
             fun = func.func;
@@ -623,8 +756,8 @@ export default class ConfigGeneric extends Component {
             fun = ConfigGeneric.ensureAwaitGetObject(fun);
         }
         try {
-            const f = new this.AsyncFunction('data', 'originalData', '_system', '_alive', '_common', '_socket', '_instance', 'arrayIndex', 'globalData', '_changed', '_href', 'getObject', '_os', '_arch', '_host', fun.includes('return') ? fun : `return ${fun}`);
-            const result = await f(data || this.props.data || {}, this.props.originalData, this.props.oContext.systemConfig, this.props.alive, this.props.common, this.props.oContext.socket, this.props.oContext.instance, arrayIndex, globalData || {}, this.props.changed, window.location.href, this.getObject, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {});
+            const f = new this.AsyncFunction('data', 'originalData', '_system', '_alive', '_common', '_socket', '_instance', 'arrayIndex', 'globalData', '_changed', '_href', 'getObject', '_os', '_arch', '_host', '_states', fun.includes('return') ? fun : `return ${fun}`);
+            const result = await f(data || this.props.data || {}, this.props.originalData, this.props.oContext.systemConfig, this.props.alive, this.props.common, this.props.oContext.socket, this.props.oContext.instance, arrayIndex, globalData || {}, this.props.changed, window.location.href, this.getObject, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {}, states || this.getStateValues());
             this.debugLog(funcName || 'JS function', fun, result, data);
             return result;
         }
@@ -634,7 +767,9 @@ export default class ConfigGeneric extends Component {
             return defaultValue;
         }
     }
-    async executeCustom(func, data, customObj, instanceObj, arrayIndex, globalData, funcName) {
+    async executeCustom(func, data, customObj, instanceObj, arrayIndex, globalData, funcName, 
+    /** Values for `_states`. If omitted, the states of this element are used */
+    states) {
         let fun;
         if (isObject(func)) {
             fun = func.func;
@@ -653,8 +788,8 @@ export default class ConfigGeneric extends Component {
             fun = ConfigGeneric.ensureAwaitGetObject(fun);
         }
         try {
-            const f = new this.AsyncFunction('data', 'originalData', '_system', 'instanceObj', 'customObj', '_socket', 'arrayIndex', 'globalData', '_changed', '_href', 'getObject', '_os', '_arch', '_host', fun.includes('return') ? fun : `return ${fun}`);
-            const result = await f(data || this.props.data, this.props.originalData, this.props.oContext.systemConfig, instanceObj || {}, customObj || {}, this.props.oContext.socket, arrayIndex, globalData || {}, this.props.changed, window.location.href, this.getObject, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {});
+            const f = new this.AsyncFunction('data', 'originalData', '_system', 'instanceObj', 'customObj', '_socket', 'arrayIndex', 'globalData', '_changed', '_href', 'getObject', '_os', '_arch', '_host', '_states', fun.includes('return') ? fun : `return ${fun}`);
+            const result = await f(data || this.props.data, this.props.originalData, this.props.oContext.systemConfig, instanceObj || {}, customObj || {}, this.props.oContext.socket, arrayIndex, globalData || {}, this.props.changed, window.location.href, this.getObject, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {}, states || this.getStateValues());
             this.debugLog(funcName || 'JS function', fun, result, data);
             return result;
         }
@@ -801,7 +936,9 @@ export default class ConfigGeneric extends Component {
             return null;
         }
     };
-    async getPatternAsync(pattern, data, noTranslation) {
+    async getPatternAsync(pattern, data, noTranslation, 
+    /** Values for `_states`. If omitted, the states of this element are used */
+    states) {
         data ||= this.props.data;
         if (!pattern) {
             return '';
@@ -825,15 +962,15 @@ export default class ConfigGeneric extends Component {
         }
         try {
             if (this.props.custom) {
-                const f = new this.AsyncFunction('data', 'originalData', 'arrayIndex', 'globalData', '_system', 'instanceObj', 'customObj', '_socket', '_changed', '_href', 'getObject', '_os', '_arch', '_host', `return \`${ConfigGeneric.escapeString(patternStr, data)}\``);
-                const text = await f(data, this.props.originalData, this.props.arrayIndex, this.props.globalData, this.props.oContext.systemConfig, this.props.oContext.instanceObj, this.props.customObj, this.props.oContext.socket, this.props.changed, window.location.href, this.getObject, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {});
+                const f = new this.AsyncFunction('data', 'originalData', 'arrayIndex', 'globalData', '_system', 'instanceObj', 'customObj', '_socket', '_changed', '_href', 'getObject', '_os', '_arch', '_host', '_states', `return \`${ConfigGeneric.escapeString(patternStr, data)}\``);
+                const text = await f(data, this.props.originalData, this.props.arrayIndex, this.props.globalData, this.props.oContext.systemConfig, this.props.oContext.instanceObj, this.props.customObj, this.props.oContext.socket, this.props.changed, window.location.href, this.getObject, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {}, states || this.getStateValues());
                 if (noTranslation) {
                     return text;
                 }
                 return I18n.t(text);
             }
-            const f = new this.AsyncFunction('data', 'originalData', 'arrayIndex', 'globalData', '_system', '_alive', '_common', '_socket', '_changed', '_href', 'getObject', '_os', '_arch', '_host', `return \`${ConfigGeneric.escapeString(patternStr, data)}\``);
-            const text = await f(data, this.props.originalData, this.props.arrayIndex, this.props.globalData, this.props.oContext.systemConfig, this.props.alive, this.props.common, this.props.oContext.socket, this.props.changed, window.location.href, this.getObject, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {});
+            const f = new this.AsyncFunction('data', 'originalData', 'arrayIndex', 'globalData', '_system', '_alive', '_common', '_socket', '_changed', '_href', 'getObject', '_os', '_arch', '_host', '_states', `return \`${ConfigGeneric.escapeString(patternStr, data)}\``);
+            const text = await f(data, this.props.originalData, this.props.arrayIndex, this.props.globalData, this.props.oContext.systemConfig, this.props.alive, this.props.common, this.props.oContext.socket, this.props.changed, window.location.href, this.getObject, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {}, states || this.getStateValues());
             if (noTranslation) {
                 return text;
             }
@@ -844,7 +981,9 @@ export default class ConfigGeneric extends Component {
             return patternStr;
         }
     }
-    getPattern(pattern, data, noTranslation) {
+    getPattern(pattern, data, noTranslation, 
+    /** Values for `_states`. If omitted, the states of this element are used */
+    states) {
         data ||= this.props.data;
         if (!pattern) {
             return '';
@@ -868,15 +1007,15 @@ export default class ConfigGeneric extends Component {
         }
         try {
             if (this.props.custom) {
-                const f = new Function('data', 'originalData', 'arrayIndex', 'globalData', '_system', 'instanceObj', 'customObj', '_socket', '_changed', '_href', '_os', '_arch', '_host', `return \`${ConfigGeneric.escapeString(patternStr, data)}\``);
-                const text = f(data, this.props.originalData, this.props.arrayIndex, this.props.globalData, this.props.oContext.systemConfig, this.props.oContext.instanceObj, this.props.customObj, this.props.oContext.socket, this.props.changed, window.location.href, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {});
+                const f = new Function('data', 'originalData', 'arrayIndex', 'globalData', '_system', 'instanceObj', 'customObj', '_socket', '_changed', '_href', '_os', '_arch', '_host', '_states', `return \`${ConfigGeneric.escapeString(patternStr, data)}\``);
+                const text = f(data, this.props.originalData, this.props.arrayIndex, this.props.globalData, this.props.oContext.systemConfig, this.props.oContext.instanceObj, this.props.customObj, this.props.oContext.socket, this.props.changed, window.location.href, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {}, states || this.getStateValues());
                 if (noTranslation) {
                     return text;
                 }
                 return I18n.t(text);
             }
-            const f = new Function('data', 'originalData', 'arrayIndex', 'globalData', '_system', '_alive', '_common', '_socket', '_changed', '_href', '_os', '_arch', '_host', `return \`${ConfigGeneric.escapeString(patternStr, data)}\``);
-            const text = f(data, this.props.originalData, this.props.arrayIndex, this.props.globalData, this.props.oContext.systemConfig, this.props.alive, this.props.common, this.props.oContext.socket, this.props.changed, window.location.href, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {});
+            const f = new Function('data', 'originalData', 'arrayIndex', 'globalData', '_system', '_alive', '_common', '_socket', '_changed', '_href', '_os', '_arch', '_host', '_states', `return \`${ConfigGeneric.escapeString(patternStr, data)}\``);
+            const text = f(data, this.props.originalData, this.props.arrayIndex, this.props.globalData, this.props.oContext.systemConfig, this.props.alive, this.props.common, this.props.oContext.socket, this.props.changed, window.location.href, this.props.oContext.hostInfo?.os || '', this.props.oContext.hostInfo?.arch || '', this.props.oContext.hostInfo || {}, states || this.getStateValues());
             if (noTranslation) {
                 return text;
             }
@@ -897,6 +1036,11 @@ export default class ConfigGeneric extends Component {
             if (!schema) {
                 return;
             }
+            if (this.usesDependsOnStates()) {
+                // The state IDs can contain `${data.xxx}` patterns, so they must be resolved anew if the data changed.
+                // It waits for the first values, so the element is not calculated with unknown states.
+                await this.updateStateSubscriptions();
+            }
             const { error, disabled, hidden, defaultValue } = await this.calculate(schema);
             if (!this.state.calculatedValues ||
                 this.state.calculatedValues.error !== error ||