Help with UIBuilder

General
41

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. :sunglasses:

1 Like
42

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 ?

43

It is in your browser where it belongs! :smile: 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.

1 Like
44

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.

45

Done!.
image

1 Like
46

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.

47

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.

48

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.

49

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.

50

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

image

time

51

Yes, that is sensible.

The tricks to working successfully with HTML:

  1. Understand that HTML is a hierarchy or tree structure. This helps you understand the relationships between different elements.
  2. 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.

1 Like
52

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)

image
image

image

Screenshot 2024-10-10 071515
Screenshot 2024-10-10 071515870×216 21.4 KB

1 Like
53

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.

54

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.

image

1 Like
55

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"]]}]
56

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.

image
image651×405 16.6 KB

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.

image
image658×265 14.9 KB

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.

57

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.

58

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.

59

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

2 Likes
60

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.