I have decided to go the UI-Builder way. now i am unable get the examples from the system and getting few errors. [image] [image]

Can you share your Node-RED startup log - something is trying to run the setup for uibuilder more than once which should never happen. If you could share the platform, os, and versions you are running, that would also help. Those errors come from internal sanity checks that I do in my various support libraries to make sure I don't accidentally try to run the setups >1 time, they are purely internal checks that date from a time when my main uibuilder node had less than ideal code which was rather complex and a bit twisted. That is no longer the case. The error message comes from the setup function inside nodes/libs/web.js and a search for all references to that function reveals this: [image] Which shows that it is, indeed, only called from 1 place. That place is in the runtimeSetup function in the main uibuilder node. And that function is indeed only called once in the master setup for the node so it should be impossible to run it >1 time. Can you particularly share what version of node.js you are running? The latest version of uibuilder requires at least node.js v18.x - I recommend using either the current v18 LTS or the latest v20 LTS.

i might have tried to install uibuilder way back and dont remember the details now. i will try to install a fresh instance of node-red and come back to you. I am on Windows Node.js v20.11.1 node-red Welcome to Node-RED =================== 16 Sep 14:13:35 - [info] Node-RED version: v4.0.0-beta.4 16 Sep 14:13:35 - [info] Node.js version: v20.11.1 16 Sep 14:13:35 - [info] Windows_NT 10.0.19045 x64 LE 16 Sep 14:13:38 - [info] Loading palette nodes 16 Sep 14:13:43 - [warn] uibRoot package.json not found. Copying template file. \Users\OEEHo\.node-red\uibuilder 16 Sep 14:13:47 - [info] Dashboard version 3.5.0 started at /ui 16 Sep 14:13:47 - [info] Settings file : c:\users\oeeho\nr-lud\settings.js 16 Sep 14:13:47 - [info] HTTP Static : C:\temp > / 16 Sep 14:13:47 - [info] Context store : 'default' [module=memory] 16 Sep 14:13:47 - [info] User directory : \Users\OEEHo\.node-red 16 Sep 14:13:47 - [warn] Projects disabled : editorTheme.projects.enabled=false 16 Sep 14:13:47 - [info] Flows file : c:/users/oeeho/nr-lud/flows.json 16 Sep 14:13:47 - [info] Server now running at http://127.0.0.1:1884/ 16 Sep 14:13:47 - [warn] --------------------------------------------------------------------- Your flow credentials file is encrypted using a system-generated key. If the system-generated key is lost for any reason, your credentials file will not be recoverable, you will have to delete it and re-enter your credentials. You should set your own key using the 'credentialSecret' option in your settings file. Node-RED will then re-encrypt your credentials file using your chosen key the next time you deploy a change. --------------------------------------------------------------------- 16 Sep 14:13:47 - [info] +----------------------------------------------------- 16 Sep 14:13:47 - [info] | uibuilder v7.0.4 initialised 📗 16 Sep 14:13:47 - [info] | root folder: \Users\OEEHo\.node-red\uibuilder 16 Sep 14:13:47 - [info] | Using Node-RED's webserver at: 16 Sep 14:13:47 - [info] | http://0.0.0.0:1884/ 16 Sep 14:13:47 - [info] | Installed packages: 16 Sep 14:13:47 - [info] +----------------------------------------------------- 16 Sep 14:13:47 - [info] Starting flows 16 Sep 14:13:47 - [info] [ui-base:My Dashboard] Node-RED Dashboard 2.0 (v1.16.0) started at /dashboard 16 Sep 14:13:47 - [info] [ui-base:My Dashboard] Created socket.io server bound to Node-RED port at path /dashboard/socket.io 16 Sep 14:13:48 - [info] Started flows

