Der neue Monatsrückblick für Mai und Juni 2026 ist online!

[OliverIO]

Die Dokumentation wurde um eine Beschreibung in Deutsch und Englisch erweitert, wie man Templates mit KI entwickeln kann.

Es enthält eine Prompt-Vorlage, inklusive Beispielprompt, welche aktuell alle Empfehlungen enthält, so das die KI, das Template entwerfen kann.

Anmerkungen, Erfahrungen, Beispiel UseCases sind hier gerne gesehen.

https://github.com/oweitman/ioBroker.vis-jsontemplate/blob/main/README.md#developing-templates-with-ai

[OliverIO]

Neue Version 4.5.0

• Widget-Rendering korrigiert. Das vis-2 widget erhält nun initial auch wieder die datenpunkt daten.
• Such- und Vollbildfunktion zum Template Editor für das vis-2-Widget hinzugefügt
• KI-Dokumentation für Regex-Ausdrücke verbessert
• Für das vis-2 widget wurde das Theme für den Template editor für den Dark Mode optimiert.

[bahnuhr]

@OliverIO
benutze das widget schon sehr lange um eine json Auswahl als Objekt zu nehmen. Das ausgewählte Element wird dann in einen anderen DP geschrieben.
Du hattest mir damals folgendes geschrieben:

<% 
    var selectid="mydropdown2"; 
    var dp_write = "javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt";
%>
<script>
debugger;
    var selectid="<%- selectid %>";
    var dp_write="<%- dp_write %>";
    
    function writeDP(el) {
        if (el.selectedOptions[0].text) vis.setValue(dp_write,el.selectedOptions[0].text);
    }

</script>
<style>
#mydropdown2 {
    color:rgb(255,255,255);
    width: 250px;
    background:black;
    font-size:24px;
}
</style>
</style><select id="<%- selectid %>" name="<%- selectid %>" size="1" onchange="javascript:writeDP(this)" >
<% debugger; %>
<% for (var i = 0; i<data.length;i++) { %>
  <option <%- ((dp[dp_write]==data[i]) ? "selected":"") %>><%- data[i] %></option>
<% } %>
</select>

Dies hatte ich dann als json Vorlage in edit eingetragen.

Nun wollte ich dies so ändern, dass beim Aufruf der view das widget einen bestimmten Wert (z.B. der Wert 10 vom json) einträgt und sichtbar darstellt.
Alle Versuche mit chatgpt haben nicht geklappt. Es wird mir immer der 1.Wert des json angezeigt.

Hast du dafür eine Idee ?

[OliverIO]

@bahnuhr

ich habe deinen post mal bei mir in chatgpt hineingeworfen.
Das Ergebnis habe ich jetzt aktuell nicht getestet. Probier mal

Ausserdem habe ich mittlerweile eine KI Promptvorlage entwickelt, die man für solche sachen verwenden kann
https://github.com/oweitman/ioBroker.vis-jsontemplate/blob/main/documentation/KI-DE.md
Hier der chatgpt output

---

Ja. Der entscheidende Punkt ist: Du musst beim Erzeugen der <option>-Elemente das gewünschte Element mit selected markieren. Ein späteres JavaScript-Setzen funktioniert im JSON-Template oft nicht zuverlässig, weil das Widget beim Rendern den HTML-Inhalt vollständig neu erzeugt.

Hier eine direkt einsetzbare Variante, die beim ersten Aufruf den JSON-Eintrag mit dem Index 10 auswählt und dessen Wert in den Datenpunkt schreibt:

<%
    var selectid = "mydropdown2";
    var dp_write = "javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt";

    /*
     * Gewünschter Eintrag im JSON-Array.
     *
     * Achtung:
     * Arrays beginnen bei Index 0.
     *
     * Index 10 bedeutet somit das 11. Element.
     * Für das 10. Element wäre der Index 9.
     */
    var defaultIndex = 10;

    var currentValue = dp && dp[dp_write] !== undefined
        ? String(dp[dp_write])
        : "";

    var defaultValue = "";

    if (Array.isArray(data) && data.length > defaultIndex) {
        defaultValue = String(data[defaultIndex]);
    }

    /*
     * Wenn im Ziel-Datenpunkt bereits ein gültiger Wert steht,
     * wird dieser angezeigt.
     *
     * Andernfalls wird der gewünschte Standardwert verwendet.
     */
    var selectedValue = currentValue;

    if (
        !selectedValue ||
        !Array.isArray(data) ||
        data.map(String).indexOf(selectedValue) === -1
    ) {
        selectedValue = defaultValue;
    }
