Efficient way to pass HTML Element to Dashboard/Dashboard Table

First Post Just looking for guidance on my flow. I've been successful at parsing information and organizing it the way I need, without having to code (I know very little fundamentals).

Today, the 7-day table I've been trying to import isn't going through the CSV node properly. I did a restart of the application last night, and this happened this morning, where the object in my array is the amount of rows in the CSV, not the actual information from the rows in the CSV.

I believe the website is using a JS element to develop the tables on the HTML web page. I'm really looking to bring in their tables to my dashboard.

`[{"id":"496225e.0f393dc","type":"http request","z":"abd1dc82.3592","name":"","method":"GET","ret":"txt","paytoqs":"body","url":"https://www.iso-ne.com/transform/csv/sdf?start={{payload.0}}&version={{payload.1}}094248969","tls":"","persist":false,"proxy":"","authType":"","x":930,"y":280,"wires":[["32df4fc2.d54af","24f633d3.630d2c"]]},{"id":"d551e4f4.574928","type":"inject","z":"abd1dc82.3592","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":320,"y":180,"wires":[["a213a7a8.ca7258","e152cafc.29ba38","4a06e738.388ba8","2cb62842.149dd8"]]},{"id":"4a06e738.388ba8","type":"moment","z":"abd1dc82.3592","name":"Yesterday","topic":"","input":"","inputType":"date","inTz":"America/New_York","adjAmount":"0","adjType":"days","adjDir":"subtract","format":"YYYYMMDD","locale":"en_US","output":"payload","outputType":"msg","outTz":"America/New_York","x":600,"y":300,"wires":[["f31a78b0.a8e758"]]},{"id":"e152cafc.29ba38","type":"moment","z":"abd1dc82.3592","name":"Today","topic":"","input":"","inputType":"date","inTz":"America/New_York","adjAmount":"1","adjType":"days","adjDir":"add","format":"YYYYMMDD","locale":"en_US","output":"payload","outputType":"msg","outTz":"America/New_York","x":610,"y":220,"wires":[["f31a78b0.a8e758"]]},{"id":"f31a78b0.a8e758","type":"join","z":"abd1dc82.3592","name":"","mode":"custom","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"2","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":730,"y":260,"wires":[["496225e.0f393dc"]]},{"id":"853fa72f.68f948","type":"ui_template","z":"abd1dc82.3592","group":"59cd1b00.4b30a4","name":"","order":2,"width":"14","height":"14","format":"<table style=\"font-family:Arial;width:100%;border:1px solid #ccc;border-collapse: collapse;color:#667677;\"><thead style=\"border:1px solid #ccc;background:#6a9ef2;color:white !important; height:50px;padding:2px;\"><tr style=\"border:1px solid #ccc;\"><th class=\"string\">H</th></tr></thead><tbody style=\"\"><tr style=\"border:1px solid #ccc;\"><td style=\"border:1px solid #ccc;text-align:center;padding:3px;\" class=\"string\">T</td></tr></tbody></table>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":1560,"y":260,"wires":[[]]},{"id":"a213a7a8.ca7258","type":"ui_button","z":"abd1dc82.3592","name":"","group":"c40f11fd.4db88","order":1,"width":0,"height":0,"passthru":false,"label":"ISO-NE 7-Day","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":280,"y":520,"wires":[["e152cafc.29ba38","4a06e738.388ba8","2cb62842.149dd8"]]},{"id":"2cb62842.149dd8","type":"http request","z":"abd1dc82.3592","name":"","method":"GET","ret":"txt","paytoqs":"ignore","url":"https://www.iso-ne.com/markets-operations/system-forecast-status/seven-day-capacity-forecast/","tls":"","persist":false,"proxy":"","authType":"","x":930,"y":440,"wires":[["474e66a3.86d4e8"]]},{"id":"ff6d1b75.b4deb8","type":"tableify","z":"abd1dc82.3592","name":"HTML Table","before":"","after":"","tableStyle":"","theadStyle":"","tbodyStyle":"","trStyle":"","tdStyle":"","x":1330,"y":240,"wires":[["853fa72f.68f948","32df4fc2.d54af"]]},{"id":"32df4fc2.d54af","type":"debug","z":"abd1dc82.3592","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1390,"y":340,"wires":[]},{"id":"24f633d3.630d2c","type":"csv","z":"abd1dc82.3592","name":"","sep":",","hdrin":true,"hdrout":"none","multi":"mult","ret":"\\n","temp":"","skip":"4","strings":false,"include_empty_strings":false,"include_null_values":false,"x":1030,"y":220,"wires":[["ff6d1b75.b4deb8","32df4fc2.d54af"]]},{"id":"474e66a3.86d4e8","type":"debug","z":"abd1dc82.3592","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1270,"y":440,"wires":[]},{"id":"ec12d71f.695468","type":"ui_table","z":"abd1dc82.3592","group":"58f7d9a.0b05828","name":"","order":0,"width":0,"height":0,"columns":[],"outputs":0,"cts":false,"x":1490,"y":180,"wires":[]},{"id":"59cd1b00.4b30a4","type":"ui_group","z":"","name":"7-day","tab":"42a29f4d.fd0e5","order":3,"disp":true,"width":"14","collapse":false},{"id":"c40f11fd.4db88","type":"ui_group","z":"","name":"group2","tab":"42a29f4d.fd0e5","order":4,"disp":false,"width":"3","collapse":false},{"id":"58f7d9a.0b05828","type":"ui_group","z":"","name":"Default","tab":"","order":1,"disp":true,"width":"6","collapse":true},{"id":"42a29f4d.fd0e5","type":"ui_tab","z":"","name":"East and Northeast","icon":"dashboard","disabled":false,"hidden":false}]`

No, its not drawn by JS so you can simply scrape it from the http response

This should get you going (I did one table, repeat the last 2 nodes and change .0 --> .1 for the next table in the array) ...

[{"id":"6511626d.62dcdc","type":"inject","z":"a2efa957.b9b158","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":400,"y":440,"wires":[["f332c6d.066fc38"]]},{"id":"f332c6d.066fc38","type":"http request","z":"a2efa957.b9b158","name":"","method":"GET","ret":"obj","paytoqs":false,"url":"https://www.iso-ne.com/markets-operations/system-forecast-status/seven-day-capacity-forecast/","tls":"","persist":false,"proxy":"","authType":"","x":570,"y":440,"wires":[["f79c5d7a.d833a","a1fb1206.338c2"]]},{"id":"f79c5d7a.d833a","type":"debug","z":"a2efa957.b9b158","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":770,"y":440,"wires":[]},{"id":"a1fb1206.338c2","type":"html","z":"a2efa957.b9b158","name":"tables","property":"payload","outproperty":"payload","tag":"table","ret":"html","as":"single","x":570,"y":500,"wires":[["63ce86ea.1fb8d8","c44ccf43.84072"]]},{"id":"63ce86ea.1fb8d8","type":"debug","z":"a2efa957.b9b158","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":770,"y":500,"wires":[]},{"id":"c44ccf43.84072","type":"template","z":"a2efa957.b9b158","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table style=\"font-family:Arial;width:100%;border:1px solid #ccc;border-collapse: collapse;color:#667677;\"><thead style=\"border:1px solid #ccc;background:#6a9ef2;color:white !important; height:50px;padding:2px;\"><tr style=\"border:1px solid #ccc;\"><th class=\"string\">H</th></tr></thead><tbody style=\"\"><tr style=\"border:1px solid #ccc;\"><td style=\"border:1px solid #ccc;text-align:center;padding:3px;\" class=\"string\">\n    {{{payload.0}}}\n</table>","output":"str","x":580,"y":560,"wires":[["da64210b.75778"]]},{"id":"da64210b.75778","type":"ui_template","z":"a2efa957.b9b158","group":"48727af.0206f84","name":"","order":3,"width":"14","height":"8","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":720,"y":560,"wires":[[]]},{"id":"48727af.0206f84","type":"ui_group","z":"","name":"7-day","tab":"858c684b.b564b8","order":3,"disp":true,"width":"14","collapse":false},{"id":"858c684b.b564b8","type":"ui_tab","z":"","name":"East and Northeast","icon":"dashboard","disabled":false,"hidden":false}]

NOTE: this adds a fairly bare HTML table to your dashboard - you will likely want to apply styling. I suggest you add a class to the table and add a ui_template node (set for head) with a <style> tag defining some nice CSS styling for your dashboard

Thank you Steve * 100000! I have a lot of learning to do. The selecting of the selector "Table" I didn't know to do that. I'll work on the CSS styling; at the moment I'm lost, but I'm getting there.

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