Hello I am new to Node-Red. I am trying to custumize a ui-table and to achieve a headerMenu, to filter which columns can be seen.
I read on this website how to do it, but I cannot figure out how to implement it correctly.
Here is my Flow. Data is coming from sql, then I used a change node.
[
{
"id": "0462cda555a23660",
"type": "inject",
"z": "65ddc440a6f085cf",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 100,
"y": 220,
"wires": [
[
"f3a45bd3923ea5c1"
]
]
},
{
"id": "71a843907371d43a",
"type": "mysql",
"z": "65ddc440a6f085cf",
"mydb": "40d481094a54179f",
"name": "ssds",
"x": 470,
"y": 220,
"wires": [
[
"e58211d106b54b06",
"83e8f15cf44b7f83"
]
]
},
{
"id": "f3a45bd3923ea5c1",
"type": "function",
"z": "65ddc440a6f085cf",
"name": "",
"func": "\nmsg.topic= \"SELECT id, d_guid, wf_process,wf_step, wf_step_status, wf_source_xml FROM workflow WHERE wf_source_xml IS NOT NULL;\";\n\nreturn msg;\n\n\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 280,
"y": 220,
"wires": [
[
"71a843907371d43a"
]
]
},
{
"id": "580c9efa8ec2d509",
"type": "ui_table",
"z": "65ddc440a6f085cf",
"group": "db8cd67a93390f91",
"name": "SSDS Alles",
"order": 1,
"width": 14,
"height": "3",
"columns": [],
"outputs": 1,
"cts": true,
"x": 890,
"y": 220,
"wires": [
[
"55e2a39a1de6bdd2"
]
]
},
{
"id": "55e2a39a1de6bdd2",
"type": "debug",
"z": "65ddc440a6f085cf",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 890,
"y": 280,
"wires": []
},
{
"id": "e58211d106b54b06",
"type": "debug",
"z": "65ddc440a6f085cf",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 490,
"y": 280,
"wires": []
},
{
"id": "83e8f15cf44b7f83",
"type": "change",
"z": "65ddc440a6f085cf",
"name": "CSS fürs Dashboard",
"rules": [
{
"t": "set",
"p": "ui_control",
"pt": "msg",
"to": "{\"tabulator\":{\"command\":\"headerMenu\",\"columns\":[{\"title\":\"id\",\"field\":\"id\",\"align\":\"center\",\"formatter\":\"text\",\"width\":80,\"headerMenu\":\"headerMenu\",\"layout\":\"fitData\"},{\"title\":\"d_guid\",\"field\":\"d_guid\",\"headerMenu\":\"headerMenu\"},{\"title\":\"wf_process\",\"field\":\"wf_process\",\"editor\":\"select\",\"editorParams\":{\"values\":[\"Postverteilung\",\"Rechnungsprüfung\"]},\"align\":\"center\",\"formatter\":\"text\",\"width\":200,\"headerMenu\":\"headerMenu\",\"layout\":\"fitData\"},{\"title\":\"wf_step\",\"field\":\"wf_step\",\"editorParams\":{\"values\":[\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\"]},\"align\":\"center\",\"formatter\":\"text\",\"width\":80,\"editor\":\"select\",\"headerMenu\":\"headerMenu\",\"layout\":\"fitData\"},{\"title\":\"wf_step_status\",\"field\":\"wf_step_status\",\"editorParams\":{\"values\":[\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\"]},\"align\":\"center\",\"formatter\":\"progress\",\"width\":80,\"editor\":\"select\",\"layout\":\"fitData\",\"headerMenu\":\"headerMenu\"},{\"title\":\"wf_source_xml\",\"field\":\"wf_source_xml\",\"align\":\"center\",\"width\":150,\"editor\":\"input\",\"layout\":\"fitData\",\"headerMenu\":\"headerMenu\"}]}}",
"tot": "json"
},
{
"t": "set",
"p": "ui_control.tabulator.headerMenu",
"pt": "msg",
"to": "function(columns){ this.send({ui_control: {'callback':'headerMenu'}}); var menu = []; var columns = this.getColumns(); for(let column of columns){ let icon = document.createElement(\"i\"); icon.classList.add(\"fas\"); icon.classList.add(column.isVisible() ? \"fa-check-square\" : \"fa-square\"); let label = document.createElement(\"span\"); let title = document.createElement(\"span\"); title.textContent = \" \" + column.getDefinition().title; label.appendChild(icon); label.appendChild(title); menu.push({label:label,action:function(e){ e.stopPropagation(); column.toggle(); if(column.isVisible()){ icon.classList.remove(\"fa-square\"); icon.classList.add(\"fa-check-square\"); }else{ icon.classList.remove(\"fa-check-square\"); icon.classList.add(\"fa-square\"); } } }); } return menu; };",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 680,
"y": 220,
"wires": [
[
"580c9efa8ec2d509"
]
]
},
{
"id": "40d481094a54179f",
"type": "MySQLdatabase",
"name": "",
"host": "127.0.0.1",
"port": "3306",
"db": "ssds",
"tz": "",
"charset": "UTF8"
},
{
"id": "db8cd67a93390f91",
"type": "ui_group",
"name": "Datenbank Alles",
"tab": "7b1a4975f9ab14cf",
"order": 2,
"disp": true,
"width": "14",
"collapse": false,
"className": ""
},
{
"id": "7b1a4975f9ab14cf",
"type": "ui_tab",
"name": "Datenbank SSDS",
"icon": "fa-user-circle fa-2x",
"disabled": false,
"hidden": false
}
]
