How to create a data table in Node RED Dashboard

did you know that you can install additional gadgets to the node-red dashboard well you can and it's really easy to do in this video i'll be adding to the default dashboard elements by installing the table node package and i'll build up an example using real-world data to get a table in your dashboard you simply have to install an additional node-red node ui table package drop an instance of the node in and provide it with the right payload exactly what that payload contains will depend on your particular application but it must always have the correct structure which we'll see an example of shortly before i dive into any of that i am going into this video assuming you have some familiarity with node-red the node-red dashboard and json formatting if you haven't worked with these things before don't worry we have some introductory videos that can help you get started and we'll have those linked in the description below [Music] so with all of that said let's get started you can see here i already have the node-red dashboard installed but i don't have anything configured yet if i scroll down into my palette you can see i have all of these default nodes here but the table node is not among them so let's go ahead and get that installed i'll just come up here go into manage palette and come over to the install tab and type in ui-table this first result here is the one that i want to install and i'm going to open up the documentation here using this link and we'll come back to that in a moment we'll have a look at that documentation while this installs and i can select view log here to make sure that it comes down correctly you can see i uninstalled it earlier but we're going to bring it in brand new here for this video so over here in the documentation you can see we have a lot of information about how the table node works you can see this is what it's actually going to look like once we actually drop one in we have our different rows here that contain all of our data and the data is represented in these different columns so you can see we have name age favorite color and date of birth all laid out here and this is what we're going to be looking at in just a moment you do have a lot more options than just this raw data for example you can have these stars check marks urls all that kind of thing you do have a lot of options with these richer table options that you can see here we're not going to go into those in this video but just know that it's a really powerful tool here what we do want to focus on today are is this example data you can see this is how the payload is expected to come in so we have this array and you can see that's denoted by the square brackets at the start and end here that means that we have a list of rows here and then each row is represented by an object how do we determine what the columns are well those are our different properties for example name age favorite color and date of birth and they are exactly the same between our different rows for example name is the same name is the same age and age and so on and you can see they're separated by these commas so what we need to do is provide an array and inside of that array are individual objects so let's just copy this example and we'll inject that into our table so that we can just see how this works and make sure that this formatting is as we expect it to be so here we go you can see while i've been going through that documentation i've managed to install this no arrows one package added and we have that return code of zero so we're good to go and you can see if i scroll down now we do have this table node so let's just drag that in you can see i do have that red arrow there the red triangle because it hasn't been configured yet so let's just drop in a inject here and we're going to set our data using a function node and the function node is really good because it means that we can not only see our data really cleanly we can also change it if we need to with different functions within this javascript so if you're not familiar with javascript don't be intimidated this is going to be really really straightforward we're just going to paste in that example exactly and we're going to set that to be our message.payload so now our message.payload is this array that contains two objects that's all we need to do we're going to inject this into our table node and we'll be able to see it in our ui first though we do need to set an actual place for this table to exist so i'll go ahead and click the pencil here so that we can edit and add a new tab here let's just call this example since we're just using it for an example and this is going to be the tab we'll add it to we'll go ahead and click add and we're going to create this group called table and that's going to exist in the example tab and we're going to give it a width of 12. you could go narrower or wider but 12 is just a good value you really want your tables to be nice and wide because you want to be able to make out all of the different column titles for example here you can see it's just w dot dot dot it's not very helpful but if we make this wider we will be able to fit not only all of our data but all of our column titles in there so let's go ahead and give it that width of 12. i'll click update and we can see we're just going to add this table node to our example table page and i'll leave everything else unconfigured we'll leave the sizes auto we're not going to set any columns we'll come back to this later i just want you to see how it works right out of the box let's go ahead and deploy we'll see that now we are going to in fact have a table and if i come over to my dashboard you can see yep there's our table right here but there's no data in it yet and that's because we haven't injected anything it needs to actually receive a payload before it can display anything so let's go ahead and inject it's going to grab that data from our function node put it on the table and there you go we can see exactly the payload that i put in with name age favorite color date of birth this is just what a basic table looks like i can resize these for example if i just drag this over i can reorder them by clicking and dragging you can see i can reorder them by for example who is the oldest when is their date of birth the alphabetized their names you can completely choose how your data is displayed here but let's actually add some dynamic data here these are just one thing that i just threw in one time let's actually get some real world data and i already have an example set up right here i'm getting some values and these values are coming from this industrial controller next to me this groov rio but it really doesn't matter where your data comes from you don't need to have a groov rio to be able to use the table node this is just where i'm getting my data from for example i have temperature coming in from this ictd temperature probe right here that i can heat up with my body temperature i have fuel level that i'm simulating with this potentiometer and i'm going to say that this button is a door that could be open or closed for example i just opened it and closed it again i'm also counting exactly how many times this gets opened and i'm just doing that by reading in the digital state and i'm incrementing a count and saving it to a variable i'm calling savedcount i can display that right here by just selecting this i'll click it open you can see it's been opened twice now and we'll close it again so that's just a variety of data i'm getting with these different inputs so that we can we can see some real world data here but again your data could be coming from anywhere it could be coming from a database it could be coming from something like another api or wherever the main thing is is that it needs to be coming into node node-red and so if i have my debug enabled to you we can see every five seconds i'm going to be getting data once i see it in the debug and i have it in properties i'm able to put it in the table node so let's actually go ahead and do that i'm going to just make a copy or sorry i'm going to delete this inject i'm going to drag this function node and this table node up here and we're going to replace that example data with my data so i'm just going to drag this wire over and we're going to fill this function node instead of using this static data we're going to use our dynamic real world data so let's just delete that other row delete all of these properties and we're going to fill this in with our own data so starting at the top here you can see i have my timestamp on message.payload and you know when i click it over here in the debug i can actually see the time but by default it's just this number it's this raw timestamp so i'm going to do a quick little conversion here and that's a great benefit of the function notice i can put whatever functions i want in here so i can have my timestamp here and i'm going to set that to be my payload so my message.payload but i'm going to use the date function to make it a little bit more readable so i'll do new date i'll hand in that current timestamp and i'm just going to get the local string to locale string you can see that it's a function because it turned blue there and then we're just going to work our way down the list we're going to add each of the columns that we want inside this specific row so let's do the next one let's do temperature and that is just message.temperature you can see here though that i have a lot of decimal places here and that's not something i need to see when i'm just glancing at a table you may want a lot of decimal places for your application but for this example i only need say two decimal places so i'm just going to use the function to fix and fix it to two decimal places we'll do the same thing with the fuel level so we'll just do message.fuel level and we're going to again do two fixed to just two decimal places next i'll grab my door state i don't need to do anything to that because it's just a boolean message.doorstate and finally we'll get that saved count and we're going to flow.get that from where i've saved it and there we go we have our five different values here our five columns that are going to go into this one row you don't need to do anything specifically special with your data if you don't need to but again this is a great benefit of using the function node we don't need to make any other changes we're just going to inject this message.payload which again is an array and in this case it contains one object so let's go ahead and see what that looks like i will deploy we'll see it'll populate that same table and if i come over here to my dashboard you can see there we go there is all of our data again i didn't have to specify what each of these columns are because it's just grabbing the property that i handed in for example i called the property temperature temperature and that's what appears in the column name you can also see that i do kind of have to do some resizing and then a scroll bar shows up and every time it gets injected i have to do this again and so even though the data is updating for example if i turn the door state to true five seconds later or within five seconds you can see it's turned to true my save count is up to three i can change my fuel level so this is in fact real live data but again it's a little tricky to read we kind of need the time stamp to be a little bit wider door state doesn't need to be that wide fuel level just kind of doesn't look that pretty so let's let's clean this up and then we'll start adding additional rows so first things first let's clean this data up a little bit to do that i'll just open up the table node and you can see here my size is set to auto and that's why i have this little scroll bar over here on the side even though i only have one row it automatically just tries to fill a certain length of the table but i can actually fix that for example i can make it 12 12 wide which i have it set to and i can make it for example three units deep and i can also specify exactly how each column is defined so i have five columns so i'll click this add button in the bottom left here and add one two three four five for my five columns and i'm going to actually rename them for example instead of timestamp i'm going to call it date time because that's a little bit more descriptive and a little nicer to look at i can also make it a little bit wider for example 160 pixels wide so that i can fit everything you can choose the alignment i'm going to leave it as left but a center or right might make more sense for your data i can also choose different formats for example links and images and those stars that you saw in the richer example earlier i'm not going to mess with that today i'll leave it as plain text but you should know that those options are there for you now i'll just move my way through the list so my property name that i'm handing in is temperature and i'm just going to capitalize that i'll leave the width as order there and i'll move on to the next one so for example view level i could capitalize the f add a space in between and enter that one next now we'll do door state and i'm just going to call this door nice and simple and because it's just a true false boolean i'll just make it 80 pixels wide so it's a little bit more narrow finally i have my saved count and i'm going to just call that count and again because it's just a small number i'm going to make it 80 pixels wide you'll note that these don't exactly match what i have over here in the debug for example saved count doesn't appear in this object at all because it's what's coming out of this flow here if i add another debug we'll wire this in and we'll see exactly what's coming out of the function node because that's precisely what i need to be entering into the table node you can see here once i do all my function i'm setting timestamp temperature fuel level and door state and you can see that's what i have here in my payload i'll open up this object and you can see here i have timestamp rather than payload my payload itself is that array so these are what i'm referring to inside of the configuration of the table node timestamp temperature fuel and you can see right there is savedcount so that's what i'm referring to is this property here savedcount because that's the output of my function node that's what goes into the table node so that's what i need to reference when i'm doing the configuration now when i come back to the dashboard you can see i can easily able to see the full daytime my column titles are much prettier and you can see the door and count are a bit more narrow they don't need to be so wide because the data is not very wide so there we go i'm updating one one row of data in near real time every five seconds it'll get updated you can see my door has now turned to true the count has increased i'm able to change my fuel level and you can see every five seconds it gets updated so this is great but it's really just updating one line of data and that's not the real value of the table node what we want to do is we want to add additional rows so let's see what that looks like i'll come here open up my function node and we're going to add additional rows here you can see instead of just updating this this table with just this one row every time and overriding it every time i'm going to instead save a table persistently and add additional rows to it that's really easy to do all i'll do is i'm going to define some array called table data and i'm going to set that equal to my saved data so i'll do a flow.get and i'll get my saved data but if i don't already have some data saved i'm going to need to initialize it so i'll just do that with these two vertical bars and hand in an empty array so if it tries to get saved data but that's undefined we'll instead define it as this empty array now instead of setting message.payload equal to this new array what i'm going to do is i'm going to add to my table data so to do that i'm going to be using a really simple function here called unshift and unshift basically unshifts all of the items in the array drops them down and adds a new one to the front and what am i adding to the front well i'm adding that new row so i'm just going to grab this entire object cut it to my clipboard and paste it right here you can see now all i'm doing is i'm unshifting this array by that new row now instead of my message.payload being defined as this new array i'm going to set it equal to my table data but something really important i need to do is make sure i save this new table data because i've added an additional row to it so that's what i'll do next i'll do flow dot set and i'm going to set my save data to that current table data so this is just going to save my table data to this persistent variable here this saved data variable that i'm saving persistently and we'll be able to add additional rows here so let's just go ahead and deploy and make sure all of that is working i'll deploy switch over to my dashboard and you'll see every five seconds i am going to get updated data here but instead of it just updating this one row i'm going to be getting new data so let's go ahead and refresh this page and we can see here we go we're getting updated data every five seconds we're getting an additional row here and if i click that on you can see it turns to true my count increases i can change the fuel level or heat up the temperature probe and you'll see this data changing in near real time every five seconds we're going to get this new data here you can see there we go our temperature is increased where our fuel level has changed we've got live data and it's continually adding here so this is great now we have a full table but i'm seeing one two three four five values here but anything past that i need to use the scroll bar for and this is just going to keep increasing keep adding and adding and adding additional rows here but we may want to limit that and just for example see the five that you can see displayed here so how do we limit to just five values well we have to remove some of the old data so we can do that really easily using a different array function and if you're not familiar with these array functions don't worry about it we'll have a link in the description below there's a lot of straightforward examples of how to do this so in this case what i want to do is i want to pop off the last item off of the list and so i just want to do that if the list is getting too long so all i have to do is check the length of the list for example table data dot length and if that is greater than 5 i want to remove the last item so i'll do table data dot pop and that's it i'm just going to pop off the last item if there's more than five of them so i'll go ahead and click done and deploy and so we should start seeing that you know the table is not going to be increasing in length but you can see i already have all of that saved data because it's a persistent list let's say i have 60 items in the list well i'm always going to be at 60 items because i add a new one and then i remove the 60 first add a new one remove the 60 first i actually need to flush my list and start from fresh so let's see how we do that what i'll do is just drop in an inject node and then i'm going to use a change node to change my current save to data so i'll wire these together and instead of setting message.payload i'm going to set my flow dot saved data and i'm going to set it to a json value that's an empty array so all that's going to do is overwrite the current save data with an empty array and we can start building up to just those five values so i'll go ahead and deploy i'll inject and set it to that empty array and we can see here now i've only added one value now two and we'll see every five seconds i'll get an additional entry we can even change this data to prove that it's happening in real time grab the temperature probe to show that it's heating up you can see we have four values now our count is increasing our fuel level has changed we've just added our fifth and we'll see we won't actually get a sixth we're just going to update that first value we'll see that in just a moment here we'll turn on that debug there we go we can see that we've got now our count is nine and true false there we go you can see that the state is matching the button but i only have these five values and i only ever will have five values because i'm always popping off when i add a sixth we add a new one at the top so we have fresh data at the top and removing all data from the bottom and anytime i need to flush this list i can easily inject overwrite that data and you can see there we go now we've just got that one entry again so this is a basic example of how you can use the table node how you need to format your data and how you can build up lists dynamically and save them persistently in your node red flow i hope you found this video helpful and if you have any questions we'll have lots of links in the description below and you can also check out the node-red forums or our opto forums again those will be linked in the description below thanks for watching

Channel: Opto Video

Views: 51,625

Keywords: automation, opto 22, opto, opto22, automatizacion y control industrial, groov, groov EPIC, groov RIO, opto 22 groov, IoT, IIoT, Opto programming

Id: L4RTrXKXd7M

Length: 20min 1sec (1201 seconds)

Published: Tue Apr 26 2022