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

[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.

[OliverIO]

@bahnuhr

Bei mir ist das so.
Ich habe 2 views gemacht.
jeweils einen nav button zum sprung auf den anderen view
auf beiden views habe ich mir ein string widget gemacht was auf den schreibdatenpunkt zeigt.
auf dem 2. view dann die select box.
wenn man vis im runtime mode startet wird im string widget der Text aus dem datenpunkt angezeigt.
wenn mann dann den daten punkt leert und
wieder nach vis zurückwechselt sieht man, es ist leer.
wenn man dann auf den 2. view mit der select box wechselt,
dann erscheint wieder Dieter, da das template mit dem view wechsel
aktiviert wurde und dann der datenpunkt auch beschrieben wird.

habe ich in vis1 und vis2 probiert
In vis2 wird sogar noch früher der datenpunkt neu geschrieben,
da das react in vis2 das templatescript wohl öfters aktiviert. hat dann aber was mit react von vis2 zu tun.

[bahnuhr]

@OliverIO
Ich nochmal.
Habe dein Beispiel nachgestellt.
Bei mir klappt es nicht.

Nachtrag:
Jetzt hat es doch geklappt.

Ich teste weiter.

[bahnuhr]

@OliverIO
so, nochmal Rückinfo von mir.

Manchmal geht es, manchmal nicht.

Eine Logik hab ich noch nicht gefunden.

[OliverIO]

@bahnuhr

hier mein vis1 projekt export
2026-07-31-main (1).zip

vis2 projekt export
2026-07-31-main (2).zip

wie es auch sei. das aktivieren des template scripts liegt nicht in meiner Macht.
das kommt vom vis

[bahnuhr]

@OliverIO
Habs jetzt per js gelöst.
Beim Wechsel der View werden die entsprechenden DP gesetzt.
Dies klappt jetzt einwandfrei.

// View wird wieder gewechselt
    on({id: "vis.0.control.data", change: "ne"}, function(obj) {  
        if (obj.state.val != "main/Telefon3" && obj.oldState.val == "main/Telefon3") {
            setState("javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt", ""); setState("javascript.0.Sonstige.Google.Kontakte.Photo.Link", ""); 
        } else if (obj.state.val == "main/Telefon3" && obj.oldState.val != "main/Telefon3") {
            setState("javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt", "Dieter"); setState("javascript.0.Sonstige.Google.Kontakte.Photo.Link", "https://lh3.googleusercontent.com/contacts/AG6t00"); 
        }
    });

Danke nochmal für die Infos.

mfg
Dieter

[OliverIO]

Neue Version 4.6.1

• die Fehlerausgabe des widgets wird noch zusätzlich auf der browser Konsole (F12) ausgegeben, das es in der Anwendung mit der KI einfacher zu kopieren ist.