%>

<script>
    var jsontemplateSelectId_<%- widgetid %> = "<%- selectid %>";
    var jsontemplateWriteDp_<%- widgetid %> = "<%- dp_write %>";
    var jsontemplateInitialValue_<%- widgetid %> = "<%- selectedValue %>";

    function jsontemplateWriteSelection_<%- widgetid %>(element) {
        if (!element || element.selectedIndex < 0) {
            return;
        }

        var selectedOption = element.options[element.selectedIndex];

        if (!selectedOption) {
            return;
        }

        vis.setValue(
            jsontemplateWriteDp_<%- widgetid %>,
            selectedOption.value
        );
    }

    setTimeout(function () {
        var element = document.getElementById(
            jsontemplateSelectId_<%- widgetid %>
        );

        if (!element) {
            return;
        }

        element.value = jsontemplateInitialValue_<%- widgetid %>;

        /*
         * Nur schreiben, wenn der DP noch nicht den angezeigten Wert enthält.
         */
        var currentDpValue = "<%- currentValue %>";

        if (
            element.value &&
            String(currentDpValue) !== String(element.value)
        ) {
            vis.setValue(
                jsontemplateWriteDp_<%- widgetid %>,
                element.value
            );
        }
    }, 0);
</script>

<style>
    #<%- widgetid %> #<%- selectid %> {
        color: rgb(255, 255, 255);
        width: 250px;
        background: black;
        font-size: 24px;
    }
</style>

<select
    id="<%- selectid %>"
    name="<%- selectid %>"
    size="1"
    onchange="jsontemplateWriteSelection_<%- widgetid %>(this)"
>
    <% if (Array.isArray(data)) { %>
        <% for (var i = 0; i < data.length; i++) { %>
            <%
                var optionValue = String(data[i]);
                var isSelected = optionValue === selectedValue;
            %>

            <option
                value="<%- optionValue %>"
                <%- isSelected ? "selected" : "" %>
            ><%- optionValue %></option>
        <% } %>
    <% } %>
</select>

Wichtig: Index oder Wert?

Bei:

var defaultIndex = 10;

wird wegen der nullbasierten Array-Indizierung das 11. Element gewählt:

data[0]  = erstes Element
data[9]  = zehntes Element
data[10] = elftes Element

Soll tatsächlich das zehnte Element vorausgewählt werden, muss es heißen:

var defaultIndex = 9;

Einen bestimmten Wert auswählen

Falls mit „Wert 10“ nicht der Index, sondern tatsächlich der JSON-Wert 10 gemeint ist, ist diese Variante besser:

<%
    var selectid = "mydropdown2";
    var dp_write = "javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt";
    var defaultValue = "10";

    var currentValue = dp && dp[dp_write] !== undefined
        ? String(dp[dp_write])
        : "";

    var availableValues = Array.isArray(data)
        ? data.map(String)
        : [];

    var selectedValue = availableValues.indexOf(currentValue) !== -1
        ? currentValue
        : defaultValue;
%>

Der restliche Code kann gleich bleiben.

Warum bisher immer der erste Eintrag erschien

Im alten Template wurde selected nur gesetzt, wenn diese Bedingung wahr war:

dp[dp_write] == data[i]

War der Datenpunkt leer, noch nicht geladen oder enthielt keinen Wert aus dem JSON-Array, bekam keine Option das Attribut selected. HTML zeigt dann automatisch das erste Element an.

Die obige Lösung bestimmt den ausgewählten Wert deshalb bereits im EJS-Teil und erzeugt beispielsweise:

<option value="10" selected>10</option>

Das ist beim ersten sichtbaren Rendern zuverlässiger als eine ausschließlich nachgelagerte JavaScript-Auswahl. Die Lösung berücksichtigt außerdem die dokumentierten Besonderheiten des Widgets: data enthält die JSON-Daten, zusätzliche Datenpunkte stehen in dp, CSS ist über widgetid begrenzt, und die Initialisierung nutzt setTimeout() statt setInterval().

