Modify database table

Dashboard
1

Hello.

I'm trying to use Dashboard 2 to modify data table. I have array of objects. Using table node, it shows data correctly.

What I want now is way to modify, delete or add one row. I can't find a suitable way to implement this.

I tryed to spilt data what comes from table to text , but it just creates one text input, but it just creates one text input.

[
    {
        "id": "6318d358c35cb96c",
        "type": "inject",
        "z": "f4e91fc1157ba250",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"age\":\"30\",\"email\":\"john@example.com\",\"name\":\"John Doe\"},{\"age\":\"2\",\"email\":\"mäyrä@puuta.com\",\"name\":\"Matti Mäyrä\"}]",
        "payloadType": "json",
        "x": 230,
        "y": 180,
        "wires": [
            [
                "7a99fb6c0cf9a8ba"
            ]
        ]
    },
    {
        "id": "7a99fb6c0cf9a8ba",
        "type": "ui-table",
        "z": "f4e91fc1157ba250",
        "group": "08b7ab3ba99f1b59",
        "name": "",
        "label": "text",
        "order": 1,
        "width": 0,
        "height": 0,
        "maxrows": 0,
        "passthru": false,
        "autocols": true,
        "selectionType": "click",
        "columns": [],
        "x": 390,
        "y": 180,
        "wires": [
            [
                "e6f8a62b657f2fad"
            ]
        ]
    },
    {
        "id": "e6f8a62b657f2fad",
        "type": "split",
        "z": "f4e91fc1157ba250",
        "name": "",
        "splt": "\\n",
        "spltType": "str",
        "arraySplt": 1,
        "arraySpltType": "len",
        "stream": false,
        "addname": "",
        "x": 550,
        "y": 180,
        "wires": [
            [
                "811d33cb1c80b798"
            ]
        ]
    },
    {
        "id": "811d33cb1c80b798",
        "type": "ui-text-input",
        "z": "f4e91fc1157ba250",
        "group": "08b7ab3ba99f1b59",
        "name": "",
        "label": "text",
        "order": 0,
        "width": 0,
        "height": 0,
        "topic": "topic",
        "topicType": "msg",
        "mode": "text",
        "delay": 300,
        "passthru": false,
        "sendOnDelay": false,
        "sendOnBlur": true,
        "sendOnEnter": true,
        "className": "",
        "x": 730,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "08b7ab3ba99f1b59",
        "type": "ui-group",
        "name": "SoilScout_GroupMAPs",
        "page": "ba5c4163cb3524c6",
        "width": "12",
        "height": "3",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "ba5c4163cb3524c6",
        "type": "ui-page",
        "name": "SoilScout",
        "ui": "f731607ac0ba6874",
        "path": "",
        "icon": "home",
        "layout": "grid",
        "theme": "7a043fbb81327bca",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f731607ac0ba6874",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "7a043fbb81327bca",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

I tryed to create all kinds of form html templates, if I can create input fields, submit button does not work.

But there must be real, and good way to just edit row in ui-table?

2

Hi Ilkka

I am not familiar with the ui-table node but I have use cases where I do the sort of thing you describe using the ui-template node.

I'm not sure if you are open to using the ui-template node but if you are interested I have provided an example to get you started.

I have modified your sample flow to add a very crude example of a ui-template node that displays your data without any formatting.

Data fields can be edited in place. There are buttons for adding a new row as well as for deleting a row and reordering the rows.

The save button sends the entire array as the payload in an outgoing message.
The output is fed back as input to allow iterative editing.

[
    {
        "id": "6318d358c35cb96c",
        "type": "inject",
        "z": "28d25130b6a3d10b",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": "1",
        "topic": "",
        "payload": "[{\"age\":\"30\",\"email\":\"john@example.com\",\"name\":\"John Doe\"},{\"age\":\"2\",\"email\":\"mäyrä@puuta.com\",\"name\":\"Matti Mäyrä\"}]",
        "payloadType": "json",
        "x": 147.0994415283203,
        "y": 166.09091186523438,
        "wires": [
            [
                "6f7d688e561fe261"
            ]
        ]
    },
    {
        "id": "7a99fb6c0cf9a8ba",
        "type": "ui-table",
        "z": "28d25130b6a3d10b",
        "group": "08b7ab3ba99f1b59",
        "name": "",
        "label": "text",
        "order": 1,
        "width": 0,
        "height": 0,
        "maxrows": 0,
        "passthru": false,
        "autocols": true,
        "selectionType": "click",
        "columns": [],
        "x": 307.0994415283203,
        "y": 166.09091186523438,
        "wires": [
            [
                "e6f8a62b657f2fad"
            ]
        ]
    },
    {
        "id": "e6f8a62b657f2fad",
        "type": "split",
        "z": "28d25130b6a3d10b",
        "name": "",
        "splt": "\\n",
        "spltType": "str",
        "arraySplt": 1,
        "arraySpltType": "len",
        "stream": false,
        "addname": "",
        "x": 467.0994415283203,
        "y": 166.09091186523438,
        "wires": [
            [
                "811d33cb1c80b798"
            ]
        ]
    },
    {
        "id": "811d33cb1c80b798",
        "type": "ui-text-input",
        "z": "28d25130b6a3d10b",
        "group": "08b7ab3ba99f1b59",
        "name": "",
        "label": "text",
        "order": 0,
        "width": 0,
        "height": 0,
        "topic": "topic",
        "topicType": "msg",
        "mode": "text",
        "delay": 300,
        "passthru": false,
        "sendOnDelay": false,
        "sendOnBlur": true,
        "sendOnEnter": true,
        "className": "",
        "x": 647.0994415283203,
        "y": 166.09091186523438,
        "wires": [
            []
        ]
    },
    {
        "id": "a2dc17c70773142e",
        "type": "ui-template",
        "z": "28d25130b6a3d10b",
        "group": "08b7ab3ba99f1b59",
        "page": "",
        "ui": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n    <div id=\"my-list\" >\n    <div><label for=\"my-list\">list</label></div>\n    <table>\n        <tr><th>age</th><th>email</th><th>name</th></tr>\n        <tbody>\n            <tr v-for=\"(item, index) in payload\" :key=\"index\">\n                <td><input type=\"text\"  v-model=\"item.age\" ></td>\n                <td><input type=\"text\"  v-model=\"item.email\" ></td>\n                <td><input type=\"text\"  v-model=\"item.name\" ></td>\n                <td><v-btn @click.prevent=\"deleteItem(index)\">x</v-btn></td>\n                <td><v-btn v-if=\"index>0\" @click.prevent=\"raiseItem(index)\">^</v-btn></td>\n            </tr>\n        </tbody>\n    </table>\n    <form>\n        <v-btn  @click.prevent=\"addItem()\">Add Item</v-btn>\n        <v-btn  @click.prevent=\"save()\">Save</v-btn>\n    </form>\n</div>\n</template>\n\n<script>\n    export default {\n        data() {\n            // define variables available component-wide\n            // (in <template> and component functions)\n            return {\n                payload: {}\n            }\n        },\n        watch: {\n            // \n        },\n        computed: {\n            // automatically compute this variable\n            // whenever VueJS deems appropriate\n        },\n        methods: {\n            // expose a method to our <template> and Vue Application\n            save: function () {\n                this.send({payload: this.payload})\n            },\n            addItem: function () {\n                this.payload.push({})\n            },\n            raiseItem: function (index) {\n                ;[this.payload[index],this.payload[index-1]]=\n                [this.payload[index-1],this.payload[index]]\n            },\n            deleteItem: function (index) {\n                this.payload.splice(index,1)\n            }\n        },\n        mounted() {\n            // code here when the component is first loaded\n            // set up a listener for incoming messages\n            this.$socket.on(\"msg-input:\" + this.id, (msg) => {\n            this.payload = msg.payload;\n            })\n        },\n        unmounted() {\n            // code here when the component is removed from the Dashboard\n            // i.e. when the user navigates away from the page\n        }\n    }\n\n    \n</script>\n<style>\n    /* define any styles here - supports raw CSS */\n</style>",
        "storeOutMessages": true,
        "passthru": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 329.4517478942871,
        "y": 293.1804141998291,
        "wires": [
            [
                "6861b2149c4e23ec",
                "3b04218e37a47158"
            ]
        ]
    },
    {
        "id": "6861b2149c4e23ec",
        "type": "debug",
        "z": "28d25130b6a3d10b",
        "name": "debug 260",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 502.46302032470703,
        "y": 291.30254554748535,
        "wires": []
    },
    {
        "id": "3b04218e37a47158",
        "type": "delay",
        "z": "28d25130b6a3d10b",
        "name": "",
        "pauseType": "delay",
        "timeout": "1",
        "timeoutUnits": "seconds",
        "rate": "1",
        "nbRateUnits": "1",
        "rateUnits": "second",
        "randomFirst": "1",
        "randomLast": "5",
        "randomUnits": "seconds",
        "drop": false,
        "allowrate": false,
        "outputs": 1,
        "x": 137.4630355834961,
        "y": 250.33666610717773,
        "wires": [
            [
                "6f7d688e561fe261"
            ]
        ]
    },
    {
        "id": "6f7d688e561fe261",
        "type": "junction",
        "z": "28d25130b6a3d10b",
        "x": 230,
        "y": 198,
        "wires": [
            [
                "7a99fb6c0cf9a8ba",
                "a2dc17c70773142e"
            ]
        ]
    },
    {
        "id": "08b7ab3ba99f1b59",
        "type": "ui-group",
        "name": "SoilScout_GroupMAPs",
        "page": "ba5c4163cb3524c6",
        "width": "12",
        "height": "3",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "ba5c4163cb3524c6",
        "type": "ui-page",
        "name": "SoilScout",
        "ui": "e0b25391ffd62b23",
        "path": "",
        "icon": "home",
        "layout": "grid",
        "theme": "7a043fbb81327bca",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "e0b25391ffd62b23",
        "type": "ui-base",
        "name": "myDB2",
        "path": "/dashboard",
        "showPathInSidebar": false
    },
    {
        "id": "7a043fbb81327bca",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
3

Add the tag Dashboard-2 to your post so that those interested in dashboard 2 will be more likely to see it.

4

Thanks of reply, but seems that I do not have clue how to add that after post is posted :see_no_evil:

5

Thanks, how ever this was not realy what I trying to do.

6

I solved this by like this. This just feels too complex way to do this.

image
image1484×500 57.3 KB

[
    {
        "id": "4c5966e7b36cc6b3",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "a1c890c2a8993c19",
        "type": "inject",
        "z": "4c5966e7b36cc6b3",
        "name": "Read data from DB / somewhere",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"id\":1,\"name\":\"Billy Bob\",\"age\":12},{\"id\":2,\"name\":\"Jenny Jane\",\"age\":42},{\"id\":3,\"name\":\"Steve McAlistaire\",\"age\":35}]",
        "payloadType": "json",
        "x": 180,
        "y": 60,
        "wires": [
            [
                "11562c18cd28cd4c"
            ]
        ]
    },
    {
        "id": "11562c18cd28cd4c",
        "type": "ui-table",
        "z": "4c5966e7b36cc6b3",
        "group": "b5f99d2c9e81e01b",
        "name": "",
        "label": "text",
        "order": 0,
        "width": 0,
        "height": 0,
        "maxrows": 0,
        "passthru": false,
        "autocols": true,
        "selectionType": "click",
        "columns": [],
        "x": 270,
        "y": 160,
        "wires": [
            [
                "c8b4042d4f255563",
                "b947d925377b0a3b",
                "2bd3e5110f81dc6f"
            ]
        ],
        "outputLabels": [
            "data"
        ]
    },
    {
        "id": "2cd51fc8afcc7cfb",
        "type": "ui-text-input",
        "z": "4c5966e7b36cc6b3",
        "group": "b5f99d2c9e81e01b",
        "name": "",
        "label": "Name",
        "order": 0,
        "width": "3",
        "height": "1",
        "topic": "Nimi",
        "topicType": "str",
        "mode": "text",
        "delay": 300,
        "passthru": true,
        "sendOnDelay": false,
        "sendOnBlur": true,
        "sendOnEnter": true,
        "className": "",
        "x": 630,
        "y": 100,
        "wires": [
            [
                "c53b982489f30833"
            ]
        ],
        "info": "kissa"
    },
    {
        "id": "c3f540b13c0711d0",
        "type": "ui-text-input",
        "z": "4c5966e7b36cc6b3",
        "group": "b5f99d2c9e81e01b",
        "name": "",
        "label": "Age",
        "order": 0,
        "width": "1",
        "height": "1",
        "topic": "topic",
        "topicType": "msg",
        "mode": "number",
        "delay": 300,
        "passthru": true,
        "sendOnDelay": false,
        "sendOnBlur": true,
        "sendOnEnter": true,
        "className": "",
        "x": 630,
        "y": 160,
        "wires": [
            [
                "0f4dc79692a57694"
            ]
        ]
    },
    {
        "id": "c8b4042d4f255563",
        "type": "change",
        "z": "4c5966e7b36cc6b3",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "payload.name",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "name",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 460,
        "y": 100,
        "wires": [
            [
                "2cd51fc8afcc7cfb"
            ]
        ]
    },
    {
        "id": "b947d925377b0a3b",
        "type": "change",
        "z": "4c5966e7b36cc6b3",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "payload.age",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "age",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 460,
        "y": 160,
        "wires": [
            [
                "c3f540b13c0711d0"
            ]
        ]
    },
    {
        "id": "04023a0afed34527",
        "type": "debug",
        "z": "4c5966e7b36cc6b3",
        "name": "\"Save data to DB / Whatever\"",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 500,
        "y": 320,
        "wires": []
    },
    {
        "id": "37337c7cd8d3a866",
        "type": "ui-button",
        "z": "4c5966e7b36cc6b3",
        "group": "b5f99d2c9e81e01b",
        "name": "",
        "label": "Save",
        "order": 0,
        "width": "2",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "right",
        "payload": "datarow",
        "payloadType": "flow",
        "topic": "Save",
        "topicType": "str",
        "x": 270,
        "y": 320,
        "wires": [
            [
                "04023a0afed34527"
            ]
        ]
    },
    {
        "id": "c53b982489f30833",
        "type": "change",
        "z": "4c5966e7b36cc6b3",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "datarow.name",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 820,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "0f4dc79692a57694",
        "type": "change",
        "z": "4c5966e7b36cc6b3",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "datarow.age",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 820,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "2bd3e5110f81dc6f",
        "type": "change",
        "z": "4c5966e7b36cc6b3",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "payload.id",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "id",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 460,
        "y": 220,
        "wires": [
            [
                "786b6d756dea4865"
            ]
        ]
    },
    {
        "id": "786b6d756dea4865",
        "type": "change",
        "z": "4c5966e7b36cc6b3",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "datarow.id",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 810,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "b5f99d2c9e81e01b",
        "type": "ui-group",
        "name": "Group Name 2",
        "page": "a8ec6c7abd399fa6",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "a8ec6c7abd399fa6",
        "type": "ui-page",
        "name": "Page Name",
        "ui": "4edbb771d78a9b9a",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "5a23c2a79f71bfbd",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "4edbb771d78a9b9a",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "5a23c2a79f71bfbd",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
7

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