HI!
it's my first experience with nodered. I have to create an iterface in which the data are shown in a table, taken from a database (so obviously I need the JQuery library provided to dynamically display the information). Could I have some examples or something similar? Even without databases, the problem for me is the interface with in Uibuilder node. Thank you all, I really need help, I really like nodered and all its use, but it's hard to make projects the first time
There is lots of documentation for uibuilder, see the right sidebar, jquery is included.
Then again, you may be better off using vuejs instead, makes creating a page much easier (but initial learning curves may be higher)
1 Like
thanks, I will try with this documentation (sorry, my firt experience on nodered with uibuilder is not easy with html)
Hi - Just checking... As it's your first experience - are you sure you want to jump into uibuilder to build your own front end ? Or would the node-red-dashboard along with the node-red-contrib-ui-table node let you do what you want ?
No problem,
ui-builder will be fine. Just checking the parameters of the problem.
I have done what you are talking about using uibuilder and bootstrap-table. I found bootstrap-table to be very good. I initially just used bootstrap and jquery but have since upgraded to vue. So if your looking for a good table to use with uibuilder that is what I would recommend.
Here is an example of what it could look like.
1 Like
uibuilder is agnostic, meaning you can use any framework that you want. uibuilder provides an interface to/from node-red
I made some simple templates for vanilla javascript and for vue, this perhaps could help you further.
1 Like
You do not need jQuery to show a table with uibuilder. The default VueJS and bootstrap-vue libraries have excellent table features:
However, you can replace Vue with jQuery and there is an example in the WIKI.
Either way, as you already have some programming knowledge, you shouldn't have many difficulties.
The trick, of course, is passing the data in the right format. Probably the first decision is about whether you will be sending the whole table on each update or will send individual records - or some combination. You might also want to look at the caching examples so that a reload of the page doesn't require a new db query.
Typically, frameworks like Vue want to get their table data as an Array of Objects. The outer array gives the records - the rows - of the table. Each row then contains objects where each property is a field (column).
1 Like
hello, are you referring to your example? New home dashboard using uibuilder and bootstrap-vue
(However I also consulted your jquery documentation )
Thanks
The screenshot is from that example, yes. In fact, that is a very complex table indeed with an embedded details table as well. But simple tables are very easy to do in Vue, especially with the help of bootstrap-vue.
All you need to do is to pre-define a holding array in your Vue app that you then feed with data via uibuilder's incoming msg listener (onchange) function. You then just need to create a template in your HTML that Vue then populates from the data and updates dynamically.
1 Like
thanks, ur solution is what I need. Now I'm looking for more documentation on the boostrap table, I hope to succeed in the task, It's a bit difficult as a first project for me
If you were to share an example of your source data for the table, it is possible that someone might give you a head start 
1 Like
Hello Julian, I have data print dynamically with the use of JQuery (which I prefer), now the difficulty is in inserting the data in a table. Are there examples to be able to do this with jquery, pls? uibuilder|690x339
Looks like the data you sent is one very long string rather than the object that I would expect. It is easier to do this in Node-RED rather than in the front end.
As for jQuery, there are lots of ways to display an array of objects as a table, the most comprehensive use jQuery extensions. Some ideas to get you going:
Thanks! I will try to read the sites, you are very kind!
If I can get what I want, I will publish the table.
1 Like
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
