Help with UIBuilder

TotallyInformation · 22 September 2024 17:19

Great! Glad you've got everything working.

Not when using the uib-element no-code form I'm afraid. Like other Dashboards, when using no-code, you unfortunately have to make some compromises.

However, once you've created the form using uib-element, why not simply go copy the HTML that has been generated, paste it into the index.html file as static HTML.

Then you CAN easily change it with a little bit of CSS, I can walk you though that if you need help.

This is the major advantage of using uibuilder. You can use the no-code nodes to produce something close. Then, because everything produces standard HTML/CSS/JavaScript, it is very easily amended to get exactly what you want.

Best of both worlds.

smanjunath211 · 23 September 2024 00:44

where is it ? the complete debug output of the uib-element doesn't show any html code. is it saved any place on my pc ?

TotallyInformation · 23 September 2024 08:16

It is in your browser where it belongs! Simply open your dev tools, find the form and copy the "outer html".

The output from the no-code nodes is a JSON description of HTML in a standard format. The uibuilder front-end library converts that into actual HTML.

You could also do this in Node-RED if you like. Pass the no-code output into the uib-html node, the output from that is an HTML text string.

smanjunath211 · 23 September 2024 08:39

I am always overwhelmed with F12 screen. will check and try. but when ui-builder is doing ALL the work for me, I can live with this small issue.

smanjunath211 · 23 September 2024 09:24

Done!.

smanjunath211 · 23 September 2024 15:58

