Send out data from template table

Dashboard
1

Hello,

could it be possible to send out data from my template node?
I've build a table with some basic data and I'm trying to send out the data on a button click.
I'll include the json for the table template (I do hope this is allowed).
I've got everything ot work except for sending out data.
I'm quite new to this forum so I do hope I'm not breaking any rules.
Thanks in advance for your help.

[
    {
        "id": "48e19b07d2787ea9",
        "type": "ui-template",
        "z": "8061b32606ba62ec",
        "group": "06f2aed78fdc64fd",
        "page": "",
        "ui": "",
        "name": "",
        "order": 4,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n    <div id=\"app\">\n        <v-data-table \n            :headers=\"headers\" \n            :items=\"msg.payload\" \n            class=\"elevation-1\" \n            hide-default-footer>\n            \n            <template v-slot:item.status=\"{ item }\">\n                <div style=\"display: flex; align-items: center;\">\n                    <v-icon\n                        v-if=\"item.status === 'OK'\"\n                        color=\"green\"\n                        class=\"mr-2\"\n                    >mdi-check-circle</v-icon>\n                    <v-icon\n                        v-if=\"item.status === 'NOK'\"\n                        color=\"red\"\n                        class=\"mr-2\"\n                    >mdi-close-circle</v-icon>\n                    <v-switch\n                        v-model=\"item.status\"\n                        inset\n                        :label=\"item.status === 'OK' ? 'OK' : 'NOK'\"\n                        :value=\"item.status === 'OK'\"\n                        false-value=\"NOK\"\n                        true-value=\"OK\"\n                        @change=\"updateStatus(item)\">\n                    </v-switch>\n                </div>\n            </template>\n        </v-data-table>\n        \n        <!-- Toegevoegde knop -->\n        <v-btn @click=\"sendAllDataAndSetToNOK\" color=\"primary\" class=\"mt-3\">\n            Send All Data & Set to NOK\n        </v-btn>\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            headers: [\n                { title: 'Step', key: 'step' },\n                { title: 'Object', key: 'object' },\n                { title: 'Task', key: 'task' },\n                { title: 'Status', key: 'status' }\n            ],\n            msg: {\n                payload: [\n                    {\n                        \"step\": 1,\n                        \"object\": \"Wooden Beam\",\n                        \"task\": \"Look for the 4 screws.\",\n                        \"status\": \"OK\"\n                    },\n                    {\n                        \"step\": 2,\n                        \"object\": \"Metal Plate\",\n                        \"task\": \"Has the plate been aligned well?\",\n                        \"status\": \"NOK\"\n                    },\n                    {\n                        \"step\": 3,\n                        \"object\": \"Drill\",\n                        \"task\": \"Inspect the 6 drill holes.\",\n                        \"status\": \"OK\"\n                    },\n                    {\n                        \"step\": 4,\n                        \"object\": \"Screws\",\n                        \"task\": \"How has the beam been sawed off?\",\n                        \"status\": \"NOK\"\n                    },\n                    {\n                        \"step\": 5,\n                        \"object\": \"Wrench\",\n                        \"task\": \"Check tightness of the screws\",\n                        \"status\": \"OK\"\n                    }\n                ]\n            }\n        };\n    },\n    methods: {\n        updateStatus(item) {\n            console.log(`Step ${item.step} status changed to: ${item.status}`);\n        },\n        sendAllDataAndSetToNOK() {\n            this.msg.payload.forEach(item => {\n                item.status = \"NOK\";\n            });\n\n            let dataToSend = { payload: this.msg.payload };\n            this.$emit('output', dataToSend); // Dit stuurt het bericht naar Node-RED\n            console.log(\"All data sent and all statuses set to NOK\", dataToSend);\n        }\n    }\n};\n</script>\n\n<style>\n.v-data-table .v-data-table__wrapper tr {\n    transition: background-color 0.3s ease;\n}\n</style>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 420,
        "y": 40,
        "wires": [
            [
                "3fe4dd92292a112e"
            ]
        ]
    },
    {
        "id": "06f2aed78fdc64fd",
        "type": "ui-group",
        "name": "Quality Control",
        "page": "edaf6a0dc7dc2a5f",
        "width": "14",
        "height": "1",
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "edaf6a0dc7dc2a5f",
        "type": "ui-page",
        "name": "QC",
        "ui": "5cca096f6dc1eedd",
        "path": "/QC",
        "icon": "mdi mdi-check-decagram-outline",
        "layout": "grid",
        "theme": "0597569a149022b6",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 4,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "5cca096f6dc1eedd",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "fixed",
        "titleBarStyle": "fixed"
    },
    {
        "id": "0597569a149022b6",
        "type": "ui-theme",
        "name": "Vlegel",
        "colors": {
            "surface": "#156873",
            "primary": "#e0e5e5",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "10px",
            "groupBorderRadius": "4px",
            "widgetGap": "10px"
        }
    }
]
2

It's documented here: Template ui-template | Node-RED Dashboard 2.0

3

Just be careful, when you do this.send(), that you are using the right this. (for example: when sending from within a function property, it has its own this.
What I typically do is save the 'base' this into a variable, e.g.:

mounted()  {
const vThis = this;
...
    this.$socket.on('msg-input:' + this.id, function(msg)
    {
        vThis.send(someMsg); // 'this' is different here
    });
4

Or use the fat arrow function to avoid this issue

mounted()  {
    this.$socket.on('msg-input:' + this.id, (msg) => {
        this.send(someMsg); // 'this' is the component
    });
1 Like
5

I just looked a little closer and realised your snippet sends a message immediately upon receiving a message. This will cause a loop that will slow the user's dashboard down to a crawl.

I'm pretty sure it's not intentional and it's not what you're actually doing in your code and that it was for demonstration purposes only but I thought I'd best point it out just in case.

6

thank you for your help, I've got it to work. Wasn't that hard, but it took me some time to get used to dashboard 2.0. I've been using dashboard 1 up unitl monday

1 Like
7

Thanks Steve. Of course, that's not real code, I just scribbled something quickly to point out the 'this' issue. And thank you for your comment about the fat arrow. I actually learned something new here.

Maybe I'm old school, but I like to play it safe and not have to evaluate every this...I noticed that in many places in the core Node-RED code, they are saving this into a variable called that for the same reason.