[OliverIO]

Ich habe mal die wichtigsten KIs das Beispielprompt
aus der KI Dokumentation erstellen lassen
Deutsch
Englisch

Die ersten beiden waren OneShots. Also die KI hat aufgrund der Angaben alles korrekt beim ersten mal erstellt.
ChatGPT hat einen kleinen Syntax Fehler gemacht, der nach dem posten der Fehlermeldung korrigiert wurde. Das hatte was mit dem EJS Template-System und deren Syntaxprüfung zu tun.

[bahnuhr]

@OliverIO
Danke für die ausführliche Darstellung.

Habe den Code mal genommen mit einem festen Wert.

<%
    var selectid = "mydropdown2";
    var dp_write = "javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt";
    var defaultValue = "Dieter";
 
    var currentValue = dp && dp[dp_write] !== undefined
        ? String(dp[dp_write])
        : "";
 
    var availableValues = Array.isArray(data)
        ? data.map(String)
        : [];
 
    var selectedValue = availableValues.indexOf(currentValue) !== -1
        ? currentValue
        : defaultValue;
%>
 
<script>
    var jsontemplateSelectId_<%- widgetid %> = "<%- selectid %>";
    var jsontemplateWriteDp_<%- widgetid %> = "<%- dp_write %>";
    var jsontemplateInitialValue_<%- widgetid %> = "<%- selectedValue %>";
 
    function jsontemplateWriteSelection_<%- widgetid %>(element) {
        if (!element || element.selectedIndex < 0) {
            return;
        }
 
        var selectedOption = element.options[element.selectedIndex];
 
        if (!selectedOption) {
            return;
        }
 
        vis.setValue(
            jsontemplateWriteDp_<%- widgetid %>,
            selectedOption.value
        );
    }
 
    setTimeout(function () {
        var element = document.getElementById(
            jsontemplateSelectId_<%- widgetid %>
        );
 
        if (!element) {
            return;
        }
 
        element.value = jsontemplateInitialValue_<%- widgetid %>;
 
        /*
         * Nur schreiben, wenn der DP noch nicht den angezeigten Wert enthält.
         */
        var currentDpValue = "<%- currentValue %>";
 
        if (
            element.value &&
            String(currentDpValue) !== String(element.value)
        ) {
            vis.setValue(
                jsontemplateWriteDp_<%- widgetid %>,
                element.value
            );
        }
    }, 0);
</script>
 
<style>
    #<%- widgetid %> #<%- selectid %> {
        color: rgb(255, 255, 255);
        width: 250px;
        background: black;
        font-size: 24px;
    }
</style>
 
<select
    id="<%- selectid %>"
    name="<%- selectid %>"
    size="1"
    onchange="jsontemplateWriteSelection_<%- widgetid %>(this)"
>
    <% if (Array.isArray(data)) { %>
        <% for (var i = 0; i < data.length; i++) { %>
            <%
                var optionValue = String(data[i]);
                var isSelected = optionValue === selectedValue;
            %>
 
            <option
                value="<%- optionValue %>"
                <%- isSelected ? "selected" : "" %>
            ><%- optionValue %></option>
        <% } %>
    <% } %>
</select>

Klappt aber nicht. Es wird nur ein Fehler angezeigt.
Würdest du mal drüber schauen.
Danke.

[OliverIO]

@bahnuhr

dann musst du mir testdaten aus dem datenpunkt bereitstellen
und ein export deines jsontemplate widgets

[bahnuhr]

@OliverIO
na klar mach ich das.
anbei
Dies ist der json DP in gekürzter Form:
javascript.0.Sonstige.Google.Kontakte.Photo.Auswahl

[
  "Ahlbach",
  "Aissa",
  "Bender",
  "Dieter",
  "Jung",
  "Küchler",
  "Wunsch"
]

und dies das Widget

