Node red HTML template

General
1

Hi,
So, I can use the dashboard nodes and implement my data points in with no problem. Then, I thought to create my one custom HTML with custom CSS etc.. but inserting data into the Node Red HTML template node looks way harder than what I thought. I can not insert the data in the HTML page using the {{payload}}. So can you please tell why? I read a lot about this, watched some videos, and tried multiple different ways, but still not working. So, what i'm doing wrong? The debug area is showing right info when I inject it, but not onto the HTML page. The other question I have, is what if I then try to insert more than one data point onto the HTML page! what I need to make that happen? any help is appreciated. please see the simple flow i'm testing below.

[{"id":"89439520.8d6e98","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"e00d0af5.2a3a28","type":"http in","z":"89439520.8d6e98","name":"","url":"test","method":"get","upload":false,"swaggerDoc":"","x":100,"y":280,"wires":[["6a103da0.7eea94"]]},{"id":"10510ab9.ca2825","type":"http response","z":"89439520.8d6e98","name":"","statusCode":"","headers":{},"x":620,"y":280,"wires":[]},{"id":"6a103da0.7eea94","type":"template","z":"89439520.8d6e98","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"This is the payload: {{payload}} !","output":"str","x":360,"y":280,"wires":[["10510ab9.ca2825"]]},{"id":"1165748e.6c30ab","type":"debug","z":"89439520.8d6e98","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":490,"y":200,"wires":[]},{"id":"8e04e99b.193e68","type":"inject","z":"89439520.8d6e98","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"8","payloadType":"num","x":170,"y":200,"wires":[["6a103da0.7eea94","1165748e.6c30ab"]]}]
2

it wasnt working because the HTTP IN node reguest has to send a message to your HTTP out node.
You cannot inject payload to Http out bypassing http in like in your flow.

See example :

[{"id":"ac8ddd3f.28e1f8","type":"http in","z":"b913f30e.6b6098","name":"","url":"test","method":"get","upload":false,"swaggerDoc":"","x":220,"y":300,"wires":[["57b1ecda.eed20c"]]},{"id":"8b51bdc0.47edc","type":"http response","z":"b913f30e.6b6098","name":"","statusCode":"","headers":{},"x":840,"y":300,"wires":[]},{"id":"3c861534.f6423a","type":"template","z":"b913f30e.6b6098","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div>This is the payload: {{payload}} !</div>","output":"str","x":640,"y":300,"wires":[["8b51bdc0.47edc"]]},{"id":"57b1ecda.eed20c","type":"change","z":"b913f30e.6b6098","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"8","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":300,"wires":[["3c861534.f6423a"]]}]
3

Regarding this part of the question .. since you are creating you own endpoints using HTTP IN - OUT the only format you can use in the template node is mustache syntax .. i think your are better off using the UI template dashboard nodes .. or if you want something custom look into UIbuilder that can use Vue as a front end library.

Here is a flat example of mustache :

[{"id":"ac8ddd3f.28e1f8","type":"http in","z":"b913f30e.6b6098","name":"","url":"test","method":"get","upload":false,"swaggerDoc":"","x":220,"y":300,"wires":[["57b1ecda.eed20c"]]},{"id":"8b51bdc0.47edc","type":"http response","z":"b913f30e.6b6098","name":"","statusCode":"","headers":{},"x":840,"y":300,"wires":[]},{"id":"3c861534.f6423a","type":"template","z":"b913f30e.6b6098","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n<body>\n\t<h1>My Favorite Fruit</h1>\n<table>\n\t<thead>\n        <tr>\n        <th>Name</th>\n        <th>Price</th>\n        </tr>\n    </thead>\n    <tbody>\n        {{#payload}}\n            <tr>\n            <td>{{name}}</td>\n            <td>{{price}}</td>\n            </tr>\n        {{/payload}}\n    </tbody>\n</table>\n</body>\n</html>","output":"str","x":640,"y":300,"wires":[["8b51bdc0.47edc"]]},{"id":"57b1ecda.eed20c","type":"change","z":"b913f30e.6b6098","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\"name\":\"apple\",\"price\":100},{\"name\":\"orange\",\"price\":80},{\"name\":\"banana\",\"price\":210}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":300,"wires":[["3c861534.f6423a"]]}]
4

Thank you so much for your response. I see how that can work.
regarding the Dashboard, I feel it's somehow limited even though i was able to customize it a little. and I read that it doesn't support multiple users! I am more aware of HTML and CSS and that's why I'm trying to go with regular html template to have the ability to customize the front end as desired. I really liked the UiBuilder too but I think this one needs some good level skills of Javascript which I don't have.

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.