Ui-table with custom colors

Dashboard
1

Hi there, i have an dashbord with some datas from as/400 - works fine. In some cases i will color a cell in red or green, but i have no idea, how this could work. I have search for resolution in forums with no crucial note. The goal is to color the last column.

here is my flow:

[{"id":"1f5d8903.5cdef7","type":"DB2 for i","z":"1881f69b.592019","mydb":"9a3f5153.5dafc","name":"Local","arraymode":true,"x":610,"y":300,"wires":[["1d2877c4.98b4b8"]]},{"id":"e3af6e19.35e7e","type":"function","z":"1881f69b.592019","name":"Lesen activeJobs","func":"msg.payload = \"SELECT SUBSYSTEM, JOB_NAME, AUTHORIZATION_NAME, FUNCTION_TYPE, FUNCTION, JOB_STATUS FROM TABLE (QSYS2.ACTIVE_JOB_INFO(DETAILED_INFO => 'NONE')) X WHERE JOB_STATUS = 'MSGW'\";\n\nreturn msg;\n","outputs":1,"noerr":0,"x":410,"y":300,"wires":[["1f5d8903.5cdef7"]]},{"id":"1d2877c4.98b4b8","type":"ui_etable","z":"1881f69b.592019","payload":"[{\"title\":\"Subsystem\",\"field\":\"SUBSYSTEM\",\"width\":\"15%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false},{\"title\":\"Jobname\",\"field\":\"JOB_NAME\",\"width\":\"25%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false},{\"title\":\"Benutzer\",\"field\":\"AUTHORIZATION_NAME\",\"width\":\"15%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false},{\"title\":\"Funktion Typ\",\"field\":\"FUNCTION_TYPE\",\"width\":\"15%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false},{\"title\":\"Funktion\",\"field\":\"FUNCTION\",\"width\":\"15%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false},{\"title\":\"Status\",\"field\":\"JOB_STATUS\",\"width\":\"13%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false,\"formatter\":\"function(row){node.warn(row.getData());if(row.getData() == (\\\"MSGW\\\")){ row.getElement().style.backgroundColor = \\\"#ff0000\\\"; }else{row.getElement().style.backgroundColor = \\\"\\\";}; }\"}]","payloadType":"json","options":"{\"movableColumns\":true,\"layout\":\"fitColumns\",\"height\":\"500px\",\"responsiveLayout\":\"collapse\",\"autoResize\":true,\"resizableColumns\":true}","group":"2eaac407.20beec","name":"Jobs in MSGW","order":1,"width":"20","height":"5","columns":[],"outputs":1,"cts":false,"x":840,"y":300,"wires":[["fd4fa4c6.a207f8"]]},{"id":"9e96aac0.850208","type":"inject","z":"1881f69b.592019","name":"","topic":"Jobs in MSGW","payload":"","payloadType":"str","repeat":"30","crontab":"","once":true,"onceDelay":0.1,"x":170,"y":300,"wires":[["e3af6e19.35e7e"]]},{"id":"7c564f7a.644a3","type":"ui_ui_control","z":"1881f69b.592019","name":"ui start","events":"all","x":210,"y":220,"wires":[["e3af6e19.35e7e"]]},{"id":"fd4fa4c6.a207f8","type":"debug","z":"1881f69b.592019","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1090,"y":300,"wires":[]},{"id":"9a3f5153.5dafc","type":"DB2 for i Config","z":"","cnnname":"Local","db":"*LOCAL","keepalive":false},{"id":"2eaac407.20beec","type":"ui_group","z":"","name":"Test","tab":"471ad565.a82f0c","order":7,"disp":true,"width":"20","collapse":false},{"id":"471ad565.a82f0c","type":"ui_tab","z":"","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]

Admin Edit: wrap flow with three backticks

2

Have you tried the built in demos?

CTRL+I → Examples

image
image625Ă—531 13.6 KB

3

Hi steve, thanks for the response. Yes , i have tried all of the examples, but nothing of them matched.

4

Is there a solution now?

5

Yes it is possible. The solution depends on how you like to trigger the colour change.
But as far a I know you have to write your own formatter call-back function by passing it in an msg.ui_control message. This is described in example 3 and the readme.

In the example the callback function adds the unit each value:

function(cell, formatterParams, onRendered){
  return cell.getValue()+"°C";
}

if you add for example an indicator for temperatures >=30°C it should look like this:

function(cell, formatterParams, onRendered){
  var temp = cell.getValue();
  if(temp >= 30){
    cell.getElement().css({"background":"red"});
  }
  return temp+"°C";
}

Node: Not tested. Followed the post here

Hope this helps
Chris

6

it's at least a partial success. The cell contents can be changed, but .css color setting don't work.

7

So, after some hard hours i have the solution: it's a formatter function, which sets the cell.getElement().style.backgroundColor.
Here is the flow:

[{"id":"6e8312e0.2cba2c","type":"change","z":"1881f69b.592019","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"columns\":[{\"title\":\"Subsystem\",\"field\":\"SUBSYSTEM\",\"width\":100,\"align\":\"left\"},{\"title\":\"Jobname\",\"field\":\"JOB_NAME\",\"width\":200,\"align\":\"left\"},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Jobstatus\",\"field\":\"JOB_STATUS\",\"width\":100,\"align\":\"left\",\"color\":\"ff0000\",\"formatter\":\"function(cell, formatterParams, onRendered) {var status = cell.getValue(); if(status == 'MSGW') {cell.getElement().style.backgroundColor=\\\"#ff0000\\\";}else{cell.getElement().style.backgroundColor=\\\"#39ff14\\\";} return status;}\"}],\"layout\":\"fitColumns\",\"movableColumns\":true,\"groupBy\":\"\"}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":300,"wires":[["fd4fa4c6.a207f8","33d0f556.d2b41a"]]}]
4 Likes
8

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