[{"tpl":"tplJSONTemplate4","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","json_dpCount":"1","json_scriptCount":"1","json_cssCount":"1","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"json_oid":"javascript.0.Sonstige.Google.Kontakte.Photo.Auswahl","json_template":"<%\n    var selectid = \"mydropdown2\";\n    var dp_write = \"javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt\";\n \n    /*\n     * Gewünschter Eintrag im JSON-Array.\n     *\n     * Achtung:\n     * Arrays beginnen bei Index 0.\n     *\n     * Index 10 bedeutet somit das 11. Element.\n     * Für das 10. Element wäre der Index 9.\n     */\n    var defaultIndex = 10;\n \n    var currentValue = dp && dp[dp_write] !== undefined\n        ? String(dp[dp_write])\n        : \"\";\n \n    var defaultValue = \"\";\n \n    if (Array.isArray(data) && data.length > defaultIndex) {\n        defaultValue = String(data[defaultIndex]);\n    }\n \n    /*\n     * Wenn im Ziel-Datenpunkt bereits ein gültiger Wert steht,\n     * wird dieser angezeigt.\n     *\n     * Andernfalls wird der gewünschte Standardwert verwendet.\n     */\n    var selectedValue = currentValue;\n \n    if (\n        !selectedValue ||\n        !Array.isArray(data) ||\n        data.map(String).indexOf(selectedValue) === -1\n    ) {\n        selectedValue = defaultValue;\n    }\n%>\n \n<script>\n    var jsontemplateSelectId_<%- widgetid %> = \"<%- selectid %>\";\n    var jsontemplateWriteDp_<%- widgetid %> = \"<%- dp_write %>\";\n    var jsontemplateInitialValue_<%- widgetid %> = \"<%- selectedValue %>\";\n \n    function jsontemplateWriteSelection_<%- widgetid %>(element) {\n        if (!element || element.selectedIndex < 0) {\n            return;\n        }\n \n        var selectedOption = element.options[element.selectedIndex];\n \n        if (!selectedOption) {\n            return;\n        }\n \n        vis.setValue(\n            jsontemplateWriteDp_<%- widgetid %>,\n            selectedOption.value\n        );\n    }\n \n    setTimeout(function () {\n        var element = document.getElementById(\n            jsontemplateSelectId_<%- widgetid %>\n        );\n \n        if (!element) {\n            return;\n        }\n \n        element.value = jsontemplateInitialValue_<%- widgetid %>;\n \n        /*\n         * Nur schreiben, wenn der DP noch nicht den angezeigten Wert enthält.\n         */\n        var currentDpValue = \"<%- currentValue %>\";\n \n        if (\n            element.value &&\n            String(currentDpValue) !== String(element.value)\n        ) {\n            vis.setValue(\n                jsontemplateWriteDp_<%- widgetid %>,\n                element.value\n            );\n        }\n    }, 0);\n</script>\n \n<style>\n    #<%- widgetid %> #<%- selectid %> {\n        color: rgb(255, 255, 255);\n        width: 250px;\n        background: black;\n        font-size: 24px;\n    }\n</style>\n \n<select\n    id=\"<%- selectid %>\"\n    name=\"<%- selectid %>\"\n    size=\"1\"\n    onchange=\"jsontemplateWriteSelection_<%- widgetid %>(this)\"\n>\n    <% if (Array.isArray(data)) { %>\n        <% for (var i = 0; i < data.length; i++) { %>\n            <%\n                var optionValue = String(data[i]);\n                var isSelected = optionValue === selectedValue;\n            %>\n \n            <option\n                value=\"<%- optionValue %>\"\n                <%- isSelected ? \"selected\" : \"\" %>\n            ><%- optionValue %></option>\n        <% } %>\n    <% } %>\n</select>\n","json_dp1":"javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt"},"style":{"left":"715px","top":"128px","z-index":"2","width":"350px","height":"35px"},"widgetSet":"vis-jsontemplate"}]

[OliverIO]

@bahnuhr

der widgetexport von dir war leider leer.
kein datenpunkt
kein template

hier nun das getestete template
ich habe die datenpunkte allerdings auf
0_userdata.0.select
und
0_userdata.0.selectwrite
angepasst

chatgpt hat auch ein bisschen mehr design und sicherheitsfunktionen dazugemacht

<%
    var dp_write = "0_userdata.0.selectwrite";
    var default_value = "Dieter";
    var select_id = widgetid + "_select";
    var options = [];
    var stored_value = "";
    var selected_value = "";

    function escapeHtml(value)
    {
        return String(value)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#39;");
    }

    if (Array.isArray(data))
    {
        options = data;
    }

    if (
        typeof dp !== "undefined"
        && dp !== null
        && typeof dp_write === "string"
        && dp_write !== ""
        && typeof dp[dp_write] !== "undefined"
        && dp[dp_write] !== null
    )
    {
        stored_value = String(dp[dp_write]);
    }

    if (stored_value !== "")
    {
        selected_value = stored_value;
    }
    else
    {
        selected_value = String(default_value);
    }
%>

<style>
#<%- widgetid %>
{
    width: 100%;
    height: 100%;
}

#<%- widgetid %> #<%- select_id %>
{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 36px;
    margin: 0;
    padding: 6px 32px 6px 10px;
    color: #ffffff;
    background-color: #000000;
    border: 1px solid #666666;
    border-radius: 4px;
    font-family: inherit;
    font-size: 18px;
    cursor: pointer;
}

#<%- widgetid %> #<%- select_id %>:focus
{
    border-color: #ffffff;
    outline: none;
}
</style>

<select
    id="<%- select_id %>"
    data-dp-write="<%- escapeHtml(dp_write) %>"
    onchange="window['visJsonTemplateSelect_<%- widgetid %>'].writeValue(this)"
>
<%
    for (var i = 0; i < options.length; i++)
    {
        if (
            typeof options[i] !== "undefined"
            && options[i] !== null
        )
        {
            var option_value = String(options[i]);
%>
    <option
        value="<%- escapeHtml(option_value) %>"
        <% if (option_value === selected_value)
        {
        %>
        selected
        <% }
        %>
    ><%- escapeHtml(option_value) %></option>
<%
        }
    }
%>
</select>

<script>
(function ()
{
    var namespace = "visJsonTemplateSelect_<%- widgetid %>";
    var selectElement = document.getElementById("<%- select_id %>");

    window[namespace] = window[namespace] || {};

    if (selectElement)
    {
        window[namespace].dpWrite =
            selectElement.getAttribute("data-dp-write");
    }

    window[namespace].writeValue = function (element)
    {
        var targetDp = window[namespace].dpWrite;

        if (
            !element
            || typeof targetDp !== "string"
            || targetDp === ""
        )
        {
            return;
        }

        if (
            window.vis
            && typeof window.vis.setValue === "function"
        )
        {
            window.vis.setValue(targetDp, element.value);
        }
    };
})();
</script>

hier mein widgetexport

Spoiler

