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

[OliverIO]

Neue Version 4.4.5

• paket versionen für das vis-2 widget mussten zurück gesetzt werden, da dadurch das widget nicht mehr richtig funktioniert haben.

Wer schnell testen will und der Adapter im beta repo noch nicht auftaucht
kann über den expertenmodus/katzenknopf laden

[sigi234]

@OliverIO sagte:

Ist das eine neuere Version des templates?

<% console.log(data) %>
<style>
  .mini-calendar-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
  }
 
  .mini-calendar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #ffffff;
  }
 
  .mini-calendar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
 
  .mini-calendar-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
 
  .mini-calendar-time {
    font-size: 0.8em;
    opacity: 0.85;
    font-weight: bold;
    color: #dddddd;
  }
 
  .mini-calendar-event {
    font-size: 0.95em;
    font-weight: 600;
  }
 
  .mini-calendar-ort {
    font-size: 0.8em;
    opacity: 0.7;
    font-style: italic;
  }
</style>
 
<div class="mini-calendar-container">
  <% 
    var items = [];
    var rawData = (typeof data !== 'undefined' && data) ? data : ((typeof dp1 !== 'undefined' && dp1) ? dp1 : ((typeof val !== 'undefined' && val) ? val : null));
 
    try {
      if (typeof rawData === 'string') {
        items = JSON.parse(rawData);
      } else if (Array.isArray(rawData)) {
        items = rawData;
      }
    } catch(e) {
      items = [];
    }
 
    if (Array.isArray(items) && items.length > 0) {
      for (var i = 0; i < items.length; i++) { 
        var item = items[i];
        if (!item) continue;
 
        var imgUrl = item.img || '';
        var zeit = item.zeit || '';
        var ereignis = item.ereignis || '';
        var ort = item.ort || '';
  %>
    <div class="mini-calendar-item">
      <% if (imgUrl) { %>
        <img class="mini-calendar-img" src="<%= imgUrl %>" alt="User">
      <% } %>
 
      <div class="mini-calendar-content">
        <div class="mini-calendar-time"><%= zeit %></div>
        <div class="mini-calendar-event"><%= ereignis %></div>
        <% if (ort) { %>
          <div class="mini-calendar-ort">📍 <%= ort %></div>
        <% } %>
      </div>
    </div>
  <% 
      } 
    } else { 
  %>
    <div style="color: white; opacity: 0.7; padding: 5px; font-size: 0.9em;">Keine Einträge vorhanden</div>
  <% } %>
</div>

[Eduard77]

@OliverIO
ich habe die neue Version installiert und werde es testen.
Vielen Dank.

[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