Hello all, I am new to HTML and CSS and I have been reading through the forum for a while looking for a solution to this problem.
I currently have 4 template nodes, all of which contain HTML and CSS styling. I am using a switch node to select which template I want to use, and then passing it to a UI template node to make the dashboard match based on certain criteria.
The issue I am having is that I can get the CSS to pass using {{msg.format}} between style elements, but I cannot get the HTML to pass as well. I know that when sending msg.payload to the UI template node it reads it as plain text, and when I send msg.payload to the UI template with the ng-bind-html it does not seem to work with the CSS.
The HTML and CSS contained in the template nodes works when placed in the UI template node, but it is not being displayed correctly when I am attempting to pass it. I am doing something wrong when attempting to send both, but I cannot figure out my issue.
I have attached some of the nodes below. Thank you all for the help.
[
{
"id": "ee4bd0e8e4ddfc95",
"type": "switch",
"z": "1982ff5883559295",
"name": "Years?",
"property": "payload.Years",
"propertyType": "msg",
"rules": [
{
"t": "eq",
"v": "5",
"vt": "str"
},
{
"t": "eq",
"v": "10",
"vt": "str"
},
{
"t": "eq",
"v": "15",
"vt": "str"
},
{
"t": "eq",
"v": "20",
"vt": "str"
},
{
"t": "eq",
"v": "25",
"vt": "str"
},
{
"t": "else"
}
],
"checkall": "true",
"repair": false,
"outputs": 6,
"x": 790,
"y": 920,
"wires": [
[
"2897efa418c1ed99"
],
[
"2897efa418c1ed99"
],
[
"2897efa418c1ed99"
],
[
"2897efa418c1ed99"
],
[
"2897efa418c1ed99"
],
[
"994479d4c5b5c50a"
]
]
},
{
"id": "2897efa418c1ed99",
"type": "switch",
"z": "1982ff5883559295",
"name": "Photo?",
"property": "payload.Photo",
"propertyType": "msg",
"rules": [
{
"t": "null"
},
{
"t": "else"
}
],
"checkall": "true",
"repair": false,
"outputs": 2,
"x": 960,
"y": 900,
"wires": [
[
"ca482628d86ab917"
],
[
"fd15eecd964bc93e"
]
]
},
{
"id": "994479d4c5b5c50a",
"type": "switch",
"z": "1982ff5883559295",
"name": "Photo?",
"property": "payload.Photo",
"propertyType": "msg",
"rules": [
{
"t": "null"
},
{
"t": "else"
}
],
"checkall": "true",
"repair": false,
"outputs": 2,
"x": 960,
"y": 940,
"wires": [
[
"cdeca4b4430a7939"
],
[
"c516bdf2c0ec7afb"
]
]
},
{
"id": "ca482628d86ab917",
"type": "template",
"z": "1982ff5883559295",
"name": "milestone, no photo",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<head style=\"background: transparent !important;border: transparent;\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n \n <style>\n body {\n background-image: url(\"/Celebration/Milestone Year Background.jpg\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover; //100%;\n }\n\n body.nr-dashboard-theme md-content md-card {\n border-radius: 20px;\n background: transparent !important;\n border: transparent;\n }\n\n #nr-dashboard > md-content > section > md-content {\n overflow: hidden; /*removes scrollbar*/\n }\n \n #Tab_html_testing2 {\n justify-content: center;\n }\n \n #html_testing2_Group_1_cards {\n width: 100vw !important;\n height: 100vh !important;\n margin-left: 13.5vw;\n }\n \n #html_testing2_Group_1_cards > md-card {\n width: 100vw !important;\n position: relative;\n }\n \n .nr-dashboard-cardpanel {\n width: 100vw !important;\n }\n \n .nr-dashboard-theme ui-card-panel {\n border-radius: 20px;\n background: transparent !important;\n border: transparent;\n justify-content: center;\n }\n \n .container {\n /*float: right;*/\n position: relative;\n text-align: center;\n background: transparent !important;\n border: transparent;\n }\n\n .centered {\n position: absolute;\n left: 50%;\n transform: translate(-50%, -50%);\n background: transparent !important;\n border: transparent;\n }\n\n .row {\n background: transparent !important;\n border: transparent;\n display: flex;\n flex-wrap: nowrap;\n width: 75vw !important;\n height: 80vh !important;\n margin-top: 10vh;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n }\n\n .column {\n background: #F0BF60 !important;\n flex: 45% !important;\n border-radius: 10px;\n text-align: center;\n border: 2px solid white;\n flex-direction: column;\n height: auto;\n }\n \n </style>\n</head>\n\n\n\n<div class=\"row\">\n <div class=\"column\">\n <h2 style=\"background:transparent !important; font-size:2.75vw;\">Thank you for your time here at eCMMS!</h2>\n <div class=\"container\" style=\"width:100%; background:transparent !important; background-position:center; flex: 2 1 auto;\">\n <img src=\"/Celebration/Milestone Year.jpg\" alt=\"Image not working right\" style=\"width:100%; background:transparent !important; flex: 3 1 auto;\">\n <div class=\"centered\" style=\"color:black; font-size:10vw; top:45%; background:transparent !important; flex: 2 1 auto;\">{{msg.payload.Years}}</div>\n </div>\n <h2 style=\"background:transparent !important; font-size:4vw !important;\">{{msg.payload.Name}}</h2>\n <h2 style=\"background:transparent !important; font-size:2vw !important;\">{{msg.payload.JobTitleDescription}} - {{msg.payload.HireDate}}</h2>\n </div>\n</div>",
"output": "str",
"x": 1150,
"y": 860,
"wires": [
[
"b8de27470dd67b1d"
]
]
},
{
"id": "fd15eecd964bc93e",
"type": "template",
"z": "1982ff5883559295",
"name": "milestone, photo",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<head style=\"background: transparent !important;border: transparent;\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n \n <style>\n body {\n background-image: url(\"/Celebration/Milestone Year Background.jpg\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover; //100%;\n }\n\n body.nr-dashboard-theme md-content md-card {\n border-radius: 20px;\n background: transparent !important;\n border: transparent !important;\n }\n \n #html_testing2_Group_1 {\n width: 75vw;\n height: 76vh;\n background: transparent;\n border: transparent;\n margin-top: 10vh;\n }\n \n #html_testing2_Group_1_cards > md-card {\n width: 75vw !important;\n height: 100vh !important;\n overflow-x: hidden !important;\n }\n \n .row {\n display: flex;\n height: 75vh;\n border: 3px solid white;\n border-radius: 5px;\n }\n\n .column {\n flex: 1;\n width: 50vw;\n border: transparent;\n background-color: #F0BF60;\n }\n \n .column:nth-child(1) { \n /*margin-right: 10px;*/\n }\n \n .column:nth-child(2) {\n \n }\n \n .container {\n background: transparent !important;\n border: transparent !important;\n width: 100%;\n height: 100%;\n overflow: visible;\n }\n \n .centered {\n /*position: absolute;*/\n background: transparent !important;\n border: transparent;\n }\n \n .centered:nth-child(2) {\n font-size: 10vw;\n text-align: center;\n white-space: nowrap;\n transform: translate(0%, -270%) !important;\n /*top: 80%;*/\n }\n \n .centered:nth-child(3) {\n font-size: 3.5vw;\n text-align: center;\n white-space: nowrap;\n transform: translate(0%, -410%) !important;\n /*top: 45%;*/\n }\n \n .img {\n background:transparent !important;\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: 75%;\n border: 2px white solid;\n }\n \n </style>\n</head>\n\n\n\n<div class=\"row\">\n <div class=\"column one\">\n <h2 style=\"background:transparent !important; font-size:2vw; text-align:center;\">Thank you for your time here at eCMMS!</h2>\n <img src=\"{{msg.payload.Photo}}\" class=\"img one\">\n <h2 style=\"background:transparent !important; font-size:3vw; text-align:center;\">{{msg.payload.Name}}</h2>\n <h2 style=\"background:transparent !important; font-size:1.75vw; text-align:center;\">{{msg.payload.JobTitleDescription}}</h2>\n </div>\n \n <div class=\"column two\">\n <div class=\"container\">\n <img src=\"/Celebration/Blank Year Icon.jpg\" style=\"width:100%; height:100%; background:transparent !important\">\n <div class=\"centered one\">{{msg.payload.Years}}</div>\n <div class=\"centered two\">{{msg.payload.HireDate}}</div>\n </div>\n </div>\n</div>",
"output": "str",
"x": 1160,
"y": 900,
"wires": [
[
"b8de27470dd67b1d"
]
]
},
{
"id": "c516bdf2c0ec7afb",
"type": "template",
"z": "1982ff5883559295",
"name": "general, photo",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<head style=\"background: transparent !important;border: transparent;\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n \n <style>\n body {\n background-image: url(\"/Celebration/General Year Background.jpg\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover; //100%;\n }\n\n body.nr-dashboard-theme md-content md-card {\n border-radius: 20px;\n background: transparent !important;\n border: transparent !important;\n }\n \n #html_testing2_Group_1 {\n width: 75vw;\n height: 76vh;\n background: transparent;\n border: transparent;\n margin-top: 10vh;\n }\n \n #html_testing2_Group_1_cards > md-card {\n width: 75vw !important;\n height: 100vh !important;\n overflow-x: hidden !important;\n }\n \n .row {\n display: flex;\n height: 75vh;\n border: 3px solid white;\n border-radius: 5px;\n }\n\n .column {\n flex: 1;\n width: 50vw;\n border: transparent;\n background-color: #2F5597;\n }\n \n .column:nth-child(1) { \n /*margin-right: 10px;*/\n }\n \n .column:nth-child(2) {\n \n }\n \n .container {\n background: transparent !important;\n border: transparent !important;\n width: 100%;\n height: 100%;\n overflow: visible;\n }\n \n .centered {\n /*position: absolute;*/\n background: transparent !important;\n border: transparent;\n }\n \n .centered:nth-child(2) {\n font-size: 10vw;\n text-align: center;\n white-space: nowrap;\n transform: translate(0%, -270%) !important;\n /*top: 80%;*/\n }\n \n .centered:nth-child(3) {\n font-size: 3.5vw;\n text-align: center;\n white-space: nowrap;\n transform: translate(0%, -410%) !important;\n /*top: 45%;*/\n }\n \n .img {\n background:transparent !important;\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: 75%;\n border: 2px white solid;\n }\n \n </style>\n</head>\n\n\n\n<div class=\"row\">\n <div class=\"column one\">\n <h2 style=\"color:white !important; background:transparent !important; font-size:2vw; text-align:center;\">Thank you for your time here at eCMMS!</h2>\n <img src=\"{{msg.payload.Photo}}\" class=\"img one\">\n <h2 style=\"color:white !important; background:transparent !important; font-size:3vw; text-align:center;\">{{msg.payload.Name}}</h2>\n <h2 style=\"color:white !important; background:transparent !important; font-size:1.75vw; text-align:center;\">{{msg.payload.JobTitleDescription}}</h2>\n </div>\n \n <div class=\"column two\">\n <div class=\"container\">\n <img src=\"/Celebration/Blank Year Icon.jpg\" style=\"width:100%; height:100%; background:transparent !important\">\n <div class=\"centered one\">{{msg.payload.Years}}</div>\n <div class=\"centered two\">{{msg.payload.HireDate}}</div>\n </div>\n </div>\n</div>",
"output": "str",
"x": 1160,
"y": 980,
"wires": [
[
"b8de27470dd67b1d"
]
]
},
{
"id": "cdeca4b4430a7939",
"type": "template",
"z": "1982ff5883559295",
"name": "general, no photo",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<head style=\"background: transparent !important;border: transparent;\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n \n <style>\n #nr-dashboard-toolbar {\n background: transparent !important;\n color: blue;\n }\n \n body {\n background-image: url(\"/Celebration/General Year Background.jpg\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover; //100%;\n }\n \n body.nr-dashboard-theme md-content md-card {\n border-radius: 20px;\n background: transparent !important;\n border: transparent;\n }\n \n #Tab_html_testing2 {\n justify-content: center;\n }\n \n #nr-dashboard > md-content > section > md-content {\n overflow: hidden; /*removes scrollbar*/\n }\n\n #html_testing2_Group_1_cards {\n width: 100vw !important;\n height: 100vh !important;\n margin-left: 13.5vw;\n }\n \n #html_testing2_Group_1_cards > md-card {\n width: 100vw !important;\n }\n \n .nr-dashboard-cardpanel {\n width: 100vw !important;\n }\n \n .nr-dashboard-theme ui-card-panel {\n border-radius: 20px;\n background: transparent !important;\n border: transparent;\n justify-content: center;\n }\n \n .container {\n /*float: right;*/\n position: relative;\n text-align: center;\n background: transparent !important;\n border: transparent;\n }\n\n .centered {\n position: absolute;\n left: 50%;\n transform: translate(-50%, -50%);\n background: transparent !important;\n border: transparent;\n }\n\n .row {\n background: transparent !important;\n border: transparent;\n display: flex;\n flex-wrap: nowrap;\n width: 75vw !important;\n height: 80vh !important;\n margin-top: 10vh;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n }\n\n .column {\n background: #2F5597 !important;\n flex: 45% !important;\n border-radius: 10px;\n text-align: center;\n border: 2px solid white;\n flex-direction: column;\n }\n \n </style>\n</head>\n\n\n\n<div class=\"row\">\n <div class=\"column\">\n <h2 style=\"background:transparent !important; color:white !important; font-size:2.75vw;\">Thank you for your time here at eCMMS!</h2>\n <div class=\"container\" style=\"width:100%; background:transparent !important; background-position:center; flex: 2 1 auto;\">\n <img src=\"/Celebration/General Year.png\" alt=\"Image not working right\" style=\"width:100%; background:transparent !important; flex: 3 1 auto;\">\n <div class=\"centered\" style=\"color:black; font-size:10vw; top:40%; background:transparent !important; flex: 2 1 auto;\">{{msg.payload.Years}}</div>\n </div>\n <h2 style=\"background:transparent !important; color:white !important; font-size:4vw !important;\">{{msg.payload.Name}}</h2>\n <h2 style=\"background:transparent !important; color:white !important; font-size:2vw !important;\">{{msg.payload.JobTitleDescription}} - {{msg.payload.HireDate}}</h2>\n </div>\n</div>",
"output": "str",
"x": 1150,
"y": 940,
"wires": [
[
"b8de27470dd67b1d"
]
]
},
{
"id": "b8de27470dd67b1d",
"type": "ui_template",
"z": "1982ff5883559295",
"group": "03037d81efd28297",
"name": "Selection Template",
"order": 6,
"width": 0,
"height": 0,
"format": "<div ng-bind-html=\"msg.payload\"></div>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 1390,
"y": 920,
"wires": [
[]
]
},
{
"id": "03037d81efd28297",
"type": "ui_group",
"name": "Group 1",
"tab": "39a195775f2e9c27",
"order": 1,
"disp": false,
"width": "15",
"collapse": false,
"className": ""
},
{
"id": "39a195775f2e9c27",
"type": "ui_tab",
"name": "html testing2",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
