Interface UiBuilder node

Hi!
it's my first experience with Node-RED.
I'm trying to create a complex interface with uibuilder, with a very large number of data from a database to insert in a table but it is really difficult to use UiBuilder for these complex operations. Could I use this node with Jquery and html to develop this table? Sorry, but this is the first time that I use Node-RED.

Hi Michi, welcome to the forum and to Node-RED and uibuilder!

You can certainly use uibuilder with jQuery if you like. You can use uibuilder itself to install jQuery if you like but if you install it manually into your userDir folder (normally ~/.node-red) uibuilder will pick it up anyway. There are jQuery examples in the uibuilder WIKI. I recommend having a play with one of the examples first so that you understand the flow of data back and forth between the Node-RED server back-end and your web app front-end in the browser.

If you wanted to continue with VueJS you will find that simple table layouts are very easy with the help of bootstrap-vue. Even complex tables aren't that hard and the table component in bootstrap-vue is very powerful. However, like most table components, you will want to ensure that your source data is in the form of an array of objects where each entry in the array is a table row and each property of the row objects are table columns.

If your data is very large, take care if trying to pass it in one go in case you hit any issues with websockets. I've not yet found any with some pretty big tables but it could happen. If it does, you will want to split the sending into smaller chunks and reassemble in the front-end. If using Vue, just note that you need to pre-specify the data object in vueApp.data as an empty object otherwise Vue won't necessarily recognise updates without an additional step.

jQuery is also easy to use of course and you can make use of one of the many table extensions for jQuery if you want to.

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