[
 {
   "tpl": "tplJSONTemplate4",
   "data": {
     "g_fixed": false,
     "g_css_font_text": false,
     "g_css_background": false,
     "g_css_shadow_padding": false,
     "g_css_border": false,
     "g_gestures": false,
     "g_signals": false,
     "g_last_change": false,
     "json_dpCount": "1",
     "json_scriptCount": "1",
     "json_cssCount": "1",
     "signals-cond-0": "==",
     "signals-val-0": true,
     "signals-icon-0": "/vis/signals/lowbattery.png",
     "signals-icon-size-0": 0,
     "signals-blink-0": false,
     "signals-horz-0": 0,
     "signals-vert-0": 0,
     "signals-hide-edit-0": false,
     "signals-cond-1": "==",
     "signals-val-1": true,
     "signals-icon-1": "/vis/signals/lowbattery.png",
     "signals-icon-size-1": 0,
     "signals-blink-1": false,
     "signals-horz-1": 0,
     "signals-vert-1": 0,
     "signals-hide-edit-1": false,
     "signals-cond-2": "==",
     "signals-val-2": true,
     "signals-icon-2": "/vis/signals/lowbattery.png",
     "signals-icon-size-2": 0,
     "signals-blink-2": false,
     "signals-horz-2": 0,
     "signals-vert-2": 0,
     "signals-hide-edit-2": false,
     "lc-type": "last-change",
     "lc-is-interval": true,
     "lc-is-moment": false,
     "lc-format": "",
     "lc-position-vert": "top",
     "lc-position-horz": "right",
     "lc-offset-vert": 0,
     "lc-offset-horz": 0,
     "lc-font-size": "12px",
     "lc-font-family": "",
     "lc-font-style": "",
     "lc-bkg-color": "",
     "lc-color": "",
     "lc-border-width": "0",
     "lc-border-style": "",
     "lc-border-color": "",
     "lc-border-radius": 10,
     "lc-zindex": 0,
     "json_oid": "javascript.0.Sonstige.Google.Kontakte.Photo.Auswahl",
     "json_template": "<%\n    var selectid = \"mydropdown2\";\n    var dp_write = \"javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt\";\n \n    /*\n     * Gewünschter Eintrag im JSON-Array.\n     *\n     * Achtung:\n     * Arrays beginnen bei Index 0.\n     *\n     * Index 10 bedeutet somit das 11. Element.\n     * Für das 10. Element wäre der Index 9.\n     */\n    var defaultIndex = 10;\n \n    var currentValue = dp && dp[dp_write] !== undefined\n        ? String(dp[dp_write])\n        : \"\";\n \n    var defaultValue = \"\";\n \n    if (Array.isArray(data) && data.length > defaultIndex) {\n        defaultValue = String(data[defaultIndex]);\n    }\n \n    /*\n     * Wenn im Ziel-Datenpunkt bereits ein gültiger Wert steht,\n     * wird dieser angezeigt.\n     *\n     * Andernfalls wird der gewünschte Standardwert verwendet.\n     */\n    var selectedValue = currentValue;\n \n    if (\n        !selectedValue ||\n        !Array.isArray(data) ||\n        data.map(String).indexOf(selectedValue) === -1\n    ) {\n        selectedValue = defaultValue;\n    }\n%>\n \n<script>\n    var jsontemplateSelectId_<%- widgetid %> = \"<%- selectid %>\";\n    var jsontemplateWriteDp_<%- widgetid %> = \"<%- dp_write %>\";\n    var jsontemplateInitialValue_<%- widgetid %> = \"<%- selectedValue %>\";\n \n    function jsontemplateWriteSelection_<%- widgetid %>(element) {\n        if (!element || element.selectedIndex < 0) {\n            return;\n        }\n \n        var selectedOption = element.options[element.selectedIndex];\n \n        if (!selectedOption) {\n            return;\n        }\n \n        vis.setValue(\n            jsontemplateWriteDp_<%- widgetid %>,\n            selectedOption.value\n        );\n    }\n \n    setTimeout(function () {\n        var element = document.getElementById(\n            jsontemplateSelectId_<%- widgetid %>\n        );\n \n        if (!element) {\n            return;\n        }\n \n        element.value = jsontemplateInitialValue_<%- widgetid %>;\n \n        /*\n         * Nur schreiben, wenn der DP noch nicht den angezeigten Wert enthält.\n         */\n        var currentDpValue = \"<%- currentValue %>\";\n \n        if (\n            element.value &&\n            String(currentDpValue) !== String(element.value)\n        ) {\n            vis.setValue(\n                jsontemplateWriteDp_<%- widgetid %>,\n                element.value\n            );\n        }\n    }, 0);\n</script>\n \n<style>\n    #<%- widgetid %> #<%- selectid %> {\n        color: rgb(255, 255, 255);\n        width: 250px;\n        background: black;\n        font-size: 24px;\n    }\n</style>\n \n<select\n    id=\"<%- selectid %>\"\n    name=\"<%- selectid %>\"\n    size=\"1\"\n    onchange=\"jsontemplateWriteSelection_<%- widgetid %>(this)\"\n>\n    <% if (Array.isArray(data)) { %>\n        <% for (var i = 0; i < data.length; i++) { %>\n            <%\n                var optionValue = String(data[i]);\n                var isSelected = optionValue === selectedValue;\n            %>\n \n            <option\n                value=\"<%- optionValue %>\"\n                <%- isSelected ? \"selected\" : \"\" %>\n            ><%- optionValue %></option>\n        <% } %>\n    <% } %>\n</select>\n",
     "json_dp1": "0_userdata.0.selectwrite",
     "oid": "0_userdata.0.select",
     "template": "<%\r\n    var dp_write = \"0_userdata.0.selectwrite\";\r\n    var default_value = \"Dieter\";\r\n    var select_id = widgetid + \"_select\";\r\n    var options = [];\r\n    var stored_value = \"\";\r\n    var selected_value = \"\";\r\n\r\n    function escapeHtml(value)\r\n    {\r\n        return String(value)\r\n            .replace(/&/g, \"&amp;\")\r\n            .replace(/</g, \"&lt;\")\r\n            .replace(/>/g, \"&gt;\")\r\n            .replace(/\"/g, \"&quot;\")\r\n            .replace(/'/g, \"&#39;\");\r\n    }\r\n\r\n    if (Array.isArray(data))\r\n    {\r\n        options = data;\r\n    }\r\n\r\n    if (\r\n        typeof dp !== \"undefined\"\r\n        && dp !== null\r\n        && typeof dp_write === \"string\"\r\n        && dp_write !== \"\"\r\n        && typeof dp[dp_write] !== \"undefined\"\r\n        && dp[dp_write] !== null\r\n    )\r\n    {\r\n        stored_value = String(dp[dp_write]);\r\n    }\r\n\r\n    if (stored_value !== \"\")\r\n    {\r\n        selected_value = stored_value;\r\n    }\r\n    else\r\n    {\r\n        selected_value = String(default_value);\r\n    }\r\n%>\r\n\r\n<style>\r\n#<%- widgetid %>\r\n{\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n#<%- widgetid %> #<%- select_id %>\r\n{\r\n    display: block;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 36px;\r\n    margin: 0;\r\n    padding: 6px 32px 6px 10px;\r\n    color: #ffffff;\r\n    background-color: #000000;\r\n    border: 1px solid #666666;\r\n    border-radius: 4px;\r\n    font-family: inherit;\r\n    font-size: 18px;\r\n    cursor: pointer;\r\n}\r\n\r\n#<%- widgetid %> #<%- select_id %>:focus\r\n{\r\n    border-color: #ffffff;\r\n    outline: none;\r\n}\r\n</style>\r\n\r\n<select\r\n    id=\"<%- select_id %>\"\r\n    data-dp-write=\"<%- escapeHtml(dp_write) %>\"\r\n    onchange=\"window['visJsonTemplateSelect_<%- widgetid %>'].writeValue(this)\"\r\n>\r\n<%\r\n    for (var i = 0; i < options.length; i++)\r\n    {\r\n        if (\r\n            typeof options[i] !== \"undefined\"\r\n            && options[i] !== null\r\n        )\r\n        {\r\n            var option_value = String(options[i]);\r\n%>\r\n    <option\r\n        value=\"<%- escapeHtml(option_value) %>\"\r\n        <% if (option_value === selected_value)\r\n        {\r\n        %>\r\n        selected\r\n        <% }\r\n        %>\r\n    ><%- escapeHtml(option_value) %></option>\r\n<%\r\n        }\r\n    }\r\n%>\r\n</select>\r\n\r\n<script>\r\n(function ()\r\n{\r\n    var namespace = \"visJsonTemplateSelect_<%- widgetid %>\";\r\n    var selectElement = document.getElementById(\"<%- select_id %>\");\r\n\r\n    window[namespace] = window[namespace] || {};\r\n\r\n    if (selectElement)\r\n    {\r\n        window[namespace].dpWrite =\r\n            selectElement.getAttribute(\"data-dp-write\");\r\n    }\r\n\r\n    window[namespace].writeValue = function (element)\r\n    {\r\n        var targetDp = window[namespace].dpWrite;\r\n\r\n        if (\r\n            !element\r\n            || typeof targetDp !== \"string\"\r\n            || targetDp === \"\"\r\n        )\r\n        {\r\n            return;\r\n        }\r\n\r\n        if (\r\n            window.vis\r\n            && typeof window.vis.setValue === \"function\"\r\n        )\r\n        {\r\n            window.vis.setValue(targetDp, element.value);\r\n        }\r\n    };\r\n})();\r\n</script>",
     "dpcount": 1,
     "scriptcount": 1,
     "csscount": 1,
     "g_common": true,
     "bindings": []
   },
   "style": {
     "left": 25,
     "top": 109,
     "z-index": "2",
     "width": "350px",
     "height": "35px",
     "bindings": []
   },
   "widgetSet": "vis-jsontemplate",
   "_id": "i000001"
 }
]

