Ui-table row change background color on updateorAddData

Dashboard
1

I am using node-red-node-ui-table to show all the temperature devices in our house. I send the data from node-red using updateoradddata - works fine.
What I can;t do is set the background colour of the whole row when i update - can;t find out how to.
I have tried rowFormatter call back and that works when first rendering the table but is then not retriggered when I update the data.

My update message is shown here:

msg.payload = {
    command :"updateOrAddData",
    arguments:    
    [
        [
            {
                "id": zoneId,
                "room": zoneObj.name,
                "area": zoneConfig.zoneType,
                "ACTUAL_TEMPERATURE-value": zoneObj.temp,
                "ACTUAL_TEMPERATURE-timeStamp": Number(zoneObj.timeStamp),
                "BATTERY_STATE-value": zoneObj.battery,
                "SET_TEMPERATURE-value": zoneObj.sPoint,
                "nextsptime":zoneObj.nextsPointTime,    //"nextsptime": nextSpointTimeStr,
                "nextsptemp": zoneObj.nextsPoint,
                "boostime": boostTimeStr,
                "occupied": zoneConfig.occupied,
                "status":statusStr,
                "hardware":hardwareStr,
                "error":errorStr,
                
            }
        ]
    ]
}
return msg;

Help greatly appreciated. Answering this shoud help me to understand some otehr similar formatting tasks I'd like to achieve.

Cheers
Copp

1 Like
2

see this recent thread on exactly this topic

(TLDR: It's hard right now but we're working on it)

3

Ok - with more wading through the helpful stuff above and some lucky guesswork I have managed to colorize a row based on data update. (Have answered my own question.!)

I want the row background colour to be red if there is an error and the default colour otherwise.
Added this and it works a treat:

        "rowUpdated": "function(row){ if(row.getData().error == (\"Error\")){ row.getElement().style.backgroundColor = \"#faa49d\"; }else{row.getElement().style.backgroundColor = \"\";}; }",

The error column is a non visible one i use to signal things to the table row - in this case background colour. That makes me think that adding a non visible field(or column) purely for the purposes of changing the data formatting is a useful technique. (willing to be told this is not good practice however.)

I need to colorise the font in the actual temperature colume based on how far away from the setpoint it is. I was going to do this in the column formatter using function but think it is easier to add another hidden column called setpointCol and send it with the data from node red. Cheating I know - but less painful than using tabulator formatter function.

3 Likes
4

with the latest update to the ui-table node (0.3.2) this should now be somewhat simpler - but nothing wring with what you have already.

[{"id":"5276ae0a.4105","type":"inject","z":"846d7832.3348c8","name":"add data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":620,"wires":[["6ebd4255.17ac3c"]]},{"id":"6ebd4255.17ac3c","type":"function","z":"846d7832.3348c8","name":"","func":"msg.payload = [ \n    {title:\"Row0\", test:\"red\", rest:\"More words\"},\n    {title:\"Row1\", test:\"blue\", rest:\"More words\"},\n    {title:\"Row2\", test:\"green\", rest:\"More words\"},\n    {title:\"Row3\", test:\"yellow\", rest:\"More words\"},\n    {title:\"Row4\", test:\"cyan\", rest:\"More words\"} \n]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":620,"wires":[["c140681b.2b13c8","54380dea.c7f404"]]},{"id":"c140681b.2b13c8","type":"ui_table","z":"846d7832.3348c8","group":"13b35473.20565c","name":"","order":0,"width":"6","height":"4","columns":[{"field":"title","title":"title","width":"25%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"test","title":"colour","width":"25%","align":"left","formatter":"color","formatterParams":{"target":"_blank"}},{"field":"rest","title":"words","width":"50%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":490,"y":620,"wires":[["e5c1e113.bdf3e","446a5b9b.703374"]]},{"id":"446a5b9b.703374","type":"function","z":"846d7832.3348c8","name":"","func":"\nvar m = { payload: {\n    \"command\":\"deselectRow\",\n    \"arguments\":[ context.get(\"oldrow\") || 0 ],\n    \"returnPromise\":false\n}};\nmsg.payload={\n    \"command\":\"selectRow\",\n    \"arguments\":[msg.row],\n    \"returnPromise\":false\n}\ncontext.set(\"oldrow\",msg.row);\nreturn [[m,msg]];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":500,"y":680,"wires":[["c140681b.2b13c8","905be523.cecbb8"]]},{"id":"e5c1e113.bdf3e","type":"debug","z":"846d7832.3348c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":650,"y":620,"wires":[]},{"id":"6c5dbc15.6c1e04","type":"ui_template","z":"846d7832.3348c8","group":"13b35473.20565c","name":"","order":1,"width":0,"height":0,"format":"<style>\n.tabulator-row.tabulator-selected {\n\tbackground: #eaa !important;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":300,"y":580,"wires":[[]]},{"id":"13b35473.20565c","type":"ui_group","z":"","name":"Default","tab":"de4df751.046f08","order":3,"disp":false,"width":"6","collapse":false},{"id":"de4df751.046f08","type":"ui_tab","z":"","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]
5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.