How insert in ui table an image in each row

hi,

i am trying to insert warning image in each row on my table.
i used the blow code in msg.ui_control but nothing diplay

{title:"Img", field:"img", "visible": true, "width":150,hight:20,align:"center",

                    "formatter": "function(cell, formatterParams, onRendered){return '<img width='20' height='20' alt='Image not found' src='/home/osboxes/node-red_1887/warning.jpg'/>''; }"

                 }

could help me
thank you

I dont think you need the ui_control for that
the ui_table has a field, when configuring its columns, to set as an image

image

Example Flow :

[{"id":"b7dff285.69049","type":"inject","z":"670e449e482aa4bb","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Name\":\"<b>Yokoi</b>\",\"Age\":\"30\",\"Color\":\"lime\",\"Prog\":70,\"Star\":\"3\",\"image\":\"https://picsum.photos/id/234/50/50\"},{\"Name\":\"<i>DCJ</i>\",\"Age\":\"50\",\"Color\":\"dodgerblue\",\"Prog\":\"45\",\"Star\":2,\"Pass\":false,\"image\":\"https://picsum.photos/id/235/50/50\"},{\"Name\":\"Nick\",\"Age\":\"40\",\"Color\":\"darkred\",\"Prog\":95,\"Star\":\"5\",\"Pass\":true,\"image\":\"https://picsum.photos/id/236/50/50\"},{\"Name\":\"Ronin\",\"Age\":\"22\",\"Color\":\"dodgerblue\",\"Prog\":45,\"Star\":\"5\",\"Pass\":true,\"image\":\"https://picsum.photos/id/237/50/50\"}]","payloadType":"json","x":370,"y":660,"wires":[["7d48e13.90ee22"]]},{"id":"7d48e13.90ee22","type":"ui_table","z":"670e449e482aa4bb","group":"571a38b1.5e3638","name":"People","order":1,"width":"24","height":"10","columns":[{"field":"Name","title":"Who","width":"","align":"left","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Age","title":"Age","width":"","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Color","title":"","width":"","align":"left","formatter":"color","formatterParams":{"target":"_blank"}},{"field":"Star","title":"%","width":"","align":"left","formatter":"star","formatterParams":{"target":"_blank"}},{"field":"Pass","title":"","width":"","align":"center","formatter":"tickCross","formatterParams":{"target":"_blank"}},{"field":"Prog","title":"","width":"","align":"left","formatter":"progress","formatterParams":{"target":"_blank"}},{"field":"image","title":"Image","width":"","align":"center","formatter":"image","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":580,"y":660,"wires":[]},{"id":"571a38b1.5e3638","type":"ui_group","name":"Richer Table","tab":"29ec6908.552b36","order":1,"disp":true,"width":"24","collapse":false,"className":""},{"id":"29ec6908.552b36","type":"ui_tab","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]

You might have to send the column definition to msg.ui_control.tabulator.columns array.
You can take a look into the provided examples how to format a ui_control message.

Check the browser console for any error messages.

i already did this.
please find all the flows that i used:

[
    {
        "id": "731cf73c8837e83f",
        "type": "tab",
        "label": "Flow 2",
        "disabled": false,
        "info": ""
    },
    {
        "id": "b2f7724575bccdb8",
        "type": "inject",
        "z": "731cf73c8837e83f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payloadType": "str",
        "x": 350,
        "y": 340,
        "wires": [
            [
                "3904341271fd2062",
                "e329b01d0f34ace7"
            ]
        ]
    },
    {
        "id": "8a799d2cd04946d3",
        "type": "debug",
        "z": "731cf73c8837e83f",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 930,
        "y": 180,
        "wires": []
    },
    {
        "id": "8d06bd4ebc25bc6c",
        "type": "ui_table",
        "z": "731cf73c8837e83f",
        "group": "b070d416.db371",
        "name": "Thermostats",
        "order": 1,
        "width": "25",
        "height": "7",
        "columns": [],
        "outputs": 1,
        "cts": true,
        "x": 810,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "3904341271fd2062",
        "type": "function",
        "z": "731cf73c8837e83f",
        "name": "",
        "func": "msg.payload = [\n    {\n        \"name\":\"MEQ0451495\",\n        \"room\":\"Bathroom\",\n        \"TEMPERATURE\":22,\n        \"ACTUAL TEMPERATURE\":21.8,\n        \"VALVE STATE\":90,\n        \"BATTERY STATE\":2.7\n        },\n    \n    {\n        \"name\":\"MEQ1875547\",\n        \"room\":\"Living Room\",\n        \"TEMPERATURE\":12,\n        \"ACTUAL TEMPERATURE\":16.2,\n        \"VALVE STATE\":10,\n        \"BATTERY STATE\":2.7\n    },\n    \n    {\n        \"name\":\"MEQ1875515\",\n        \"room\":\"Living Room2\",\n        \"TEMPERATURE\":123,\n        \"ACTUAL TEMPERATURE\":16.2,\n        \"VALVE STATE\":35,\n        \"BATTERY STATE\":2.7\n    },\n    \n     {\n        \"name\":\"MEQ1875515\",\n        \"room\":\"Living Room2\",\n        \"TEMPERATURE\":123,\n        \"ACTUAL TEMPERATURE\":16.2,\n        \"VALVE STATE\":100,\n        \"BATTERY STATE\":2.7\n    },\n     {\n        \"name\":\"MEQ1875515\",\n        \"room\":\"Living Room2\",\n        \"TEMPERATURE\":123,\n        \"ACTUAL TEMPERATURE\":16.2,\n        \"VALVE STATE\":70,\n        \"BATTERY STATE\":2.7\n    }\n]\n\n        \nmsg.ui_control =  {\n    \"tabulator\":{\n        columns:[\n                {title:\"Name\", field:\"name\", width:200},\n                {title:\"Room\", field:\"room\", widthGrow:3},\n                {title:\"TEMPERATURE\", field:\"TEMPERATURE\", align:\"center\"},\n                {title:\"ACTUAL TEMPERATURE\", field:\"ACTUAL TEMPERATURE\", sorter:\"number\", align:\"center\"},\n                {\"formatterParams\":{\"target\":\"_blank\",\"min\":0,\"max\":99,\"color\":[\"green\",\"orange\",\"red\"],\n                  \"legend\":\"function (value) {return (value>0)? '&nbsp;&nbsp;'+value+' %' : '-';}\",\n                  \"legendColor\":\"#101010\",\"legendAlign\":\"center\"},\n                  \"title\":\"VALVE STATE\",\"field\":\"VALVE STATE\",\"formatter\":\"progress\",\"width\":100},\n                {title:\"BATTERY STATE\", field:\"BATTERY STATE\", sorter:\"number\", align:\"center\"},\n                {title:\"Action\", field:\"Action\", \"visible\": true, width:50,hight:20,\n                    \"formatter\": \"function(cell, formatterParams, onRendered){return '<button class=\\\"md-warn md-button \\\">Activate</button>'; }\"\n                 },\n                 {title:\"test\", field:\"test\", width:50,\n                     \"formatter\": \"function(cell, formatterParams, onRendered){return '<img width='30' height='30' alt='Image not found' src='data:image/png;base64,{{msg.imageSrc}}' />'; }\"\n                 }\n            ]\n    }\n}\n\n\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 590,
        "y": 320,
        "wires": [
            [
                "8d06bd4ebc25bc6c",
                "8a799d2cd04946d3"
            ]
        ]
    },
    {
        "id": "7466eb2b70a8cd74",
        "type": "inject",
        "z": "731cf73c8837e83f",
        "name": "reset table",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[]",
        "payloadType": "json",
        "x": 580,
        "y": 200,
        "wires": [
            [
                "8d06bd4ebc25bc6c"
            ]
        ]
    },
    {
        "id": "77c863e6910aee6c",
        "type": "function",
        "z": "731cf73c8837e83f",
        "name": "msg.filename",
        "func": "msg.filename = \"C:\\\\Users\\\\Oualid\\\\Desktop\\\\warning.jpg\";\nreturn msg;\n    \n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 510,
        "y": 480,
        "wires": [
            [
                "a561775911f57a0e"
            ]
        ]
    },
    {
        "id": "ab7097a4786dee23",
        "type": "inject",
        "z": "731cf73c8837e83f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payloadType": "str",
        "x": 340,
        "y": 480,
        "wires": [
            [
                "77c863e6910aee6c"
            ]
        ]
    },
    {
        "id": "a561775911f57a0e",
        "type": "file in",
        "z": "731cf73c8837e83f",
        "name": "",
        "filename": "",
        "format": "",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 690,
        "y": 480,
        "wires": [
            [
                "b44d73b1e1020dae"
            ]
        ]
    },
    {
        "id": "b44d73b1e1020dae",
        "type": "base64",
        "z": "731cf73c8837e83f",
        "name": "",
        "action": "str",
        "property": "payload",
        "x": 840,
        "y": 480,
        "wires": [
            [
                "7ecd396dc1ce9916"
            ]
        ]
    },
    {
        "id": "7ecd396dc1ce9916",
        "type": "function",
        "z": "731cf73c8837e83f",
        "name": "",
        "func": "msgPayload= msg.payload;\nmsg={imageSrc:msg.payload};\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1000,
        "y": 480,
        "wires": [
            [
                "3904341271fd2062"
            ]
        ]
    },
    {
        "id": "e329b01d0f34ace7",
        "type": "change",
        "z": "731cf73c8837e83f",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 450,
        "y": 420,
        "wires": [
            [
                "77c863e6910aee6c"
            ]
        ]
    },
    {
        "id": "b070d416.db371",
        "type": "ui_group",
        "name": "Table",
        "tab": "cd895ba5.a7168",
        "order": 1,
        "disp": true,
        "width": "25",
        "collapse": false
    },
    {
        "id": "cd895ba5.a7168",
        "type": "ui_tab",
        "name": "newTable",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

thank you

Ok I see you like to send your image as a base64 encoded data. Sorry I can't help here as I don't have any experience with that line:

src='data:image/png;base64,{{msg.imageSrc}}'

but this can't work

msgPayload= msg.payload;
msg={imageSrc:msg.payload};
return msg;

a) there is something wrong in line 1.
b) you have to set your call data via the complete array or commands. Then it will be passed to your formatter function by cell.getValue(). But without further tricks you have to send a copy of your file to every row in that column.

src='data:image/png;base64,{{'+cell.getValue()+'}}'

Tabulator and all callbacks don't have access to the msg object.

I think you can't you place your image where it could be accessed via http :man_shrugging:? @UnborN solution would be the easiest. Or you use an icon (more efficient)
image
perhaps scaled by 2x

In Node-red settings.js file there is an option to serve files from a static folder.
Un-comment httpStatic and point to a folder on your system to serve your own images

Node-red Documentation - httpStatic

The image (warning.jpg) can be then accessed from the url path
http://<node-red-ip>:1880/warning.jpg

Then you can use the msg.ui_control formatter without the need for base64 that doesnt seem to be supported with Tabulator.

 {
      title: "test", field: "test", width: 50,
      "formatter": `function(cell, formatterParams, onRendered){return '<img width="30" height="30" alt="Image not found" src="/warning.jpg"/>'; }`
            }

Modified Flow

[{"id":"8a799d2cd04946d3","type":"debug","z":"731cf73c8837e83f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":380,"wires":[]},{"id":"8d06bd4ebc25bc6c","type":"ui_table","z":"731cf73c8837e83f","group":"b070d416.db371","name":"Thermostats","order":1,"width":"25","height":"7","columns":[],"outputs":1,"cts":true,"x":690,"y":460,"wires":[[]]},{"id":"3904341271fd2062","type":"function","z":"731cf73c8837e83f","name":"table data","func":"msg.payload = [\n    {\n        \"name\": \"MEQ0451495\",\n        \"room\": \"Bathroom\",\n        \"TEMPERATURE\": 22,\n        \"ACTUAL TEMPERATURE\": 21.8,\n        \"VALVE STATE\": 90,\n        \"BATTERY STATE\": 2.7\n    },\n\n    {\n        \"name\": \"MEQ1875547\",\n        \"room\": \"Living Room\",\n        \"TEMPERATURE\": 12,\n        \"ACTUAL TEMPERATURE\": 16.2,\n        \"VALVE STATE\": 10,\n        \"BATTERY STATE\": 2.7\n    },\n\n    {\n        \"name\": \"MEQ1875515\",\n        \"room\": \"Living Room2\",\n        \"TEMPERATURE\": 123,\n        \"ACTUAL TEMPERATURE\": 16.2,\n        \"VALVE STATE\": 35,\n        \"BATTERY STATE\": 2.7\n    },\n\n    {\n        \"name\": \"MEQ1875515\",\n        \"room\": \"Living Room2\",\n        \"TEMPERATURE\": 123,\n        \"ACTUAL TEMPERATURE\": 16.2,\n        \"VALVE STATE\": 100,\n        \"BATTERY STATE\": 2.7\n    },\n    {\n        \"name\": \"MEQ1875515\",\n        \"room\": \"Living Room2\",\n        \"TEMPERATURE\": 123,\n        \"ACTUAL TEMPERATURE\": 16.2,\n        \"VALVE STATE\": 70,\n        \"BATTERY STATE\": 2.7\n    }\n]\n\n\nmsg.ui_control = {\n    \"tabulator\": {\n        columns: [\n            { title: \"Name\", field: \"name\", width: 200 },\n            { title: \"Room\", field: \"room\", widthGrow: 1 },\n            { title: \"TEMPERATURE\", field: \"TEMPERATURE\", align: \"center\" },\n            { title: \"ACTUAL TEMPERATURE\", field: \"ACTUAL TEMPERATURE\", sorter: \"number\", align: \"center\" },\n            {\n                \"formatterParams\": {\n                    \"target\": \"_blank\", \"min\": 0, \"max\": 99, \"color\": [\"green\", \"orange\", \"red\"],\n                    \"legend\": \"function (value) {return (value>0)? '&nbsp;&nbsp;'+value+' %' : '-';}\",\n                    \"legendColor\": \"#101010\", \"legendAlign\": \"center\"\n                },\n                \"title\": \"VALVE STATE\", \"field\": \"VALVE STATE\", \"formatter\": \"progress\", \"width\": 100\n            },\n            { title: \"BATTERY STATE\", field: \"BATTERY STATE\", sorter: \"number\", align: \"center\" },\n            {\n                title: \"Action\", field: \"Action\", \"visible\": true, width: 100,\n                \"formatter\": \"function(cell, formatterParams, onRendered){return '<button class=\\\"md-warn md-button \\\">Activate</button>'; }\"\n            },\n            {\n                title: \"test\", field: \"test\", width: 50,\n                \"formatter\": `function(cell, formatterParams, onRendered){return '<img width=\"30\" height=\"30\" alt=\"Image not found\" src=\"/warning.jpg\"/>'; }`\n            }\n            \n        ]\n    }\n}\n\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":460,"y":460,"wires":[["8a799d2cd04946d3","8d06bd4ebc25bc6c"]]},{"id":"7466eb2b70a8cd74","type":"inject","z":"731cf73c8837e83f","name":"reset table","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":500,"y":540,"wires":[["8d06bd4ebc25bc6c"]]},{"id":"ab7097a4786dee23","type":"inject","z":"731cf73c8837e83f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"str","x":310,"y":460,"wires":[["3904341271fd2062"]]},{"id":"b070d416.db371","type":"ui_group","name":"Table","tab":"cd895ba5.a7168","order":1,"disp":true,"width":"25","collapse":false},{"id":"cd895ba5.a7168","type":"ui_tab","name":"newTable","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
2 Likes

thanks a lot

hi @UnborN @Christian-Me ,

please i have another tow questions for you.
in fact, using the same example given above, i want to display the value of the cell on the name of the button for ex: if the value of the cell is 5 so the button name should display 5 and so on.
for that i tried the below code but did not work:

{ title: "TEMPERATURE", field: "TEMPERATURE", align: "center",
                "formatter": "function(cell, formatterParams, onRendered){var value= cell.getValue();" +
                                        "return '<button class=\"md-warn md-button \">value</button>'; }"
            }

my second question, i want to change the color of the button to warning color. please the find in the below what i did

{
                title: "Action", field: "Action", "visible": true, width: 100,
                "formatter": "function(cell, formatterParams, onRendered){return '<button class=\"md-warn md-button \">Activate</button>'; }"
            }

thanks a lot for your help

What value exactly ? in your table there are several columns, with several values :innocent:

Try something like this :

 {
   title: "Action", field: "Action", "visible": true, width: 100,
   "formatter": "function(cell, formatterParams, onRendered){ return '<button class=\"md-warn md-button\">Activate ' + cell._cell.row.data[\"TEMPERATURE\"] + '}</button>'; }"
            },

which at some point in the return string you have to close the single quote string and concatenate +
cell._cell.row.data[\"TEMPERATURE\"] which is where the data is for each row.

regarding styling the button you can use css style tags. do md (material design classes work? dunno)

1 Like

Avoid using the internal variables usually starting with _. Even if this works now it could break in s feature update.
Better use the get methods instead:

1 Like

Noted.

{
title: "Action", field: "Action", "visible": true, width: 100,
"formatter": "function(cell, formatterParams, onRendered){ return '<button class=\"md-warn md-button\">Activate ' + cell.getData()[\"TEMPERATURE\"] + '</button>'; }"
},
2 Likes

thanks a lot