[bahnuhr]

@OliverIO
Warum hat mein Export nicht funktioniert?
Und die DP sind doch immer noch javascript.....
Hast du was falsche eingefügt.

Wenn ich dies im edit einfüge kommt:

Im edit und im run funktioniert dies nicht.

Habe ich eine alte Adapter version.
meine ist: 4.4.3

mfg

[bahnuhr]

@OliverIO
Habe nun upgedatet auf 4.5.0
Keine Veränderung.

[OliverIO]

@bahnuhr
Starte mal dein vis neu,
Mach im Browser Strg + F5

Zur Not auf der Kommandozeile
iobroker upload all
Geh doch mal die Sachen von oben

Das Widget ID Problem wurde in der vorletzten Version behoben.
Prüfe, ob die Version auch wirklich installiert wurde. Wenn ja, dann liegt es daran, dass vis die Komponente noch nicht aktualisiert hat.

[bahnuhr]

Danke
Probier ich heute mittag aus

[bahnuhr]

upload all hat geklappt.
Aber müsste sowas nicht beim upload korrekt funktionieren?

So, jetzt muss ich das ganze mal beobachten.
Danke erst einmal.
Dieter

[bahnuhr]

@oliverio

Scheint soweit zu klappen, super !

noch ne kleine Ergänzungsfrage:
Wenn das template den ausgewählten json DP auf "Dieter" setzt, kann man dann gleichzeigt im DP.write auch "Dieter" reinschreiben.