[image] Dashboard and Dashboard 2.0 Dashboard [{"id":"046911db42a7de1e","type":"ui_template","z":"17065fbaa47a80f0","group":"342bda09a3fa74f1","name":"OEE","order":1,"width":"44","height":"9","format":" \n.overflow-hidden {overflow: hidden;}\n\n.oeehead {background:black ;color:white; font-size: 1.3em; text-align: center;font-weight: 200;}\n.oee {background:#101010; font-size: 0.9em; text-align: center;}\n.oee1 {background:#202020 ;color:yellow; font-size: 0.9em; text-align: center;}\n.oee2 {background:#505050 ;color:yellow; font-size…

I've already got some answers for you. Since you were simply passing HTML, that is trivial to do in uibuilder. [image] [image] Though you probably want a cache node in there so that the latest html output is always ready for a new page load/new client. However, if that data only updates slowly, a more efficient method would be to simply output a complete web page to the index.html file. Another option would be to build the table dynamically. And another option would be a hybrid where you simply add the complete table and styles to the static web page file and dynamically update the data as needed. This would be my person favourite probably. The best answer depends on how often the table structure changes (e.g. new columns/rows), how often the data values change and how many different client connections to the page you are expecting. PS: Time taken to convert your D1 example to UIBUILDER - around 2 minutes. Most of which was adding the nodes and typing a name for the uibuilder node. :slight_smile: Also worth noting that you don't actually need all the nodes I've added. And I used a template node which isn't really needed but is a bit more convenient to edit.

[image] TotallyInformation: that is trivial to do in uibuilder good to know. [image] TotallyInformation: you probably want a cache node will do research [image] TotallyInformation: build the table dynamically the table is updated dynamically from a mysql query. frequency 1 minute. (its an online OEE measurement, so I need every minute update). i just hard coded into inject node for an example flow. [image] TotallyInformation: how often the table structure changes I have future proofed(i hope so ) for 20 machines, although I am having currently less than that, even if the number of columns increase, i would copy the same into two different screens as it is difficult to have more than 20 columns in one screen anyway. [image] TotallyInformation: different client connections do you mean users logged into the dashboard ? i am not sure of it because db1 was always single user and since there is no interaction with the dashboard, many users seeing same screen was not an issue at all. however, there is another screen where there is a user input, (similar dashboard but with date / shift input because this one is online and live.) may be there i would need some help. [image] TotallyInformation: around 2 minutes can i shamelessly ask for the sample flow, because I am so used to db1, any other interface (db2 for example) spins my head and eventually i give up (like i did for db2 for now, may get back to it later) meanwhile i will try to sort out the issue, why i am unable to load the examples from uibuilder. says some nodes missing. i tried doing a clean install, still same issue. Again thanks for your time, appreciate very much what you are doing to the community.

[image] smanjunath211: will do research Give me a shout if you want help. There is an example flow though that should help. [image] smanjunath211: the table is updated dynamically from a mysql query. frequency 1 minute. (its an online OEE measurement, so I need every minute update). i just hard coded into inject node for an example flow. Given the size of the table is quite small, it is fine to rebuild it server-side in Node-RED and send the whole thing each time. In the example I showed, the output simply replaces the table every time it is sent. And that is cachable using the uib-cache node. You can use the node-red template node as I have and replace parts of the table with data using Mustache and that is probably the easiest approach in this case. The uib-element node can dynamically produce a table from input data but in this case that wouldn't be worth it as you would still need to deal with formatting. You already have the HTML so everything should be easy. BTW, in your HTML, you included body tags. Those are not needed. The uibuilder example, inserts your HTML into the div with the id more that is included in all of the uibuilder templates. [image] smanjunath211: I have future proofed(i hope so ) for 20 machines, although I am having currently less than that, even if the number of columns increase, i would copy the same into two different screens as it is difficult to have more than 20 columns in one screen anyway. With so few and if the number only changes occasionally, it isn't worth automating probably. I would just update the HTML as and when needed. [image] smanjunath211: do you mean users logged into the dashboard No, I mean simply whether you have >1 person connecting from different browsers. If you have lots of connected browser tabs, it is worth optimising things. But if you only have 1 or 2, it isn't worth it. Should you need to identify users, that is slightly more complex and I generally recommend using an external identity & access management tool for that regardless of whether you are using uibuilder or one of the Dashboards. uibuilder does provide a client ID however which is stable while a user has the same browser open. This can be used to differentiate inputs from multiple users but is not a complete authentication/authorisation feature. [image] smanjunath211: however, there is another screen where there is a user input, This is also easy to do with uibuilder. [image] smanjunath211: can i shamelessly ask for the sample flow Of course, I only didn't share it because I needed to get a bit more info to make sure we were on the right lines. [{"id":"63e5dd5bb670ba2d","type":"link in","z":"30fdd9a9702231b0","name":"uib in","links":["f006bb54dba818fb"],"x":515,"y":7040,"wires":[["06fcc51d4b45689f"]]},{"id":"06fcc51d4b45689f","type":"uibuilder","z":"30fdd9a9702231b0","name":"","topic":"","url":"smanjunath211","okToGo":true,"fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":true,"sourceFolder":"src","deployedVersion":"7.1.0","showMsgUib":true,"title":"","descr":"","editurl":"vscode://file/src/uibRoot/components-test/?windowId=_blank","x":650,"y":7040,"wires":[["f5373145c2cec7aa"],["616a5c49020a4d60"]]},{"id":"f5373145c2cec7aa","type":"debug","z":"30fdd9a9702231b0","name":"uib Std Output","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":785,"y":7000,"wires":[],"l":false},{"id":"616a5c49020a4d60","type":"debug","z":"30fdd9a9702231b0","name":"uib Control Output","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":785,"y":7060,"wires":[],"l":false},{"id":"cde6c13d3ea60435","type":"inject","z":"30fdd9a9702231b0","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"auto-create-html-from-html","payload":"{\t \"mystring\": \"Boo-hoo\",\t \"mynumber\": $formatInteger($random() * 100, \"#00\")\t}\t ","payloadType":"jsonata","x":450,"y":7140,"wires":[["5a2f79d733e204d2"]]},{"id":"5a2f79d733e204d2","type":"template","z":"30fdd9a9702231b0","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":" \n .overflow-hidden {overflow: hidden;}\n\n .oeehead {background:black ;color:white; font-size: 1.3em; text-align: center;font-weight: 200;}\n .oee {background:#101010; font-size: 0.9em; text-align: center;}\n .oee1 {background:#202020 ;color:yellow; font-size: 0.9em; text-align: center;}\n .oee2 {background:#505050 ;color:yellow; font-size: 1.3em; text-align: center; font-weight: 600;}\n .oeedn {background:#121212 ;color:pink ; font-size: 0.9em; text-align: center;}\n .oeeup {background:#121212 ;color:lightgreen; font-size: 0.9em; text-align: center;}\n .oee_grey {background:#525252 ;color:#020202; font-size: 0.9em; text-align: center;}\n .oee_green {background:green ;color:#020202; font-size: 1.3em; text-align: center;}\n .oee_pink {background:pink ;color:#020202; font-size: 1.3em; text-align: center;}\n \n \n OEE DATA UPTIME / DOWNTIME / AVAILABILITY AND TARGET / ACTUAL / PERFORMANCE OF ALL MACHINES FOR CURRENT DAY UPDATED EVERY MINUTE LAST UPDATED @ 10:14:28 -->\n -->\n \n ONLINE OEE \n CR3 \n MSP1 \n BTP1 \n SP4 \n SP3 \n PFSL \n PFSR \n CR1 \n JUC \n CFT \n 14T \n 12T \n BTP2 \n BTP3 \n SP5 \n AP2 \n MSP2 \n BAGR \n DIP \n \n \n UPTIME \n 0 \n 0 \n 0 \n 13 \n 5 \n 65 \n 64 \n 0 \n 189 \n 0 \n 124 \n 0 \n 131 \n 111 \n 0 \n 0 \n 115 \n 171 \n 0 \n \n \n DNTIME \n 254 \n 254 \n 254 \n 241 \n 249 \n 189 \n 190 \n 254 \n 65 \n 254 \n 130 \n 254 \n 123 \n 143 \n 254 \n 254 \n 139 \n 83 \n 254 \n \n \n Elapsed Time \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n 254 \n \n \n AVAILABILITY(A) \n 0 % \n 0 % \n 0 % \n 5.1 % \n 2 % \n 25.6 % \n 25.2 % \n 0 % \n 74.4 % \n 0 % \n 48.8 % \n 0 % \n 51.6 % \n 43.7 % \n 0 % \n 0 % \n 45.3 % \n 67.3 % \n 0 % \n \n \n TARGET \n NaN \n NaN \n 0 \n 234 \n 15 \n 1,625 \n 1,280 \n 0 \n 60,480 \n 0 \n 6,944 \n NaN \n 14,410 \n 12,210 \n 0 \n 0 \n 3,680 \n 4,012 \n 0 \n \n \n ACTUAL \n 0 \n 0 \n 0 \n 158 \n 18 \n 1,294 \n 1,191 \n 0 \n 54,039 \n 0 \n 4,221 \n 0 \n 14,322 \n 11,411 \n 0 \n 0 \n 2,760 \n 3,690 \n 0 \n \n \n MODAL SPEED \n \n \n 63 \n 18 \n 3 \n 25 \n 20 \n 22 \n 320 \n 20 \n 56 \n \n 110 \n 110 \n 17 \n \n 28 \n 22 \n 20 \n \n \n PERFORMANCE(P) \n 0 % \n 0 % \n 0 % \n 67.5 % \n 120 % \n 79.6 % \n 93 % \n 0 % \n 89.4 % \n 0 % \n 60.8 % \n 0 % \n 99.4 % \n 93.5 % \n 0 % \n 0 % \n 75 % \n 92 % \n 0 % \n \n \n O E E (A*P) \n - \n - \n - \n 3.4 % \n 2.4 % \n 20.4 % \n 23.4 % \n - \n 66.5 % \n - \n 29.7 % \n - \n 51.3 % \n 40.9 % \n - \n - \n 34.0 % \n 61.9 % \n - \n \n \n \n \n \n","output":"str","x":580,"y":7140,"wires":[["93357aeeb8ccc21a"]]},{"id":"93357aeeb8ccc21a","type":"uib-element","z":"30fdd9a9702231b0","name":"","topic":"eltest-html","elementtype":"html","parent":"#more","parentSource":"#more","parentSourceType":"str","elementid":"table-html","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","data":"payload","dataSourceType":"msg","position":"last","positionSourceType":"str","passthrough":false,"confData":{},"x":760,"y":7140,"wires":[["f006bb54dba818fb"]]},{"id":"f006bb54dba818fb","type":"link out","z":"30fdd9a9702231b0","name":"link out 141","mode":"link","links":["63e5dd5bb670ba2d"],"x":925,"y":7140,"wires":[]}] After importing, don't forget to give a name (url) to the uibuilder node BEFORE doing a deploy. [image] smanjunath211: i tried doing a clean install, still same issue. Was that really a clean install - e.g. was it a clean Node-RED install into which you installed uibuilder via the palette manager? Also check whether you have any global installs of things, that can mess things up.

Looking again at your startup log, I do recommend doing a local install of node red so that you have a genuinely clean install. This is what I do for release testing. You should also update your instance of Node-RED to the current live version. To do a local install, you can use my alternate installer or do it manually: mkdir nrtest cd nrtest npm install node-red mdkir data node node_modules/node-red/red.js --userDir ./data That will probably fail with a clashing port number. But it will have created the settings.js in the data sub-folder so you can now edit that and choose a different port. Then run the same start again. That is an absolutely clean install of the latest version of Node-RED.

But, i am able to import your flow now and am I happy.... :slight_smile: that was so easy. all i have to do now is keep refining. i believe my existing flow for generating html can be just connected to this. cant wait for start working on it. I wish i had written this on last Friday, i could have spent my all weekend enjoying this. Hope I won't bother you with many follow up questions. i just wanted a start and you gave me more than that. [image] EDIT: Amazing examples. This is so beautiful. Exactly what i was trying to get to. [image]

[image] smanjunath211: that was so easy. I wish more people would realise that. :grinning: [image] smanjunath211: Hope I won't bother you with many follow up questions. i just wanted a start and you gave me more than that. Well, do share how you get on and if something isn't clear, don't be afraid to reach out.

[image] smanjunath211: Amazing examples. This is so beautiful. Exactly what i was trying to get to. Yes, and so very easy to do. Though admittedly, it took me a while to get my head around nested CSS grid layouts to get something that is solid but flexible. Once you've seen it though, it is fully reusable and adjustable without much effort. BTW, you may want to decide whether you are going to use an SPA or multi-page approach. If you want an SPA, you can use uibuilder's front-end router library. Then you can choose whether you want a "traditional" menu or more of a tabbed style.

Node-RED

Node-RED Forum

Help with UIBuilder

General

smanjunath211 16 September 2024 08:47 4

Topic		Replies	Views
Reproducing a D1 Dashboard using UIBUILDER? Dashboard uibuilder	21	655	25 October 2025
UIBUILDER-Help in developing a dashboard Dashboard uibuilder	24	672	7 September 2025
Uibuilder vs Node-RED dashboard Dashboard	16	5952	1 September 2020
Uibuilder node shows a table General uibuilder	32	667	12 October 2024
Uibuilder: to subscribe or not to subscribe? Dashboard	102	5659	18 July 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Help with UIBuilder

Related topics