How to create a data table in Node RED Dashboard
Вставка
- Опубліковано 22 лип 2024
- Did you know that you can install additional gadgets to the Node-RED dashboard? Learn how to add the table node package, and then see an example of real-world data. In this video you will learn how to create a data table for your Node-RED dashboard.
00:00 Introduction
00:52 Installing the table node
01:31 Documentation overview
02:15 Static example data
03:54 Adding the table to the dashboard
05:45 Getting real-world data
07:08 Setting dynamic properties
09:40 Seeing a single row update
10:46 Configuring the table
13:57 Adding additional rows
17:02 Limiting the number of rows
18:13 Emptying the table
19:57 Conclusion
Node-RED tutorials: / playlistlist=plkyvtror...
Introduction to JSON: • Intro to JSON for Node...
Basic Dashboard UI: • Tutorial: Basic Node-R...
Node-RED context storage: • How to use context sto...
Array function reference: www.w3schools.com/jsref/jsref...
Learn More:
www.opto22.com/
nodered.org/docs/user-guide/w...
nodered.org/docs/user-guide/c...
discourse.nodered.org/
forums.opto22.com/
More FREE online training
training.opto22.com/
All Opto 22 products are designed, manufactured, and supported in the U.S.A. from our Temecula, California headquarters and factory.
#api #nodered #node #groov #JSON #IoT #Tutorial #learnprogramming #programming #IIoT #automation #javascript #node-REDdashboard
Thank you for this wonderfull guide. I could only wish that my teachers can explain things as clearly as you.
I love the way you teach it.
Very clearly explained in this video. Thanks for sharing this with us. 👍
Glad it was helpful!
Another Excellent video.. Thanks for all the efforts to make these videos..👍👍
Thanks so much!!!
Excellent, thank-you.
Thanks so much!
fine video, very easy to build now a table myself!!
Glad it was helpful!
Hello Terry, thank you very much for your fantastic training videos and valuable technical information. Your way of presenting Node-RED any your Opto Products is really a great pleasure to watch and appreciated.
Unfortunately, I’ve noticed when trying to reading some of the additional information mentioned under the video, that a few links in learn more, are not available anymore and do not work.
Would there by any chance to update these?
In any case Terry, thank you very much again for all your quality training and enormous efforts!
Excellent video
Glad you liked it
Well presented!
Glad it helped!
Personally, I would have preferred a while loop to pop off your table while it's > 5. It would be more fault tolerant in case a bug ever caused your table to grow beyond 6 (for whatever reason), and it better reflects your intention to always limit the table to 5 rows.
Thank you very much, your video help me!
Do you have a course?
Yes, there is more FREE training at: training.opto22.com/
This is the only YT vid to make any sense of the ui-table. Very many thks, you saved me leaving NR and using other lang to complete project.
But 2 issues. 1> The table only updates on screen for the first entry, any further entries looks like nothing happens until you refresh the ui browser/webpage, this off course is hopeless for a real world prog, do you have any pointers as to how to make the display of data show when an entry in the table is added and complete array resent, looking at the other comments it seems like the guy with far eastern name may be describing the same issue as me.
2> I have added the ui-table columns to tidy up/size etc as you explain but when these are added I can get NO data displayed until I remove the the columns, and yes the items names are correct from the array that my prog sends.
One last point noted. when you define the ( i think savedData variable ), you just type savedData = , without preceding with a the var keyword, I cannot use your code as you type it without starting the line with var, as will throw an error, while adding var works for me now there has to be a reason why your NR does not need to precede the variable declarations with var.
One again your clear concise approach and superbly timed speaking manner with a super clear diction is very much appreciated. My project may not be finalised in NR due to the above but without this vid I would have kicked out NR for another platform without you, so still with NR for now, I just very much hope you may make a reply to this with some pointers to resolve the above. Keep up the good tutorials and will be checking out ALL your others. Kind Rgds.
Very educational!
How to show the table name (not the group name) in the dashboard?
Thanks for a great video on node red UI-Table design! This is perfect for my project where I want to use UI-Table to display an alarm list from the PLC control system I'm using. The only thing to make it complete, is to automatically refresh the table every time a new alarm appears. Like in your example it only updates when the browsers refresh button is manually pressed. Is there a way to make the refresh automatic? Other than that this example is perfect.
Thank you! Veryy good
Thanks so much!
Great explanation, thank you
glad you liked it!
you have my respect
And you, ours. Thanks Raul!!
ello, thanks for your contribution, I have a problem, my database is fine, but when I want to use this node, it happens to me that it does not appear in the dashboard, and I followed the steps just like in the video, but there was no case, I tried it in 2 PCs that I have a network node and it is the same time ago if it worked for me but now I do the same steps and it does not appear, could it be something with the versions? Or what else could it be that is giving me problems? greetings and thank you very much.
Great video! Can I storage all table data and the struct buit to a Sqlite?
Where do you define savedCount?
I couldn´t find flow.set("savedCount", tablaData)
One other tip is to convert the door state on the fly too for better readability, something like changing msg.doorState to
msg.doorState ? "Closed" : "Open"
or you can switch them round depending on what true/false actually means...
Hello! Thanks for the good Video! I would have a Question: How do I make a dynamic List where I can add a row with data and then when needed, remove the same row of data later? Maybe using some id number…
100/100 you saved my life ✨
Thanks!! Glad it helped.
@@Opto22 how can I put data from a python dictionary?
Can you save the table data in a SharePoint List?
Node red is great! I´d only like to have a more friendly export file format in order to be able to learn and escalate as with other lenguages. Besides that, it is fantastic.
Thanks for sharing!
Thank you for this good tutorial. If I want to use these tables, I have to restart the Node-red service on my server so that the table is visible on the dashboard. After that, all my other dashboards are invisible. To correct this, I need to delete the node array and restart the service on my server. Is this a known problem? Thanks for your help.
Hi! Is there an easy way to 'download' all the values in the table (to .csv) via a button? and if yes, do you know if there is an example flow which i can use?
Is it possible to edit record values and save them back to the database?
also by few users at the same time...
morning, sir. May I ask you question
how if my table was not updated automatically, I mean I have to refresh my ui to get my table updated. Whats wrong, sir ? 🙏
i get the answere, use this funcion ="msg.ui_control = {tabulator: {data: msg.payload}};
return msg;". This function updates the data in real time.
Thank you ! @@diegogalabvis472
Can u do a FTP server on node red ?
this could be used to create an alarm buffer. Having to build your own alarm logic is the thing that I have not yet managed to wrap my head around in node red. Trying to get something similar to WINCC alarm management. not easy for a noob
How will you get those data to send or notify you for example Telegram?
This is a great tutorial! It was just what I was looking to do in creating an event stack to display in dashboard. However, mine doesn't seem to update the table unless I refresh the Dashboard. Any suggestions?
have same problem, did you get the solution ?
I have problem with adding the table. I can add one table, but the Tab is missing and not able to add other dashboard icon in same page.
congratulations for your video. it helps me a lot in node red. I have a doubt I have a table where I store data collected by my plc. I need to save this table in Pdf daily. how could i do this? thanks
Glad it helped!
It's very nice. But why my ui-table can't auto update new coming data? Thank you!
Let me check
Can u make it with database
How to show data from database sql to the table, please make the tutorial bro, i really need that
good
Thanks so much!!!
Node-red uses javascript to work?
Yes, the Node-RED runtime is built on Node.js
Great video. Can you make a video on how to get data from MySql to Node-Red and display it in a chart instead of a table?
He's actually already done that here! ua-cam.com/video/xwLTby6b-IU/v-deo.html
Check out this older video:
ua-cam.com/video/xwLTby6b-IU/v-deo.html
My ui-table can't auto update new coming data
have same problem, did you get the solutions after this 2 month ?
@@fun_tech No
I have the same problem, I can't find any solution, what about yall ?
Same problem with me as well. Any found a solution to make the table auto update when new data arrives?
Great Video, only cant read the contents of the Function block shown at timestamp 15:49, top line tableData = flow.get("savedData") {} [];????
maybe because of have UK keyboard??
Re-watched video and can see they are two parallel line ' || ' added them , but I get an error as soon as I type tabledata, makes no sense to me...
tableData = flow.get("savedData") || [];
tableData.unshift({
"Timestamp": new Date(msg.payload).toLocaleString(),
"Lat": global.get("Latitude_ISS"),
"Long": global.get("Longitude_ISS")
});
msg.payload = tableData;
flow.set("savedData",tableData);
return msg;
hello there if could please guide me, below mentioned in my function where each msg is incoming data from energy meter, I want to push each data to table if you can please guide
"
var msg0 = {payload:msg.payload[0]};
var msg1 = {payload:msg.payload[1]/10};
var msg2 = {payload:msg.payload[2]/10};
var msg3 = {payload:msg.payload[3]/10};
var msg4 = {payload:msg.payload[4]/10};
var msg5 = {payload:msg.payload[5]/10};
var msg6 = {payload:msg.payload[6]/10};
var msg7 = {payload:msg.payload[7]/10};
return [msg0, msg1,msg2,msg3,msg4,msg5,msg6,msg7]; "
I get an error when I enter the TableData... Seems like it is not recovnizing the "savedData". You have to modify the 1 line to -> var tableData = flow.get("savedData") || [];