Momentan wird ja nur das json auf "Dieter" gesetzt und angezeigt. Im dp.write passiert ja nix.

[OliverIO]

@bahnuhr

bei mir macht es das
ab3d951b-ee1f-400b-a741-b6545328bfac-20260730-1451-31.0932434.mp4

du musst den schreibdatenpunkt einmal unter
datapoints eintragen

und im template am anfang

[bahnuhr]

@OliverIO
ok, dann hab ich mich falsch ausgedrückt.

Ja, wenn man einen Punkt des json auswählt, dann wird das ausgewählte in den extra Datenpunkt geschrieben.
Das klappt ja auch.

Die Frage war aber:
Wenn die view geöffnet wird, dann wird in der Auswahl ja "Dieter" angezeigt. Dies soll auch so sein.
Aber da wurde halt noch nix in den write geschrieben.

[OliverIO]

@bahnuhr

Dsa ist aber auch nur beim aller ersten mal so.
sobald da was drin steht, greift der normale mechanismus

dann könntest du im abschnitt

    if (stored_value !== "")
    {
        selected_value = stored_value;
    }
    else
    {
        selected_value = String(default_value);
    }

das so austauschen

    if (stored_value !== "")
    {
        selected_value = stored_value;
    }
    else
    {
        selected_value = String(default_value);
        window.vis.setValue(dp_write, selected_value);
    }

[OliverIO]

Neue Version 4.6.0

Den zusätzlichen Datenpunkten wurde noch ein optional benennbarer Variablennamen hinzugefügt. Die Benennung richtet sich nach den javascript Regeln. Von javascript reservierte Namen und intern vom widget verwendete Namen können nicht verwendet werden. Das wird dann aber auch in einer Fehlermeldung angezeigt.

am obigen Beispiel kann dann im Template
dp_write verwendet werden. Dieser enthält dann den datenpunktnamen und
dp_write_value den Datenpunktinhalt.

<%- dp_write %>          <!-- 0_userdata.0.selectwrite -->
<%- dp_write_value %>    <!-- abc -->
<%- dp[dp_write] %>      <!-- abc -->

Dokumentation wurde dementsprechend angepasst

[bahnuhr]

@OliverIO sagte:

    selected_value = String(default_value);
    window.vis.setValue(dp_write, selected_value);

Jetzt wird es bald so wie ich es mir vorstelle.

Könnte man jetzt noch das default (also setzen des json auf Dieter und schreiben in write) automatisch setzen beim view Wechsel.

Also wenn man die Seite mit diesem Widget aufruft.
Das wäre cool.