Is it possible to show another element in the same html page (hotNipi's gauges for example). i tried appending the index.js file with the script, but it gave error. also, you made some changes in the index.js file to adapt my apex chart code, i dont know how to do the same for the temeprature gauge script.
i am still working on it, but have high doubts i will succeed.

TotallyInformation · 23 September 2024 16:15

Yes, absolutely. The exact "how" depends on what you want it to look like. In general, the simplest starting point is to wrap things individually in another <div>....</div> which helps isolate them. However, you might take note of my recent posts on layouts where I give a couple of examples of layouts that you could use.

As a really simple starting point, here are a couple of index.html files you could use that will give slightly different looks:

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Examples for smanjunath211 - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Examples for smanjunath211">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js"></script>
    <!-- #endregion -->

</head><body class="uib">
    
    <h1 class="with-subtitle">Examples for smanjunath211</h1>
    <div role="doc-subtitle">Using the uibuilder IIFE library.</div>

    <div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>

    <div>
        <div id="chart"></div>
    </div>
    
    <div>
        <div id="something else"></div>
    </div>
    
</body></html>

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Examples for smanjunath211 - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Examples for smanjunath211">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js"></script>
    <!-- #endregion -->

</head><body class="uib">
    
    <h1 class="with-subtitle">Examples for smanjunath211</h1>
    <div role="doc-subtitle">Using the uibuilder IIFE library.</div>

    <div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>

    <article>
        <div id="chart"></div>
    </article>
    
    <article>
        <h2>This is a heading for something else</h2>
        <div id="something else"></div>
    </article>
    
</body></html>

Div and article are 2 block elements. The uibuilder brand CSS includes formatting in particular for the article tag and you will see it being used in the 2nd of those posts but you can also use it "naked" as I have above.

Just remember that HTML is a tree structure at its heart (or a hierarchy if you prefer). So keeping a logical structure will really help.

When you use the no-code nodes, if you check the HTML that gets created, you will notice a very clear and logical structure.

You will get there. You've launched into something reasonably complex but you already have a lot of HTML so you've some knowledge already.

smanjunath211 · 8 October 2024 10:36

Back again.
I am aware, you are busy developing many things and fully understand if you ignore this.

I tried my best to get variables into the ui-builder and so far succeeded only getting flow.context values successfully (although i dount i am doing it correctly, but i am getting the results), but unable to pass on msg.payloads. what am i doing wrong ?

[{"id":"ecdb9426fbe896e3","type":"group","z":"34ede9f39c4fac17","style":{"stroke":"#999999","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#a4a4a4"},"nodes":["faeefba277fb50f2","2bcfe83ad43b8f05","99bc572b3150f156","2a51cd3f6f244e3d","6826385c5adff55e","bc1b80eacf9ff950","c5de199a9902e0f7","dee66e1689bdbfef","56261f7a3a47970a","24a39e2126937ad5","29dd4d4fca503dfe","c92742f3356f2374"],"x":164,"y":974,"w":992,"h":282},{"id":"faeefba277fb50f2","type":"uibuilder","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","name":"","topic":"","url":"Test_Input","okToGo":true,"fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":false,"sourceFolder":"src","deployedVersion":"7.0.4","showMsgUib":false,"title":"","descr":"","editurl":"vscode://vscode-remote/ssh-remote+10.180.18.18c:\\Users\\OEEHo\\NR-CLock\\uibuilder/Test_Input/?windowId=_blank","x":1050,"y":1140,"wires":[[],[]]},{"id":"2bcfe83ad43b8f05","type":"change","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","name":"index.css","rules":[{"t":"set","p":"fname","pt":"msg","to":"index.css","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":720,"y":1015,"wires":[["99bc572b3150f156"]]},{"id":"99bc572b3150f156","type":"template","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","name":"","field":"payload","fieldType":"msg","format":"css","syntax":"mustache","template":"/* Load defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-brand.css`\n * This version auto-adjusts for light/dark browser settings but might not be as complete.\n */\n @import url(\"../uibuilder/uib-brand.css\");\n\n/* These variables build on existing variables in uib-brand.css\n * They will be incorporated into that file in uibuilder v6.2\n */\n","output":"str","x":875,"y":1015,"wires":[["6826385c5adff55e"]]},{"id":"2a51cd3f6f244e3d","type":"inject","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":575,"y":1015,"wires":[["2bcfe83ad43b8f05","bc1b80eacf9ff950"]]},{"id":"6826385c5adff55e","type":"uib-save","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","url":"Test_Input","uibId":"faeefba277fb50f2","folder":"src","fname":"","createFolder":false,"reload":false,"usePageName":false,"encoding":"utf8","mode":438,"name":"","topic":"","x":1025,"y":1015,"wires":[]},{"id":"bc1b80eacf9ff950","type":"change","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","name":"index.html","rules":[{"t":"set","p":"fname","pt":"msg","to":"index.html","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":730,"y":1065,"wires":[["c5de199a9902e0f7"]]},{"id":"c5de199a9902e0f7","type":"template","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","name":"","field":"payload","fieldType":"msg","format":"css","syntax":"mustache","template":"<html>\n<body>\n<h1>HEADER</h1>\n<h2>Date:{{{date}}}</h2>\n\n<div class=\"btn-group\">\n<button id=\"b01\"  onclick=\"\">My Company Name</button>\n<button id=\"b00\"  onclick=\"uibuilder.eventSend(event)\">Refresh Temperature Trend</button>\n<button id=\"b02\"  onclick=\"window.location.href = 'http://10.180.18.18:1881/ui'\" >Old Dashboard</button>\n<button id=\"b03\"  >{{pc_clock_full}}</button>\n<div uib-topic=\"btnreport\"></div>\n\n  <table width = \"100%\" border=\"1px solid white\" border-collapse=\"separate\">\n    \n                    <tr   height = \"15px\">\n                      \n                      <td width = '120px' rowspan ='2'>CLOCK</br></br>PC: {{pc_clock_full}}</td> \n                        <th width='80px'>{{flow.mc1}}</th><th width='80px'>{{flow.mc2}}</th><th width='80px'>{{flow.mc3}}</th>\n                    </tr>\n  \n                    <tr>\n                        <td> {{m1}}</td><td> {{m2}}</td><td> {{m3}}</td>\n                        </tr>\n                        </table>\n      \n        </body>\n        \n</html>","output":"str","x":875,"y":1065,"wires":[["dee66e1689bdbfef"]]},{"id":"dee66e1689bdbfef","type":"uib-save","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","url":"Test_Input","uibId":"faeefba277fb50f2","folder":"src","fname":"","createFolder":false,"reload":false,"usePageName":false,"encoding":"utf8","mode":438,"name":"","topic":"","x":1025,"y":1065,"wires":[]},{"id":"56261f7a3a47970a","type":"inject","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":280,"y":1190,"wires":[["c92742f3356f2374"]]},{"id":"24a39e2126937ad5","type":"change","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","name":"","rules":[{"t":"set","p":"pc_clock_full","pt":"msg","to":"$fromMillis($millis(),'[FNn],[D] [MNn] [Y] [H01]:[m01]:[s01] ','+0530')","tot":"jsonata"},{"t":"set","p":"date","pt":"msg","to":"2024-10-08","tot":"str"},{"t":"set","p":"m1","pt":"msg","to":"100","tot":"num"},{"t":"set","p":"m2","pt":"msg","to":"50","tot":"num"},{"t":"set","p":"m3","pt":"msg","to":"75","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":815,"y":1190,"wires":[["faeefba277fb50f2","29dd4d4fca503dfe"]]},{"id":"29dd4d4fca503dfe","type":"debug","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","name":"debug 2720","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"pc_clock_full","statusType":"msg","x":1040,"y":1215,"wires":[]},{"id":"c92742f3356f2374","type":"function","z":"34ede9f39c4fac17","g":"ecdb9426fbe896e3","name":"Set Machine Name - Flow context","func":"flow.set(\"mc1\", \"Machine-M01\");\nflow.set(\"mc2\", \"Machine-M02\");\nflow.set(\"mc3\", \"Machine-M03\");\nflow.set(\"mc4\", \"Machine-M04\");\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":550,"y":1190,"wires":[["24a39e2126937ad5"]]}]

I am setting up flow context for machine names, which i get it in the page correctly, although that happens only when i load the html file.
the same thing doesn't work for simple payloads.

I dont think i have worded the question correctly.

TotallyInformation · 8 October 2024 19:36

For starters, you need to fix your HTML as it is invalid. You have invalid attributes and have not included any of the necessary <head> elements. That includes not loading either your index.css nor loading the uibuilder client library.

Remember that the default template contains everything you need to get started. So re-apply the default uibuilder template, open the uibuilder node, goto the files tab and copy all of the HTML, you need to make sure all of that is in your template node so paste it above what you currently have and then merge the important bits of your code with the default template.

When that is working, come back to me with any remaining issues.

smanjunath211 · 9 October 2024 00:41

I apologise, I had done that already and couldn't see the result i expected. putting it back in the below example.
Please note i have a working solution from my last interaction, but was trying to execute a suggestion that the table structure should be loaded and only feed the variable stuff into it, and NOT LOAD the entire table with structure every second.
for example, i need to feed the System time to one cell in a table every second, how do i do that. ?
I obviously do not understand completely what is going on here, i assumed i did, since the last solution worked for me!

[{"id":"fd20ac3af9b644aa","type":"group","z":"34ede9f39c4fac17","style":{"stroke":"#999999","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#a4a4a4"},"nodes":["6b372280b96e1b66","0dd307aa17179912","d3ab84384bbef142","a75c26f8c3c3d4ac","5a490decc914fc10","c9cb5344862ae943","6502b9b38ea47f22","fcc8431d217d65f4","96f956fb7918478d","b64a52557f4bde33","b6d4e9fb02144062","efbdbeceff9f77f8"],"x":194,"y":1054,"w":972,"h":307},{"id":"6b372280b96e1b66","type":"uibuilder","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","name":"","topic":"","url":"test","okToGo":true,"fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":false,"sourceFolder":"src","deployedVersion":"7.0.4","showMsgUib":false,"title":"","descr":"","editurl":"vscode://vscode-remote/ssh-remote+10.180.18.18c:\\Users\\OEEHo\\NR-CLock\\uibuilder/Test_Input/?windowId=_blank","x":1090,"y":1220,"wires":[[],[]]},{"id":"0dd307aa17179912","type":"change","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","name":"index.css","rules":[{"t":"set","p":"fname","pt":"msg","to":"index.css","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":1100,"wires":[["d3ab84384bbef142"]]},{"id":"d3ab84384bbef142","type":"template","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","name":"","field":"payload","fieldType":"msg","format":"css","syntax":"mustache","template":"/* Load defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-brand.css`\n * This version auto-adjusts for light/dark browser settings but might not be as complete.\n */\n @import url(\"../uibuilder/uib-brand.css\");\n\n/* These variables build on existing variables in uib-brand.css\n * They will be incorporated into that file in uibuilder v6.2\n */\n","output":"str","x":820,"y":1100,"wires":[["5a490decc914fc10"]]},{"id":"a75c26f8c3c3d4ac","type":"inject","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":475,"y":1110,"wires":[["0dd307aa17179912","c9cb5344862ae943"]]},{"id":"5a490decc914fc10","type":"uib-save","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","url":"test","uibId":"6b372280b96e1b66","folder":"src","fname":"","createFolder":false,"reload":false,"usePageName":false,"encoding":"utf8","mode":438,"name":"","topic":"","x":1025,"y":1095,"wires":[]},{"id":"c9cb5344862ae943","type":"change","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","name":"index.html","rules":[{"t":"set","p":"fname","pt":"msg","to":"index.html","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":1140,"wires":[["6502b9b38ea47f22"]]},{"id":"6502b9b38ea47f22","type":"template","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!doctype html>\n<html lang=\"en\"><head>\n\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <link rel=\"icon\" href=\"../uibuilder/images/node-blue.ico\">\n\n    <title>Blank template - Node-RED uibuilder</title>\n    <meta name=\"description\" content=\"Node-RED uibuilder - Blank template\">\n\n    <!-- Your own CSS (defaults to loading uibuilders css)-->\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n\n    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->\n    <script defer src=\"../uibuilder/uibuilder.iife.min.js\"></script>\n    <!-- <script defer src=\"./index.js\">/* OPTIONAL: Put your custom code in that */</script> -->\n    <!-- #endregion -->\n\n</head><body class=\"uib\">\n    \n    <h1 class=\"with-subtitle\">uibuilder Blank Template</h1>\n    <div role=\"doc-subtitle\">Using the IIFE library.</div>\n\n    <div id=\"more\"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>\n\n\n<head>\n<h1>HEADER</h1>\n<h2>Date:{{{flow.time}}}</h2>\n\n<div class=\"btn-group\">\n<button id=\"b01\"  onclick=\"\">My Company Name</button>\n<button id=\"b00\"  onclick=\"uibuilder.eventSend(event)\">Refresh Temperature Trend</button>\n<button id=\"b02\"  onclick=\"window.location.href = 'http://10.180.18.18:1881/ui'\" >Old Dashboard</button>\n<button id=\"b03\"  >{{pc_clock_full}}</button></div>\n\n<div uib-topic=\"btnreport\"></div>\n\n  <table width = \"100%\" border=\"1px solid white\" border-collapse=\"separate\">\n    \n                    <tr   height = \"15px\">\n                      \n                      <td width = '120px' rowspan ='2'>CLOCK</br></br>PC: {{pc_clock_full}}</td> \n                        <th width='80px'>{{flow.mc1}}</th><th width='80px'>{{flow.mc2}}</th><th width='80px'>{{flow.mc3}}</th>\n                    </tr>\n  \n                    <tr>\n                        <td> {{m1}}</td><td> {{m2}}</td><td> {{m3}}</td>\n                        </tr>\n                        </table>\n      </head>\n       </body></html>","output":"str","x":820,"y":1140,"wires":[["fcc8431d217d65f4"]]},{"id":"fcc8431d217d65f4","type":"uib-save","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","url":"test","uibId":"6b372280b96e1b66","folder":"src","fname":"","createFolder":false,"reload":false,"usePageName":false,"encoding":"utf8","mode":438,"name":"","topic":"","x":1025,"y":1145,"wires":[]},{"id":"96f956fb7918478d","type":"inject","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":310,"y":1280,"wires":[["efbdbeceff9f77f8"]]},{"id":"b64a52557f4bde33","type":"debug","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","name":"debug 2720","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"pc_clock_full","statusType":"msg","x":970,"y":1320,"wires":[]},{"id":"b6d4e9fb02144062","type":"function","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","name":"Set Machine Name - Flow context","func":"flow.set(\"mc1\", \"Machine-M01\");\nflow.set(\"mc2\", \"Machine-M02\");\nflow.set(\"time\", msg.pc_clock_full);\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":1280,"wires":[["6b372280b96e1b66","b64a52557f4bde33"]]},{"id":"efbdbeceff9f77f8","type":"change","z":"34ede9f39c4fac17","g":"fd20ac3af9b644aa","name":"","rules":[{"t":"set","p":"pc_clock_full","pt":"msg","to":"$fromMillis($millis(),'[FNn],[D] [MNn] [Y] [H01]:[m01]:[s01] ','+0530')","tot":"jsonata"},{"t":"set","p":"date","pt":"msg","to":"2024-10-08","tot":"str"},{"t":"set","p":"m1","pt":"msg","to":"100","tot":"num"},{"t":"set","p":"m2","pt":"msg","to":"50","tot":"num"},{"t":"set","p":"m3","pt":"msg","to":"75","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":1280,"wires":[["b6d4e9fb02144062"]]}]

what i am expecting

time

TotallyInformation · 9 October 2024 16:42

Yes, that is sensible.

The tricks to working successfully with HTML:

Understand that HTML is a hierarchy or tree structure. This helps you understand the relationships between different elements.
Know how to identify a specific element.

The formatting and data manipulation of HTML UI's relies very heavily on understanding how to identify specific elements. UIBUILDER generally steers you towards using CSS Selectors as these are the most generically useful things to use.

UIBUILDER even gives you some useful shortcut functions to help with selecting specific elements, notably the jQuery-like $ which selects a single element based on its CSS Selector and $$ which selects all matching elements.

My dev node-red instance is broken for some reason right now so I can't work up a specific example.

You can find CSS Selectors by using your browser's dev tools. Use the Elements panel, clicking on any element will let you right-click and copy a selector for that element.

<table id="mytable">
  <thead>
    <tr>
      <th>COL1</th>
      <th>COL2</th>
      <th>COL3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
      <td>R1C3</td>
    </tr>
    <tr>
      <td>R2C1</td>
      <td>99</td>
      <td>R2C3</td>
    </tr>
    <tr>
      <td>R3C1</td>
      <td>R3C2</td>
      <td>R3C3</td>
    </tr>
  </tbody>
</table>

In the above example, the cell that contains 99 can be selected and changed using:

const cell = $( '#mytable > tbody > tr:nth-child(2) > td:nth-child(2)' )
cell.innerText = '99'

For reference, all that $ does (well it does have a couple of extra helper functions that you will find in the documentation) is use a standard function document.querySelector('#mytable > tbody > tr:nth-child(2) > td:nth-child(2)'). Which you are absolutely free to use instead.

That cell reference would also let you change some styling:

cell.style.color = 'red'
cell.style.backgroundColour = 'green'

OK so those are some basics and you would be well served by finding an HTML overview course and quickly running through it to give you the basic concepts.

Now, here is the great thing about UIBUILDER. Once you have grasped some of those HTML and CSS basics, the uibuilder nodes are simply an overlay - an enhancement if you like - to make it easier to work with.

For example, in the example shown above where I change the value and formatting of a table cell, you can use the same selector with a uib-update node. You feed that node with the data and the format and the output of the node, you send direct to the uibuilder node.

You may also probably have worked out that the selectors get much easier if you give the element its own id attribute because you can then select it directly without messing with all the child elements and offsets.

smanjunath211 · 10 October 2024 01:41

Got it Working!. My confidence is back now. Have more questions now, which i think is a good thing. will try to find answers myself, and thank you so much for taking out time from your busy schedule to help me out, and keeping patience with me.

update

The page loads with the place holder and then gets updated from a node also tried to change the CSS styling and it works (red thick border)

TotallyInformation · 10 October 2024 08:51

Cool, glad you got this working. Do take some time to run through a basic HTML course when you can though, it will really help you cement the concepts in place. You don't need to know a lot of HTML to use UIBUILDER but some basics will really help you get things done faster.

smanjunath211 · 10 October 2024 08:57

Indeed. Thanks again.
The flow in your example regarding generating and updating a table was right in front of me, but actually clicked to me when you explained about the CSS selectors.

smanjunath211 · 21 October 2024 07:05

Back Again!.

Thanks to you @TotallyInformation , I am able to update the HTML elements through UIB Update node successfully, however, i may be doing the LONG way, is it possible to update ALL the cells in a table row with an array or something, currently i am doing idividually and although it is simple, it is very repetetive and taking up too many nodes in the editor.
in the example given below, i am updating the nick names and full names of 10 machines in two table rows, procesing each cell individually with HTML IDs for each cell.

UIB-UPDATE-EXAMPLE

[{"id":"60879e0147c7a351","type":"tab","label":"uib-temp","disabled":false,"info":"","env":[]},{"id":"4bcd6a3c52853425","type":"group","z":"60879e0147c7a351","name":"Load HTML","style":{"stroke":"#3f93cf","fill":"#bfdbef","label":true},"nodes":["419f1d7151be3111","0a1e9a54c6a6ad5c","0824084d8156ea5b","78671e076e5fc062"],"x":179,"y":34,"w":647,"h":82},{"id":"7d08e1bfffb92c25","type":"group","z":"60879e0147c7a351","name":"Simulated Data (Dynamically will come from MySQL Query)","style":{"stroke":"#addb7b","fill":"#e3f3d3","label":true},"nodes":["3920435ebeea0d97","42bd37e38ebca0ff","13ab910162f7b94a"],"x":179,"y":134,"w":642,"h":132},{"id":"d2cb5f5e0b4256eb","type":"group","z":"60879e0147c7a351","name":"Process Row-1","style":{"label":true},"nodes":["e717dc66d31956e7","2081e78f847d43d5","b08aa17af6d8e6db","9c3a2bbaee8bc6a3","14bb15d83ee72b69","ae2fcee173261a07","1ade27b2e5db39da","7610c1468d2010a2","77b43bcea7c6557a","07dd610283b1ed75","3c26092c430899b5","335dead20f2d8286","0a48ccb99767b78a"],"x":199,"y":534,"w":352,"h":507},{"id":"322d090ecc310058","type":"group","z":"60879e0147c7a351","name":"Process Row-2","style":{"label":true},"nodes":["870fa739d23d9d75","1d9c59e559516a08","ca31d0f2e42d7785","f4c86742c11868cd","79d773f05e20b88b","addd1bd62e7da6c1","0f47a765af61c558","b01e1d37b84540cb","36287ffbce4c8029","53b4a31bcc949d07","c29d2d1b074e16e8","7bf711c58ade0191","bfa093c1bdb2a045"],"x":599,"y":534,"w":352,"h":507},{"id":"419f1d7151be3111","type":"inject","z":"60879e0147c7a351","g":"4bcd6a3c52853425","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":285,"y":75,"wires":[["0a1e9a54c6a6ad5c"]]},{"id":"0a1e9a54c6a6ad5c","type":"change","z":"60879e0147c7a351","g":"4bcd6a3c52853425","name":"index.html","rules":[{"t":"set","p":"fname","pt":"msg","to":"index.html","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":445,"y":75,"wires":[["0824084d8156ea5b"]]},{"id":"0824084d8156ea5b","type":"template","z":"60879e0147c7a351","g":"4bcd6a3c52853425","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!doctype html>\n<html lang=\"en\"><head>\n\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <link rel=\"icon\" href=\"../uibuilder/images/node-blue.ico\">\n\n    <title>Examples for smanjunath211 - Node-RED uibuilder</title>\n    <meta name=\"description\" content=\"Node-RED uibuilder - Examples for smanjunath211\">\n\n    <!-- Your own CSS (defaults to loading uibuilders css)-->\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n\n    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->\n    <script defer src=\"../uibuilder/uibuilder.iife.min.js\"></script>\n    <script defer src=\"./index.js\">/* OPTIONAL: Put your custom code in that */</script>\n    <!-- #endregion -->\n\n</head><body class=\"uib\">\n    \n<h4 class=\"with-subtitle\"> \n</h4>\n\n\n<body>\n<table width = \"100%\">\n    <tr bgcolor='lightgreen' \">    \n        <th id = \"pc_time\">@pc_time</th>\n        <th id=\"mcn0\"> MC_Name0</th>\n        <th id=\"mcn1\"> MC_Name1</th>\n        <th id=\"mcn2\"> MC_Name2</th>\n        <th id=\"mcn3\"> MC_Name3</th>\n        <th id=\"mcn4\"> MC_Name0</th>\n        <th id=\"mcn5\"> MC_Name5</th>\n        <th id=\"mcn6\"> MC_Name6</th>\n        <th id=\"mcn7\"> MC_Name7</th>\n        <th id=\"mcn8\"> MC_Name8</th>\n        <th id=\"mcn9\"> MC_Name9</th>\n        <th id=\"mcn10\"> MC_Name10</th>\n</tr>\n    <tr bgcolor='lightblue' \">    \n        <th id = \"plc_time\">@plc_time</th>\n        <th id=\"mcnn0\"> Nick0</th>\n        <th id=\"mcnn1\"> Nick1</th>\n        <th id=\"mcnn2\"> Nick2</th>\n        <th id=\"mcnn3\"> Nick3</th>\n        <th id=\"mcnn4\"> Nick0</th>\n        <th id=\"mcnn5\"> Nick5</th>\n        <th id=\"mcnn6\"> Nick6</th>\n        <th id=\"mcnn7\"> Nick7</th>\n        <th id=\"mcnn8\"> Nick8</th>\n        <th id=\"mcnn9\"> Nick9</th>\n        <th id=\"mcnn10\"> Nick10</th>\n    </tr>\n</table>\n</body></html>","output":"str","x":610,"y":75,"wires":[["78671e076e5fc062"]]},{"id":"78671e076e5fc062","type":"uib-save","z":"60879e0147c7a351","g":"4bcd6a3c52853425","url":"dash3","uibId":"06fcc51d4b45689f","folder":"src","fname":"","createFolder":false,"reload":false,"usePageName":false,"encoding":"utf8","mode":438,"name":"","topic":"","x":750,"y":75,"wires":[]},{"id":"3920435ebeea0d97","type":"inject","z":"60879e0147c7a351","g":"7d08e1bfffb92c25","name":"Simulate MySQL Query Results","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"mc\":\"m00\",\"machine\":\"MACHINE-0\",\"nick\":\"CR3\",\"x-input\":\"X0\",\"dr-sec\":\"D0\",\"dr-min-acc\":\"D30\",\"dr-count\":\"D60\"},{\"mc\":\"m01\",\"machine\":\"MACHINE-1\",\"nick\":\"MSP1\",\"x-input\":\"X1\",\"dr-sec\":\"D1\",\"dr-min-acc\":\"D31\",\"dr-count\":\"D61\"},{\"mc\":\"m02\",\"machine\":\"MACHINE-2\",\"nick\":\"BTP1\",\"x-input\":\"X2\",\"dr-sec\":\"D2\",\"dr-min-acc\":\"D32\",\"dr-count\":\"D62\"},{\"mc\":\"m03\",\"machine\":\"MACHINE-3\",\"nick\":\"SP4\",\"x-input\":\"X3\",\"dr-sec\":\"D3\",\"dr-min-acc\":\"D33\",\"dr-count\":\"D63\"},{\"mc\":\"m04\",\"machine\":\"MACHINE-4\",\"nick\":\"SP3\",\"x-input\":\"X4\",\"dr-sec\":\"D4\",\"dr-min-acc\":\"D34\",\"dr-count\":\"D64\"},{\"mc\":\"m05\",\"machine\":\"MACHINE-5\",\"nick\":\"PFSL\",\"x-input\":\"X5\",\"dr-sec\":\"D5\",\"dr-min-acc\":\"D35\",\"dr-count\":\"D65\"},{\"mc\":\"m06\",\"machine\":\"MACHINE-6\",\"nick\":\"PFSR\",\"x-input\":\"X6\",\"dr-sec\":\"D6\",\"dr-min-acc\":\"D36\",\"dr-count\":\"D66\"},{\"mc\":\"m07\",\"machine\":\"MACIHINE-7\",\"nick\":\"CR1\",\"x-input\":\"X7\",\"dr-sec\":\"D7\",\"dr-min-acc\":\"D37\",\"dr-count\":\"D67\"},{\"mc\":\"m08\",\"machine\":\"MACHINE-8\",\"nick\":\"JUC\",\"x-input\":\"X20\",\"dr-sec\":\"D8\",\"dr-min-acc\":\"D38\",\"dr-count\":\"D68\"},{\"mc\":\"m09\",\"machine\":\"MACHINE-9\",\"nick\":\"CFT\",\"x-input\":\"X21\",\"dr-sec\":\"D9\",\"dr-min-acc\":\"D39\",\"dr-count\":\"D69\"},{\"mc\":\"m10\",\"machine\":\"MACHINE-10\",\"nick\":\"14T\",\"x-input\":\"X22\",\"dr-sec\":\"D10\",\"dr-min-acc\":\"D40\",\"dr-count\":\"D70\"}]","payloadType":"json","x":355,"y":225,"wires":[["42bd37e38ebca0ff","13ab910162f7b94a"]]},{"id":"42bd37e38ebca0ff","type":"debug","z":"60879e0147c7a351","g":"7d08e1bfffb92c25","name":"debug 2730","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":705,"y":225,"wires":[]},{"id":"06fcc51d4b45689f","type":"uibuilder","z":"60879e0147c7a351","name":"","topic":"","url":"dash3","okToGo":true,"fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"oldUrl":"dash","reload":true,"sourceFolder":"src","deployedVersion":"7.0.4","showMsgUib":true,"title":"","descr":"","editurl":"vscode://file/src/uibRoot/components-test/?windowId=_blank","x":665,"y":375,"wires":[["f5373145c2cec7aa"],["616a5c49020a4d60"]]},{"id":"f5373145c2cec7aa","type":"debug","z":"60879e0147c7a351","name":"uib Std Output","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":800,"y":335,"wires":[],"l":false},{"id":"616a5c49020a4d60","type":"debug","z":"60879e0147c7a351","name":"uib Control Output","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":800,"y":395,"wires":[],"l":false},{"id":"e717dc66d31956e7","type":"function","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"M0","func":"msg.cssmcn = '#mcn0';\nmsg.mcn = msg.payload[0].machine;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":375,"y":575,"wires":[["b08aa17af6d8e6db"]]},{"id":"2081e78f847d43d5","type":"link in","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"link in 397","links":["13ab910162f7b94a"],"x":240,"y":825,"wires":[["e717dc66d31956e7","9c3a2bbaee8bc6a3","14bb15d83ee72b69","ae2fcee173261a07","1ade27b2e5db39da","7610c1468d2010a2","77b43bcea7c6557a","07dd610283b1ed75","3c26092c430899b5","335dead20f2d8286","0a48ccb99767b78a"]]},{"id":"b08aa17af6d8e6db","type":"link out","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"link out 388","mode":"link","links":["22749732ed5f3600"],"x":510,"y":825,"wires":[]},{"id":"e19f220bacf38918","type":"uib-update","z":"60879e0147c7a351","name":"McName-Update","topic":"","mode":"update","modeSourceType":"update","cssSelector":"cssmcn","cssSelectorType":"msg","slotSourceProp":"mcn","slotSourcePropType":"msg","attribsSource":"","attribsSourceType":"json","slotPropMarkdown":false,"x":365,"y":375,"wires":[["06fcc51d4b45689f"]]},{"id":"9c3a2bbaee8bc6a3","type":"function","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"M1","func":"msg.cssmcn = '#mcn1';\nmsg.mcn = msg.payload[1].machine;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":375,"y":617.5,"wires":[["b08aa17af6d8e6db"]]},{"id":"14bb15d83ee72b69","type":"function","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"M2","func":"msg.cssmcn = '#mcn2';\nmsg.mcn = msg.payload[2].machine;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":375,"y":660,"wires":[["b08aa17af6d8e6db"]]},{"id":"ae2fcee173261a07","type":"function","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"M3","func":"msg.cssmcn = '#mcn3';\nmsg.mcn = msg.payload[3].machine;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":375,"y":702.5,"wires":[["b08aa17af6d8e6db"]]},{"id":"1ade27b2e5db39da","type":"function","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"M4","func":"msg.cssmcn = '#mcn4';\nmsg.mcn = msg.payload[4].machine;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":375,"y":745,"wires":[["b08aa17af6d8e6db"]]},{"id":"7610c1468d2010a2","type":"function","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"M5","func":"msg.cssmcn = '#mcn5';\nmsg.mcn = msg.payload[5].machine;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":375,"y":787.5,"wires":[["b08aa17af6d8e6db"]]},{"id":"77b43bcea7c6557a","type":"function","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"M6","func":"msg.cssmcn = '#mcn6';\nmsg.mcn = msg.payload[6].machine;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":375,"y":830,"wires":[["b08aa17af6d8e6db"]]},{"id":"07dd610283b1ed75","type":"function","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"M7","func":"msg.cssmcn = '#mcn7';\nmsg.mcn = msg.payload[7].machine;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":375,"y":872.5,"wires":[["b08aa17af6d8e6db"]]},{"id":"13ab910162f7b94a","type":"link out","z":"60879e0147c7a351","g":"7d08e1bfffb92c25","name":"link out 390","mode":"link","links":["2081e78f847d43d5","1d9c59e559516a08"],"x":535,"y":175,"wires":[]},{"id":"22749732ed5f3600","type":"link in","z":"60879e0147c7a351","name":"link in 398","links":["b08aa17af6d8e6db","ca31d0f2e42d7785"],"x":235,"y":375,"wires":[["e19f220bacf38918"]]},{"id":"3c26092c430899b5","type":"function","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"M8","func":"msg.cssmcn = '#mcn8';\nmsg.mcn = msg.payload[8].machine;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":375,"y":915,"wires":[["b08aa17af6d8e6db"]]},{"id":"335dead20f2d8286","type":"function","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"M9","func":"msg.cssmcn = '#mcn9';\nmsg.mcn = msg.payload[9].machine;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":375,"y":957.5,"wires":[["b08aa17af6d8e6db"]]},{"id":"0a48ccb99767b78a","type":"function","z":"60879e0147c7a351","g":"d2cb5f5e0b4256eb","name":"M10","func":"msg.cssmcn = '#mcn10';\nmsg.mcn = msg.payload[10].machine;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":375,"y":1000,"wires":[["b08aa17af6d8e6db"]]},{"id":"870fa739d23d9d75","type":"function","z":"60879e0147c7a351","g":"322d090ecc310058","name":"M8","func":"msg.cssmcn = '#mcnn8';\nmsg.mcn = msg.payload[8].nick;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":775,"y":915,"wires":[["ca31d0f2e42d7785"]]},{"id":"1d9c59e559516a08","type":"link in","z":"60879e0147c7a351","g":"322d090ecc310058","name":"link in 399","links":["13ab910162f7b94a"],"x":640,"y":825,"wires":[["f4c86742c11868cd","79d773f05e20b88b","addd1bd62e7da6c1","0f47a765af61c558","b01e1d37b84540cb","36287ffbce4c8029","53b4a31bcc949d07","c29d2d1b074e16e8","870fa739d23d9d75","7bf711c58ade0191","bfa093c1bdb2a045"]]},{"id":"ca31d0f2e42d7785","type":"link out","z":"60879e0147c7a351","g":"322d090ecc310058","name":"link out 391","mode":"link","links":["22749732ed5f3600"],"x":910,"y":825,"wires":[]},{"id":"f4c86742c11868cd","type":"function","z":"60879e0147c7a351","g":"322d090ecc310058","name":"M0","func":"msg.cssmcn = '#mcnn0';\nmsg.mcn = msg.payload[0].nick;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":775,"y":575,"wires":[["ca31d0f2e42d7785"]]},{"id":"79d773f05e20b88b","type":"function","z":"60879e0147c7a351","g":"322d090ecc310058","name":"M1","func":"msg.cssmcn = '#mcnn1';\nmsg.mcn = msg.payload[1].nick;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":775,"y":617.5,"wires":[["ca31d0f2e42d7785"]]},{"id":"addd1bd62e7da6c1","type":"function","z":"60879e0147c7a351","g":"322d090ecc310058","name":"M2","func":"msg.cssmcn = '#mcnn2';\nmsg.mcn = msg.payload[2].nick;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":775,"y":660,"wires":[["ca31d0f2e42d7785"]]},{"id":"0f47a765af61c558","type":"function","z":"60879e0147c7a351","g":"322d090ecc310058","name":"M3","func":"msg.cssmcn = '#mcnn3';\nmsg.mcn = msg.payload[3].nick;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":775,"y":702.5,"wires":[["ca31d0f2e42d7785"]]},{"id":"b01e1d37b84540cb","type":"function","z":"60879e0147c7a351","g":"322d090ecc310058","name":"M4","func":"msg.cssmcn = '#mcnn4';\nmsg.mcn = msg.payload[4].nick;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":775,"y":745,"wires":[["ca31d0f2e42d7785"]]},{"id":"36287ffbce4c8029","type":"function","z":"60879e0147c7a351","g":"322d090ecc310058","name":"M5","func":"msg.cssmcn = '#mcnn5';\nmsg.mcn = msg.payload[5].nick;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":775,"y":787.5,"wires":[["ca31d0f2e42d7785"]]},{"id":"53b4a31bcc949d07","type":"function","z":"60879e0147c7a351","g":"322d090ecc310058","name":"M6","func":"msg.cssmcn = '#mcnn6';\nmsg.mcn = msg.payload[6].nick;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":775,"y":830,"wires":[["ca31d0f2e42d7785"]]},{"id":"c29d2d1b074e16e8","type":"function","z":"60879e0147c7a351","g":"322d090ecc310058","name":"M7","func":"msg.cssmcn = '#mcnn7';\nmsg.mcn = msg.payload[7].nick;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":775,"y":872.5,"wires":[["ca31d0f2e42d7785"]]},{"id":"7bf711c58ade0191","type":"function","z":"60879e0147c7a351","g":"322d090ecc310058","name":"M9","func":"msg.cssmcn = '#mcnn9';\nmsg.mcn = msg.payload[9].nick;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":775,"y":957.5,"wires":[["ca31d0f2e42d7785"]]},{"id":"bfa093c1bdb2a045","type":"function","z":"60879e0147c7a351","g":"322d090ecc310058","name":"M10","func":"msg.cssmcn = '#mcnn10';\nmsg.mcn = msg.payload[10].nick;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":775,"y":1000,"wires":[["ca31d0f2e42d7785"]]},{"id":"1455677d594a88e3","type":"inject","z":"60879e0147c7a351","name":"Reload","props":[{"p":"_ui","v":"{\"method\":\"reload\"}","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"reload","x":500,"y":325,"wires":[["06fcc51d4b45689f"]],"info":"Sends a pre-formatted msg to the front-end that\r\ncauses the page to reload itself."},{"id":"5850f79d313010f3","type":"inject","z":"60879e0147c7a351","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"$fromMillis($millis(),' [H01]:[m01]:[s01] ','+0530')","payloadType":"jsonata","x":250,"y":450,"wires":[["875e4027fecb290b"]]},{"id":"875e4027fecb290b","type":"uib-update","z":"60879e0147c7a351","name":"PCTIme-Update","topic":"","mode":"update","modeSourceType":"update","cssSelector":"#pc_time","cssSelectorType":"str","slotSourceProp":"payload","slotSourcePropType":"msg","attribsSource":"","attribsSourceType":"json","slotPropMarkdown":false,"x":405,"y":450,"wires":[["06fcc51d4b45689f"]]}]

TotallyInformation · 21 October 2024 13:17

Hi, there isn't a node that will do this for you I'm afraid.

If you want to stick with low-code options, one thing you could do would be to feed multiple inputs to your uib-update node, each input having the payload for the cell value and something like msg.cell containing the CSS selector.

Each msg.cell will need to select the table row and the row column. This can be done something like this...

Note that you can work out complex CSS selectors using the dev tools in your browser. for example, here is the standard table from the element-tests example (from the library) with the 2nd column of the 2nd row selected.

Note that the breadcrumb list at the bottom shows you how you can select that element. However, that example has id'd rows and columns. You can also copy the selector by right-clicking over the cell entry required which gives this from the same example table:

#eltest-tbl-table > tbody > tr.r2 > td.r2.c2

If you have an unlabelled set of rows/columns though, you can still easily select a specific cell:

#eltest-tbl-table > tbody > tr:nth-child(2) > td:nth-child(2)

Which should hopefully be pretty obvious.

So now you know how to select a cell, you should hopefully be able to formulate a msg.cell string that targets the correct row and column.

smanjunath211 · 27 October 2024 02:08

Any chance i can get a example flow of this, i tried a lot of converting the chart to html code and then putting in ui-builder, i cant get it to work somehow. all i get is a blank structure and no data.

TotallyInformation · 27 October 2024 10:35

To be honest, I've not had time to work on that component. It is best to use a chart library. Maybe something like this but with a single metric:

https://apexcharts.com/javascript-chart-demos/heatmap-charts/basic/

As for your code not working. If you can share your front-end code and a simple flow, I'll take a look when I get a second.

fmarzocca · 27 October 2024 10:51

May I suggest Google Charts?
I am happily using them with UIBUILDER.

smanjunath211 · 27 October 2024 12:00

Might as well try it.
I just executed @hotNipi ui state trail for D1 and copied the HTML into ui builder didn't work out as expected.

Topic		Replies	Views
Uibuilder v1.2.0 published - bug fix and feature release Share Your Nodes	1	473	23 February 2019
[Update on progress] node-red-contrib-uibuilder vNext/v5 Share Your Nodes uibuilder	5	1064	17 February 2022
Errors installing uibuilder General uibuilder	2	20	27 October 2024
[node-red-contrib-uibuilder] NEW MAJOR RELEASE v5.0.0 🎁 Share Your Nodes uibuilder	40	2816	5 March 2023
Uibuilder v2 - Here at last! Published to npm Share Your Nodes uibuilder	31	3920	22 October 2019

Help with UIBuilder

Related Topics