Dynamic html line in html endpoint (different values from payload)

[Chorum]

Hello there,

i have a new problem but not enough knowledge about html.

i would like to create a line dynamicly depending on a value from payload.

here the working code:

    window.onload = function addCode(){
        var contzahl     = {{contzahl}}
        var containerart = {{containerart}}

        if (contzahl == 1){
            document.getElementById("dynamic_code").innerHTML += 
            "Containerart:"+{{containerart}}+" Länge:"+{{contzahl}}+"cm Breite:"+{{contzahl}}+"cm Höhe:"+{{contzahl}}+"cm"+    
            " Gewicht:"+{{contzahl}}+"kg"
        }

the problem is the variable containerart. its a string and its not working. if i use contzahl instead (a number) it works perfect.

what am i doing wrong ?

dearly
Chorum

[UnborN]

Try this example showing the way of receiving a msg in ui_template when used with javascript

[{"id":"6e2932b78d1080ee","type":"ui_template","z":"5847b7aa62131d37","group":"578ee1bd5375974e","name":"","order":0,"width":"6","height":"8","format":"<div id=\"dynamic_code\">Some initial text</div>\n<script>\n  (function(scope) {\n  scope.$watch('msg', function(msg) {\n    \nlet element = document.getElementById(\"dynamic_code\");\n\n    if (msg.payload.contzahl == 1){\n            element.innerHTML = \n            \"Containerart : \"+ msg.payload.containerart +\"<br>Länge : \" + msg.payload.contzahl+\" cm<br>Breite : \" + msg.payload.contzahl+\" cm<br>Höhe : \"+ msg.payload.contzahl +\" cm<br>\" +    \n            \" Gewicht : \"+ msg.payload.contzahl + \" kg\"\n        }\n        else {\n          element.innerHTML = \"contzahl is not 1\"\n        }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":560,"y":800,"wires":[[]]},{"id":"2a83bb1a82a9563d","type":"inject","z":"5847b7aa62131d37","name":"contzahl 1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"contzahl\":1,\"containerart\":\"myString1\"}","payloadType":"json","x":310,"y":780,"wires":[["6e2932b78d1080ee"]]},{"id":"105a243389da1988","type":"inject","z":"5847b7aa62131d37","name":"contzahl 2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"contzahl\":2,\"containerart\":\"myString1\"}","payloadType":"json","x":310,"y":840,"wires":[["6e2932b78d1080ee"]]},{"id":"578ee1bd5375974e","type":"ui_group","name":"Default","tab":"3e800ae915347b35","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"3e800ae915347b35","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[Chorum]

Hello again,

i tried your flow and it works fine with an template node. but i need an html Endpoint :

if i try your code in the template node (print.css) i only get the "Some initial text"

i cant reach the payload to ask for the condition of contzahl i think

thats what i have in my print.css for that values:

 <script>
    (function(scope) {
    scope.$watch('msg', function(msg) {
    
    let element = document.getElementById("dynamic_code");

    if (msg.payload.contzahl == 1){
            element.innerHTML = 
            "Containerart : "+ msg.containerart +"<br>Länge : " + msg.contzahl+" cm<br>Breite : " + msg.contzahl+" cm<br>Höhe : "+ msg.contzahl +" cm<br>" +    
            " Gewicht : "+ msg.contzahl + " kg"
        }
        else {
          element.innerHTML = "contzahl is not 1"
        }
  });
})(scope);
</script>


<div id="dynamic_code">Some initial text</div>

thats the part of the payload thats goes in to the print.css:

i try to find out what i am doing wrong...

[UnborN]

@Chorum

but i need an html Endpoint

This changes the requirements
.. i dont think you can use Javascript like that in a template node as its mainly used to create text.

You'll have to run whatever JS logic before sending it to http response.

Example:

[{"id":"62273981511d9f56","type":"http in","z":"5847b7aa62131d37","name":"","url":"/test","method":"get","upload":false,"swaggerDoc":"","x":220,"y":1600,"wires":[["6c4db5c600acac2b"]]},{"id":"32b0393cec4f0e17","type":"http response","z":"5847b7aa62131d37","name":"","statusCode":"","headers":{},"x":830,"y":1600,"wires":[]},{"id":"6c4db5c600acac2b","type":"function","z":"5847b7aa62131d37","name":"","func":"msg.payload = {\n  \"contzahl\": 1,\n  \"laenge\": 0,\n  \"datum\": \"19.10.2021\",\n  \"containerart\": \"something\"\n}\n\n\nif (msg.payload.contzahl == 1) {\n  msg.payload = `Containerart : ${msg.payload.containerart}<br>Länge : ${msg.payload.contzahl} cm<br>Breite :  ${msg.payload.contzahl} cm<br>Höhe :  ${msg.payload.contzahl}  cm<br>Gewicht :  ${msg.payload.contzahl}  kg`\n}\nelse {\n  msg.payload = \"contzahl is not 1\"\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":440,"y":1600,"wires":[["e027154c15e54ff8","72166b06b9b6e397"]]},{"id":"e027154c15e54ff8","type":"template","z":"5847b7aa62131d37","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <head></head>\n    <body>\n        <h1>Hello World!</h1>\n        <div id=\"dynamic_code\">{{{payload}}}</div>\n    </body>\n</html>\n\n\n","output":"str","x":640,"y":1600,"wires":[["32b0393cec4f0e17","363ef86d4cbe2e2c"]]},{"id":"72166b06b9b6e397","type":"debug","z":"5847b7aa62131d37","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":620,"y":1520,"wires":[]},{"id":"363ef86d4cbe2e2c","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":860,"y":1520,"wires":[]}]

.. but that can get a bit messy (with Template literals etc)

The best approach is to use node-red-contrib-uibuilder that allows you to create your own endpoints and serve your own html, js, css files and uses websockets for its communication between NR and your front-end page.

[Chorum]

thank you!

i can use your example for my purpose!

so i build my string in JS logic instead of html js script.

i will look at the uibuilder after the actual project. i would like to find a way for a multi user dashboard.
in pure NR it isnt possible but perhaps with endpoints or a webserver... we will see

thank you again !