# Node function with node template

**URL:** https://discourse.nodered.org/t/node-function-with-node-template/79050
**Category:** General
**Created:** [8 June 2023 11:42 UTC](https://discourse.nodered.org/t/node-function-with-node-template/79050 "2023-06-08T11:42:49Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Loveflowersx](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@Loveflowersx](https://discourse.nodered.org/u/Loveflowersx)
#### Post date: [8 June 2023 11:42 UTC](https://discourse.nodered.org/t/node-function-with-node-template/79050/1 "2023-06-08T11:42:50Z")

</div>

Hi everyone,

I want to join the function node with the template node, I have tried many ways and nothing, I pass the code I think it is ok. The variables come from a s7 node.

It works the two codes together in a function node with a text node and it shows it in the dashboard but I don't want that. I want the table with that measurement

Thank you very much

Node function

```auto
[
    {
        "id": "c748c39d22d49e95",
        "type": "function",
        "z": "83f9cf9ed69a8e05",
        "name": "",
        "func": "var productName = msg.payload['COATEC: Product_Name'];\nvar productNumber = msg.payload['COATEC: Product_Number'];\nvar reportDateMonth = msg.payload['COATEC: Report.Date.Month'];\nvar reportDateYear = msg.payload['COATEC: Report.Date.Year'];\nvar reportDateDay = msg.payload['COATEC: Report.Date.Day'];\nvar date = msg.payload.date || (reportDateMonth + '/' + reportDateDay + '/' + reportDateYear);\nvar reportStartHour = msg.payload['COATEC: Report.Start.Hour'];\nvar reportStartMinute = msg.payload['COATEC: Report.Start.Minute'];\nvar startTime = msg.payload.startTime || (reportStartHour + ':' + reportStartMinute);\nvar reportEndHour = msg.payload['COATEC: Report.End.Hour'];\nvar reportEndMinute = msg.payload['COATEC: Report.End.Minute'];\nvar endTime = msg.payload.endTime || (reportEndHour + ':' + reportEndMinute);\nvar TotalHours = msg.payload['COATEC: Total_Hours'];\nvar TotalSeconds = msg.payload['COATEC: Total_Seconds'];\nvar TotalMinutes = msg.payload['COATEC: Total_Minutes'];\nvar cycleTime = msg.payload.cycleTime || (TotalHours + 'h ' + TotalMinutes + 'm ' + TotalSeconds + 's');\nvar pauseTotalHours = msg.payload['COATEC: Total_Hours_Pause'];\nvar pauseTotalMinutes = msg.payload['COATEC: Total_Minutes_Pause'];\nvar pauseTotalSeconds = msg.payload['COATEC: Total_Seconds_Pause'];\nvar pauseTime = msg.payload.pauseTime || (pauseTotalHours + 'h ' + pauseTotalMinutes + 'm ' + pauseTotalSeconds + 's');\nvar tank1Total = msg.payload['COATEC: Total_Tank_1'];\nvar tank2Total = msg.payload['COATEC: Total_Tank_2'];\nvar minAirTemperature = msg.payload['COATEC: Minimum_Air_Temperature'];\nvar mediumAirTemperature = msg.payload['COATEC: Medium_Air_Temperature'];\nvar maxAirTemperature = msg.payload['COATEC: Maximum_Air_Temperature'];\nvar minFlow = msg.payload['COATEC: Minimum_Flow'];\nvar mediumFlow = msg.payload['COATEC: Medium_Flow'];\nvar maxFlow = msg.payload['COATEC: Maximum_Flow'];\nvar minHumidity = msg.payload['COATEC: Minimum_Humidity'];\nvar mediumHumidity = msg.payload['COATEC: Medium_Humidity'];\nvar maxHumidity = msg.payload['COATEC: Maximum_Humidity'];\n\nmsg.productName = productName;\nmsg.productNumber = productNumber;\nmsg.date = date;\nmsg.startTime = startTime;\nmsg.endTime = endTime;\nmsg.cycleTime = cycleTime;\nmsg.pauseTime = pauseTime;\nmsg.tank1Total = tank1Total;\nmsg.tank2Total = tank2Total;\nmsg.minAirTemperature = minAirTemperature;\nmsg.mediumAirTemperature = mediumAirTemperature;\nmsg.maxAirTemperature = maxAirTemperature;\nmsg.minFlow = minFlow;\nmsg.mediumFlow = mediumFlow;\nmsg.maxFlow = maxFlow;\nmsg.minHumidity = minHumidity;\nmsg.mediumHumidity = mediumHumidity;\nmsg.maxHumidity = maxHumidity;\n\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 480,
        "y": 260,
        "wires": [
            [
                "8e1d0898d7bb205e"
            ]
        ]
    }
]

```

Node template

```auto
[{"id":"8e1d0898d7bb205e","type":"ui_template","z":"83f9cf9ed69a8e05","group":"383ce3322d0766a5","name":"","order":1,"width":20,"height":10,"format":"<p><strong>Work report:</strong></p>\n<table style=\"width: 100%; border-collapse: collapse; border-style: solid; font-size: 11px; font-weight: bold; margin-top: 20px;\" border=\"1\">\n <tbody>\n <tr>\n <td style=\"width: 30%; white-space: nowrap;\"><p><strong>PRODUCT NAME</strong></p></td>\n <td style=\"width: 70%;\">{{productName}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>PRODUCT NUMBER</strong></p></td>\n <td>{{productNumber}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>DATE</strong></p></td>\n <td>{{date}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>START TIME</strong></p></td>\n <td>{{startTime}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>END TIME</strong></p></td>\n <td>{{endTime}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>CYCLE TIME</strong></p></td>\n <td>{{cycleTime}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>PAUSE TIME</strong></p></td>\n <td>{{pauseTime}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>TANK 1 TOTAL</strong></p></td>\n <td>{{tank1Total}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>TANK 2 TOTAL</strong></p></td>\n <td>{{tank2Total}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>MINIMUM AIR TEMPERATURE</strong></p></td>\n <td>{{minAirTemperature}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>MEDIUM AIR TEMPERATURE</strong></p></td>\n <td>{{mediumAirTemperature}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>MAXIMUM AIR TEMPERATURE</strong></p></td>\n <td>{{maxAirTemperature}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>MINIMUM FLOW</strong></p></td>\n <td>{{minFlow}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>MEDIUM FLOW</strong></p></td>\n <td>{{mediumFlow}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>MAXIMUM FLOW</strong></p></td>\n <td>{{maxFlow}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>MINIMUM HUMIDITY</strong></p></td>\n <td>{{minHumidity}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>MEDIUM HUMIDITY</strong></p></td>\n <td>{{mediumHumidity}}</td>\n </tr>\n <tr>\n <td style=\"white-space: nowrap;\"><p><strong>MAXIMUM HUMIDITY</strong></p></td>\n <td>{{maxHumidity}}</td>\n </tr>\n </tbody>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":800,"y":260,"wires":[[]]},{"id":"383ce3322d0766a5","type":"ui_group","name":"reports","tab":"d297a39701056a62","order":1,"disp":false,"width":"25","collapse":false,"className":""},{"id":"d297a39701056a62","type":"ui_tab","name":"REPORTS","icon":"dashboard","order":8,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [8 June 2023 11:51 UTC](https://discourse.nodered.org/t/node-function-with-node-template/79050/2 "2023-06-08T11:51:59Z")

</div>

1. attach a debug with the option "show full message" set
  - verify the `msg` has the values you expect

2. change your ui\_template to access `{{msg.varname}}` (you currently dont have the `msg.` part)

One thing of note: Your variable accessors looks really strange.

e.g. `var reportDateMonth = msg.payload['COATEC: Report.Date.Month'];` is quite odd.

What does the data going into your function node look like?

---

<div class="post-metadata">

### Author: ![Loveflowersx](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@Loveflowersx](https://discourse.nodered.org/u/Loveflowersx)
#### Post date: [8 June 2023 12:30 UTC](https://discourse.nodered.org/t/node-function-with-node-template/79050/3 "2023-06-08T12:30:18Z")

</div>

That's it, thank you very much!

> 1. change your ui\_template to access `{{msg.varname}}` (you currently dont have the `msg.` part)

I would like to ask another question

I have posted this theme

```auto
[{"id":"2cc22929a47b82b3","type":"ui_template","z":"b714f7a74771721d","group":"d783cb980c3979fc","name":"Node-Red Dashboard Custom CSS","order":1,"width":0,"height":0,"format":"<style>\n\n /*Main background*/\n body {\n background: -webkit-linear-gradient(\n 55deg,\n #009785 0%,\n #245aa5 50%,\n #b800e9 100%\n );\n }\n\n /*Top bar*/\n body.nr-dashboard-theme md-toolbar,\n body.nr-dashboard-theme md-content md-card {\n background-color: transparent !important;\n color: #FFFFFF !important;\n }\n\n\n /*Left menu*/\n /*Sidebar*/\n body.nr-dashboard-theme md-sidenav {\n color: white !important;\n background-color: rgba(0,0,0,0) !important;\n }\n /*Hover selection*/\n a.md-no-style, button.md-no-style {\n border-radius: 10px !important;\n }\n /*Selected*/\n .nr-menu-item-active div button {\n border-right: 4px solid rgb(41 98 255) !important;\n }\n /*List*/\n body.nr-dashboard-theme md-sidenav div.md-list-item-inner {\n color: white !important;\n background-color: rgba(40,85,165,1) !important;\n border-radius: 10px !important;\n }\n\n\n /*Groups*/\n ui-card-panel {\n background-color: rgba(255,255,255,0.1) !important;\n border-radius: 10px !important;\n }\n .nr-dashboard-theme ui-card-panel {\n border: none !important;\n }\n /*Name groups*/\n .nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: rgba(255, 255, 255, 0.5) !important;\n }\n\n\n /*Bouttons*/\n .nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: rgba(255,255,255,.1) !important;\n }\n .md-button {\n border-radius: 10px !important;\n }\n\n\n /*Dropdown menu*/\n .nr-dashboard-theme md-select-menu{\n background-color: rgba(40,85,165,1) !important;\n }\n .nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {\n background-color: transparent !important;\n }\n .nr-dashboard-theme .md-select-menu-container {\n border-radius: 10px !important;\n border: none !important;\n }\n .nr-dashboard-theme md-select-menu md-option[selected] {\n color: white !important;\n background-color: #1a3566 !important;\n }\n\n /*Template*/\n md-card>img, md-card>md-card-header img, md-card md-card-title-media img {\n border-radius: 10px !important;\n }\n\n /* Color picker text BG */\n .nr-dashboard-theme .color-picker-input-wrapper > input {\n color: white !important;\n background-color: transparent !important;\n }\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","className":"","x":400,"y":200,"wires":[[]]},{"id":"d783cb980c3979fc","type":"ui_group","name":"Demo","tab":"0449b3b1fea99d52","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"0449b3b1fea99d52","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

```

and when I have the table I get black in the main column and I don't understand I think it should be transparent. I have tried with more properties and none of them make it transparent.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/edae61385811472e4e8053e6daff7379ec077758.png)

Best regards!

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [22 June 2023 12:31 UTC](https://discourse.nodered.org/t/node-function-with-node-template/79050/4 "2023-06-22T12:31:13Z")

</div>

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