Urm, no it wouldn't. D1 is a highly engineered AngularJS integration to Node-RED. D2 is a highly engineered VueJS/Vuetify integration to Node-RED.
UIBUILDER is a library that creates links between Node-RED (server) and your connected browsers, it is an enhancement to comms and web services. It also has a front-end helper library that not only helps glue things together but also provides quite a few helper functions to even out some of the oddities of working with HTML and front-end JavaScript.
But it is a fundamentally different approach than that of D1 or D2. Giving you complete flexibility to do what you want and providing a thin layer of progressive enhancement over HTML/CSS/JS. So that whatever you learn as you are using UIBUILDER, you will find applicable to any front-end development.
Because D1, D2, and UIBUILDER are all web services at heart though, it IS possible to access visuals between them (though not always easy) but less possible to have them as integrated apps.
I am sure, it will all make sense to me one day.
I even watched a complete basic html/css course video.
When something works, I think I got it. unfortunately no where near it. all i can do is fiddle with a working sketch and change color say from red to green.
i was in a lot of dilemma to chose between D2 and UIB, and chose UIB becuase first few things I tried it worked, (of course with 99% your help).
I am still very comfortable with D1, I can make things relatively easily. but it took me 3 years to get here, may be i will give some more time to self.
I did try, and in D1, i could easily recreate guages
few things to tweak, axis labels are not appearing at the CHANGE point, but after fixed interval, i can live with it for time being, the tool tip is giving what i need anyway, including the duration!
i want to interact with it now, the doc says something regarding this, have to study to make sense and where to put the code..
Not got a lot of time at the mo. However, you've hard-coded the data into your JavaScript. The reason for having JavaScript in the first place is so that you don't have to hard-code things.
All you need is a uibuilder.onChange('msg', (msg) => { ... } handler in the JavaScript - the default template comes with example code for that. Or you can look in the docs.
Then you can simply send just the data for a new entry and inside the onChange callback, you can call the dataTable.addRows function with the data from the msg.
Incidentally, I really do recommend that you take time to run through the Getting Started guide. It doesn't take long but it should cement in place the concepts you need.
I actually have gone though this video series. But since i am still learning my alphabets i am afraid doesn't make sense to me much , now. But i will go through again as this time may be it may make sense to me since i have made my hands dirty now quite a bit.
I have successfully created a dynamic table using the example provided in the uibuilder.
Now, I need to make it a clickable table, where upon clicking any row, I get back the information in the table in that row. I do it succesfully with ui_table node in dashboard 1.0.
there is an example in uibuilder about getting back information from front end back to node-red. but i cant adapt it to the table.
a little help please..
OK, nice. So you will need a bit of javascript for this. Basically, you will need to attach an event listener to every row where the callback grabs the data and sends it back.
So lets take the simplest case first because there is a complexity that will need to be either dealt with or worked around.
In this case, I assume that you generate an initial table using a uib-element node but then save the resulting HTML back to the index.html file. The reason for this is that it means that the core table element will be permanent and this makes life a LOT easier. You can still use no-code nodes to add/remove table rows in this case but the table itself needs to stay in place in the static page file.
With that assumption, this example outputs a message to Node-RED with the cell text contents of every cell in the clicked row. Even if you change the
function addClickListenerToTableRows(tblId) {
const table = document.getElementById(tblId)
if (!table) {
console.warn(`Table with ID "${tblId}" not found`)
return
}
// Add event listener to the table's <tbody> to capture clicks on any <tr> within it
table.querySelector('tbody').addEventListener('click', event => {
const clickedRow = event.target.closest('tr')
// console.log('row', clickedRow)
if (clickedRow) {
// Initialize an empty object to store cell data
const rowData = {}
// Loop through each <td> in the clicked row
clickedRow.querySelectorAll('td').forEach(cell => {
const colName = cell.getAttribute('data-col-name')
// Only add cells that have a `data-col-name` attribute
if (colName) {
rowData[colName] = cell.textContent.trim()
}
})
console.log('Row data:', rowData)
const rowIndex = clickedRow.rowIndex
uibuilder.send({
topic: `${tblId} row $(rowIndex) clicked`,
rowIndex: rowIndex,
payload: rowData,
})
}
})
}
// Call the function to activate the event listener
addClickListenerToTableRows('eltest-tbl-table')
And here is the index.html file I used for testing:
That HTML is what the table example for the uib-element node produces (except that I've updated the page title/heading).
You may also like to look at what I used to be able to produce a working example in minutes. Basically, I used ChatGPT. You can see the query I used and the results it gave me here:
No, this works no matter what you add/remove from the table rows. Only the table itself needs to be fixed - strictly speaking, the table with its tbody tag.
Adding/removing tbody rows is catered for in the script.
I also now have a more comprehensive tblAddClickListener function that has lots more options. This will probably make its way into the uibuilder client library. Eventually will become an option on the no-code table output.
Let me know if you need any help dynamically adding/removing or replacing table rows.
You really prompted me to work on expanding table handling for the uibuilder client library.
I'm glad to report that I have some new library functions in the works that will make it much easier to add/remove rows (and eventually columns as well) and change cell content.
I'll be adding these to the library and I will also make them available as remote commands so you don't have to dip into front-end JavaScript to manipulate tables.
The extended version of tblAddClickListener has already been added to the library in the v7.1 development branch for the next release.
BTW, as this thread has grown rather. I've changed the title slightly in case people are looking for uibuilder help in the future.
You can see the query I used and the results it gave me here:
