Hello all, I have Ui dashboard and data imported from the node red. Actually, I used the Ui-text node. And I used 18 text nodes. so, in Ui-dashboard it I separated to 9 nodes per rows. So here I want to put headline in between the 2 rows for identification. because they are different Datas. how can I do that? Any bodies have an idea about those criteria?
If you mean a line with text in it, then use another full width text node to show the headline.
@Colin Thanks for replying. You are right. I want to put a line with text. But how to set the full width for text node?
edit the ui-text node and change the size option to the full width of the group
BTW...it looks like you have 10 text boxes in each row...
@zenofmud Thanks for replied. But if I am selected the full size, it takes only more rows. So actual contents are going under. So I need to modify only column. Then only it's looks like headline for second rows data. So please, can you give suggestion about that?
Are you using dashboard 1 or 2?
Here is an example using dashboard 1 so you can see how to do it
[{"id":"c08cea72100e425d","type":"tab","label":"Flow 2","disabled":false,"info":"","env":[]},{"id":"945e0164f69f6658","type":"inject","z":"c08cea72100e425d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":280,"wires":[["48839cd16ea3e457","68fcf07bdbaf026b","79f748878b1c15be"]]},{"id":"a25653e18782b7b2","type":"ui_text","z":"c08cea72100e425d","group":"b9a51356cdb87bed","order":0,"width":"2","height":"1","name":"item 1","label":"","format":"{{msg.payload}}","layout":"col-center","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":550,"y":220,"wires":[]},{"id":"7d5b3d9e5e94e700","type":"ui_text","z":"c08cea72100e425d","group":"b9a51356cdb87bed","order":0,"width":"2","height":"1","name":"item 2","label":"","format":"{{msg.payload}}","layout":"col-center","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":550,"y":260,"wires":[]},{"id":"dfa5837bb2e9a32a","type":"ui_text","z":"c08cea72100e425d","group":"b9a51356cdb87bed","order":0,"width":"2","height":"1","name":"item 3","label":"","format":"{{msg.payload}}","layout":"col-center","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":550,"y":300,"wires":[]},{"id":"39341b0d4f580add","type":"ui_text","z":"c08cea72100e425d","group":"b9a51356cdb87bed","order":0,"width":"6","height":"1","name":"under","label":"","format":"{{msg.payload}}","layout":"col-center","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":550,"y":340,"wires":[]},{"id":"f48ace2d448bc9f2","type":"inject","z":"c08cea72100e425d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"big long string to go under other texts","payloadType":"str","x":150,"y":340,"wires":[["39341b0d4f580add"]]},{"id":"48839cd16ea3e457","type":"change","z":"c08cea72100e425d","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"data 1","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":220,"wires":[["a25653e18782b7b2"]]},{"id":"68fcf07bdbaf026b","type":"change","z":"c08cea72100e425d","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"data 2","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":260,"wires":[["7d5b3d9e5e94e700"]]},{"id":"79f748878b1c15be","type":"change","z":"c08cea72100e425d","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"data 3","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":300,"wires":[["dfa5837bb2e9a32a"]]},{"id":"b9a51356cdb87bed","type":"ui_group","name":"Default","tab":"484a7935384d5ed1","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"484a7935384d5ed1","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
@zenofmud Actually I want requirement is not that. I attached one image in first message. So first row one set of data and second row is another set of data. Both are in one dashboard only. so in between of two rows I have to put one headline with covers the full of second set of row. Here i mentioned row is i put mark in arrow (in image). There only comes the headline as per mine. so first row and one headline for second row and second row. this is i need.
I don't think we understand the problem fully, please post an image showing what you have managed by putting a full width text node between the rows, and why it is not what you want.
So here I attached, what I expected output. First and second table is there. In between them i want to put one title. This is my requirement.
What do you see when you put a full width text node there, 8x1 for example, depending on your group width?
Colins Suggestion should work.
here is another approach i used for my dashboard a while ago. see if it suits you.
[{"id":"6f4c4d26623bc1c7","type":"inject","z":"c08cea72100e425d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":370,"y":600,"wires":[["d3362d48240c83a3","2b19fd9f85b6e480"]]},{"id":"c6ab1e093b790447","type":"ui_template","z":"c08cea72100e425d","group":"b9a51356cdb87bed","name":"","order":1,"width":30,"height":10,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":710,"y":600,"wires":[[]]},{"id":"2b19fd9f85b6e480","type":"template","z":"c08cea72100e425d","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html> <html> \n <head> \n <title>Table of Contents</title> \n \n </head> \n<body> \n <table border=\"1\"> \n <thead> \n <tr> \n <th colspan=\"9\" bgcolor='#7F8C8D' >Table 1</th> \n </tr> \n </thead> \n <tbody> \n <tr> \n <th bgcolor='green'>Heading 1-1</th> \n <th bgcolor='green'>Heading 1-2</th> \n <th bgcolor='green'>Heading 1-3</th> \n <th bgcolor='green'>Heading 1-4</th> \n <th bgcolor='green'>Heading 1-5</th> \n <th bgcolor='green'>Heading 1-6</th> \n <th bgcolor='green'>Heading 1-7</th> \n <th bgcolor='green'>Heading 1-8</th> \n <th bgcolor='green'>Heading 1-9</th> \n </tr> \n </tbody> \n\n <tbody> \n <tr> \n <td>Content 2-1</td> \n <td>Content 2-2</td> \n <td>Content 2-3</td> \n <td>Content 2-4</td> \n <td>Content 2-5</td> \n <td>Content 2-6</td> \n <td>Content 2-7</td> \n <td>Content 2-8</td> \n <td>Content 2-9</td> \n </tr> \n </tbody> \n\n <tbody> \n <tr> \n <td>Content 3-1</td> \n <td>Content 3-2</td> \n <td>Content 3-3</td> \n <td>Content 3-4</td> \n <td>Content 3-5</td> \n <td>Content 3-6</td> \n <td>Content 3-7</td> \n <td>Content 3-8</td> \n <td>Content 3-9</td> \n </tr> \n </tbody> \n\n <tbody> \n <tr> \n <td>Content 4-1</td> \n <td>Content 4-2</td> \n <td>Content 4-3</td> \n <td>Content 4-4</td> \n <td>Content 4-5</td> \n <td>Content 4-6</td> \n <td>Content 4-7</td> \n <td>Content 4-8</td> \n <td>Content 4-9</td> \n </tr> \n </tbody> \n\n\n\n <tbody> \n <tr> \n <th colspan=\"9\" bgcolor='#7F8C8D'>Table 2</th> \n \n </tr> \n </tbody> \n\n <tbody> \n <tr> \n \n <th bgcolor='green'>Heading 5-1</th> \n <th bgcolor='green'>Heading 5-2</th> \n <th bgcolor='green'>Heading 5-3</th> \n <th bgcolor='green'>Heading 5-4</th> \n <th bgcolor='green'>Heading 5-5</th> \n <th bgcolor='green'>Heading 5-6</th> \n <th bgcolor='green'>Heading 5-7</th> \n <th bgcolor='green'>Heading 5-8</th> \n <th bgcolor='green'>Heading 5-9</th> \n </tr> \n </tbody> \n\n <tbody> \n <tr> \n <td>Content 6-1</td> \n <td>Content 6-2</td> \n <td>Content 6-3</td> \n <td>Content 6-4</td> \n <td>Content 6-5</td> \n <td>Content 6-6</td> \n <td>Content 6-7</td> \n <td>Content 6-8</td> \n <td>Content 6-9</td> \n </tr> \n </tbody> \n\n<tbody> \n <tr> \n <td>Content 7-1</td> \n <td>Content 7-2</td> \n <td>Content 7-3</td> \n <td>Content 7-4</td> \n <td>Content 7-5</td> \n <td>Content 7-6</td> \n <td>Content 7-7</td> \n <td>Content 7-8</td> \n <td>Content 7-9</td> \n </tr> \n </tbody> \n<tbody> \n <tr> \n <td>Content 8-1</td> \n <td>Content 8-2</td> \n <td>Content 8-3</td> \n <td>Content 8-4</td> \n <td>Content 8-5</td> \n <td>Content 8-6</td> \n <td>Content 8-7</td> \n <td>Content 8-8</td> \n <td>Content 8-9</td> \n </tr> \n </tbody> \n\n\n\n\n </table> \n</body> \n</html>\n","output":"str","x":540,"y":600,"wires":[["c6ab1e093b790447"]]},{"id":"b9a51356cdb87bed","type":"ui_group","name":"Default","tab":"484a7935384d5ed1","order":1,"disp":true,"width":30,"collapse":false,"className":""},{"id":"484a7935384d5ed1","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
@colin There I put text node with max width(6*1). still it can't come with full length instead of it comes only same like previous nodes.
@smanjunath211 Thanks for given suggestions, But how can I merge with my text node in between the boxes?
use Colins template if you still want to use text node. my example is html table based.
share your flow, so that i can see what is happening.
is not full width i think, what is your groups width ?
I saw that you are using different colors for different columns, so adjusted the flow accordingly, if you chose to use this solution, at a later time.
[{"id":"b4cee1596c509be3","type":"inject","z":"c08cea72100e425d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":360,"y":680,"wires":[["296f70f2e7eb7e49"]]},{"id":"296f70f2e7eb7e49","type":"ui_template","z":"c08cea72100e425d","group":"b9a51356cdb87bed","name":"","order":1,"width":"20","height":"20","format":"<!DOCTYPE html>\n<html lang=\"en\">\n\n <title>Colored Table</title>\n \n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <style>\n\n table {\n border-collapse: collapse; /* Remove default table borders */\n width: 100%; /* Set table width to 100% */\n }\n th, td {\n padding: 10px; /* Add padding to cells */\n text-align: center; /* Center text in cells */\n }\n th {\n background-color: green; /* Set background color for headers */\n }\n \n \n /* Define colors for each column */\n td:nth-child(1) { color: grey; }\n td:nth-child(2) { color: red; }\n td:nth-child(3) { color: red; }\n td:nth-child(4) { color: yellow; }\n td:nth-child(5) { color: yellow; }\n td:nth-child(6) { color: orange; }\n td:nth-child(7) { color: orange; }\n td:nth-child(8) { color: violet; }\n td:nth-child(9) { color: violet; }\n </style>\n</head>\n\n<body>\n <table border=\"1\"> \n\n \n <thead>\n <tr>\n <th style=\"background-color: grey;\" colspan=9>Table 1</th>\n </tr>\n </thead>\n\n <thead>\n <tr>\n <th>Column 1</th>\n <th>Column 2</th>\n <th>Column 3</th>\n <th>Column 4</th>\n <th>Column 5</th>\n <th>Column 6</th>\n <th>Column 7</th>\n <th>Column 8</th>\n <th>Column 9</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Row 1, Cell 1</td>\n <td>Row 1, Cell 2</td>\n <td>Row 1, Cell 3</td>\n <td>Row 1, Cell 4</td>\n <td>Row 1, Cell 5</td>\n <td>Row 1, Cell 6</td>\n <td>Row 1, Cell 7</td>\n <td>Row 1, Cell 8</td>\n <td>Row 1, Cell 9</td>\n </tr>\n <tr>\n <td>Row 2, Cell 1</td>\n <td>Row 2, Cell 2</td>\n <td>Row 2, Cell 3</td>\n <td>Row 2, Cell 4</td>\n <td>Row 2, Cell 5</td>\n <td>Row 2, Cell 6</td>\n <td>Row 2, Cell 7</td>\n <td>Row 2, Cell 8</td>\n <td>Row 2, Cell 9</td>\n </tr>\n <tr>\n <td>Row 3, Cell 1</td>\n <td>Row 3, Cell 2</td>\n <td>Row 3, Cell 3</td>\n <td>Row 3, Cell 4</td>\n <td>Row 3, Cell 5</td>\n <td>Row 3, Cell 6</td>\n <td>Row 3, Cell 7</td>\n <td>Row 3, Cell 8</td>\n <td>Row 3, Cell 9</td>\n </tr>\n\n\n\n <thead>\n <tr>\n <th style=\"background-color: grey;\" colspan=9>Table 2</th>\n </tr>\n </thead>\n <thead>\n <tr>\n <th>Column 1</th>\n <th>Column 2</th>\n <th>Column 3</th>\n <th>Column 4</th>\n <th>Column 5</th>\n <th>Column 6</th>\n <th>Column 7</th>\n <th>Column 8</th>\n <th>Column 9</th>\n </tr>\n </thead>\n \n\n <tr>\n <td>Row 4, Cell 1</td>\n <td>Row 4, Cell 2</td>\n <td>Row 4, Cell 3</td>\n <td>Row 4, Cell 4</td>\n <td>Row 4, Cell 5</td>\n <td>Row 4, Cell 6</td>\n <td>Row 4, Cell 7</td>\n <td>Row 4, Cell 8</td>\n <td>Row 4, Cell 9</td>\n </tr>\n <tr>\n <td>Row 5, Cell 1</td>\n <td>Row 5, Cell 2</td>\n <td>Row 5, Cell 3</td>\n <td>Row 5, Cell 4</td>\n <td>Row 5, Cell 5</td>\n <td>Row 5, Cell 6</td>\n <td>Row 5, Cell 7</td>\n <td>Row 5, Cell 8</td>\n <td>Row 5, Cell 9</td>\n </tr>\n <tr>\n <td>Row 6, Cell 1</td>\n <td>Row 6, Cell 2</td>\n <td>Row 6, Cell 3</td>\n <td>Row 6, Cell 4</td>\n <td>Row 6, Cell 5</td>\n <td>Row 6, Cell 6</td>\n <td>Row 6, Cell 7</td>\n <td>Row 6, Cell 8</td>\n <td>Row 6, Cell 9</td>\n </tr>\n </tbody>\n\n </table>\n</body>\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":570,"y":680,"wires":[[]]},{"id":"b9a51356cdb87bed","type":"ui_group","name":"Default","tab":"484a7935384d5ed1","order":1,"disp":false,"width":"20","collapse":false,"className":""},{"id":"484a7935384d5ed1","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
@smanjunath211 I attached the my one of the text node's property. Even I select the 27 width(max width). That much level only it come. but I need full length.
Actually I created the topics in nodered and receives the values using mqtt in node. After that I just connected to the UI dashboard text node for saw the received reading. That's all about the flow.
Please export your flow and attach it to a reply so we can see what you are doing.
