# Dashboard 2 - Socket emit from ui-template

**URL:** <https://discourse.nodered.org/t/dashboard-2-socket-emit-from-ui-template/86051>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [1 March 2024 10:42 UTC](https://discourse.nodered.org/t/dashboard-2-socket-emit-from-ui-template/86051 "2024-03-01T10:42:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![douchebagraccoon](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@douchebagraccoon](https://discourse.nodered.org/u/douchebagraccoon)\
**Post date:** [1 March 2024 10:42 UTC](https://discourse.nodered.org/t/dashboard-2-socket-emit-from-ui-template/86051/1 "2024-03-01T10:42:08Z")

</div>

Hello everyone !

In a D2 ui-template node, I created a button that opens a dialog containing two sliders and a switch ; I managed to dynamically change the slider values with two inject nodes, but when I change the slider values from the dashboard, I can't get their values out and into a debug node.

I'm having trouble with the " this.$socket.emit " I think, am I using it wrong ? (Sorry if this is a dumb question)

 ![Image1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6f73e25a54999220a712edd210373318547ccb13.jpeg)

```auto
[
    {
        "id": "cb52285651c139ca",
        "type": "ui-template",
        "z": "4e58b6fb.8aa1b",
        "group": "099be5983fda69d4",
        "page": "",
        "ui": "",
        "name": "Bouton magasin",
        "order": 0,
        "width": "6",
        "height": "1",
        "head": "",
        "format": "<template>\n <div>\n <v-btn\n :class=\"buttonClass\"\n @click=\"showDialog = true\"\n >Référence AAA</v-btn>\n\n <v-dialog v-model=\"showDialog\" max-width=\"600px\">\n <v-card>\n <v-card-title class=\"text-h5\">Référence AAA</v-card-title>\n <v-card-text>\n <v-row>\n <v-col cols=\"6\">\n <div>Gauche : {{ gaucheValue }}</div>\n <v-slider\n v-model=\"gaucheValue\"\n thumb-label=\"always\"\n step=\"1\"\n min=\"0\"\n max=\"2\"\n @change=\"sendValue('gauche', gaucheValue)\"\n ></v-slider>\n </v-col>\n <v-col cols=\"6\">\n <div>Droite : {{ droiteValue }}</div>\n <v-slider\n v-model=\"droiteValue\"\n thumb-label=\"always\"\n step=\"1\"\n min=\"0\"\n max=\"2\"\n @change=\"sendValue('droite', droiteValue)\"\n ></v-slider>\n </v-col>\n </v-row>\n <v-row>\n <v-col cols=\"12\">\n <v-switch\n v-model=\"ruptureSwitch\"\n label=\"Rupture\"\n @change=\"sendValue('rupture', ruptureSwitch)\"\n ></v-switch>\n </v-col>\n </v-row>\n </v-card-text>\n <v-card-actions>\n <v-btn color=\"blue darken-1\" text @click=\"showDialog = false\">Close</v-btn>\n </v-card-actions>\n </v-card>\n </v-dialog>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n showDialog: false,\n gaucheValue: 1,\n droiteValue: 1,\n ruptureSwitch: false,\n state: '', // Initial state\n };\n },\n computed: {\n buttonClass() {\n if (this.ruptureSwitch && this.gaucheValue + this.droiteValue === 0) {\n return 'greydisabled';\n } else if (!this.ruptureSwitch && this.gaucheValue + this.droiteValue === 0) {\n return 'red';\n } else if (this.ruptureSwitch) {\n return 'grey';\n } else {\n return 'green';\n }\n },\n },\n mounted() {\n this.$socket.on(\"msg-input:\" + this.id, (msg) => {\n this.gaucheValue = msg.gauche || this.gaucheValue;\n this.droiteValue = msg.droite || this.droiteValue;\n });\n },\n methods: {\n sendValue(type, value) {\n this.$socket.emit(\"msg-output\", { topic: type, payload: value });\n },\n },\n};\n</script>\n\n<style>\n.greydisabled {\n // pointer-events: none;\n background-color: grey;\n color: black;\n}\n\n.grey {\n background-color: grey;\n color: black;\n}\n\n.green {\n background-color: #55aa73;\n color: black;\n}\n\n.red {\n // pointer-events: none;\n background-color: #e14c42;\n color: black;\n}\n\n.switch {\n color: black;\n font-size: 1.3em;\n}\n</style>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 360,
        "y": 1260,
        "wires": [
            [
                "799c9583a4639b69"
            ]
        ]
    },
    {
        "id": "24692592e592a3ec",
        "type": "inject",
        "z": "4e58b6fb.8aa1b",
        "name": "gauche 2",
        "props": [
            {
                "p": "gauche",
                "v": "2",
                "vt": "num"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 180,
        "y": 1260,
        "wires": [
            [
                "cb52285651c139ca"
            ]
        ]
    },
    {
        "id": "1840fea357e8c84a",
        "type": "inject",
        "z": "4e58b6fb.8aa1b",
        "name": "droite 2",
        "props": [
            {
                "p": "droite",
                "v": "2",
                "vt": "num"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 190,
        "y": 1300,
        "wires": [
            [
                "cb52285651c139ca"
            ]
        ]
    },
    {
        "id": "799c9583a4639b69",
        "type": "debug",
        "z": "4e58b6fb.8aa1b",
        "name": "debug 371",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 530,
        "y": 1260,
        "wires": []
    },
    {
        "id": "099be5983fda69d4",
        "type": "ui-group",
        "name": "Référence XXX",
        "page": "f7c84ba6694cf8fd",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "cxxx",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f7c84ba6694cf8fd",
        "type": "ui-page",
        "name": "MAG",
        "ui": "f4139e7488bf5f07",
        "path": "/MAG",
        "icon": "home",
        "layout": "grid",
        "theme": "684392cc1527bd04",
        "order": 2,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f4139e7488bf5f07",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false
    },
    {
        "id": "684392cc1527bd04",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#7d7d7d",
            "primary": "#0094ce",
            "bgPage": "#a3a3a3",
            "groupBg": "#dedede",
            "groupOutline": "#dedede"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

Thanks in advance !

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [1 March 2024 11:10 UTC](https://discourse.nodered.org/t/dashboard-2-socket-emit-from-ui-template/86051/2 "2024-03-01T11:10:49Z")

</div>

You can use `this.send()` in order to pass output to Node-RED ([docs](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#sending-messages-to-node-red)), no need to call the raw `$socket` handler here.

No such thing as a "dumb question" - all are welcome.

---

<div class="post-metadata">

**Author:** ![douchebagraccoon](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@douchebagraccoon](https://discourse.nodered.org/u/douchebagraccoon)\
**Post date:** [1 March 2024 12:34 UTC](https://discourse.nodered.org/t/dashboard-2-socket-emit-from-ui-template/86051/3 "2024-03-01T12:34:09Z")

</div>

Thank you for your answer ! I tried using [this](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#sending-on-change) example but it doesn't seem to work (no msg.payload comes out of the ui-template) :  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/d/8daa53b915acb5c756427c347b47043ee6742fa8.png)

```auto
[
    {
        "id": "27335c145badc531",
        "type": "ui-template",
        "z": "4e58b6fb.8aa1b",
        "group": "099be5983fda69d4",
        "page": "",
        "ui": "",
        "name": "Example",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <v-rating hover :length=\"5\" :size=\"32\" v-model=\"value\"\n active-color=\"primary\" @update:modelValue=\"send({payload: value})\"/>\n</template>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 200,
        "y": 1460,
        "wires": [
            [
                "2ca2d8a83d456fdb"
            ]
        ]
    },
    {
        "id": "2ca2d8a83d456fdb",
        "type": "debug",
        "z": "4e58b6fb.8aa1b",
        "name": "debug 375",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 350,
        "y": 1460,
        "wires": []
    },
    {
        "id": "099be5983fda69d4",
        "type": "ui-group",
        "name": "Référence XXX",
        "page": "f7c84ba6694cf8fd",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "cxxx",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f7c84ba6694cf8fd",
        "type": "ui-page",
        "name": "MAG",
        "ui": "f4139e7488bf5f07",
        "path": "/MAG",
        "icon": "home",
        "layout": "grid",
        "theme": "684392cc1527bd04",
        "order": 2,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f4139e7488bf5f07",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false
    },
    {
        "id": "684392cc1527bd04",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#7d7d7d",
            "primary": "#0094ce",
            "bgPage": "#a3a3a3",
            "groupBg": "#dedede",
            "groupOutline": "#dedede"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [1 March 2024 13:14 UTC](https://discourse.nodered.org/t/dashboard-2-socket-emit-from-ui-template/86051/4 "2024-03-01T13:14:02Z")

</div>

Try `@update:model-value` instead. I will put a fix into the docs to update the example. Thanks for flagging.

This definitely used to work, not sure why it's changed.

---

<div class="post-metadata">

**Author:** ![douchebagraccoon](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@douchebagraccoon](https://discourse.nodered.org/u/douchebagraccoon)\
**Post date:** [1 March 2024 13:47 UTC](https://discourse.nodered.org/t/dashboard-2-socket-emit-from-ui-template/86051/5 "2024-03-01T13:47:46Z")

</div>

That worked! Thanks a lot 😁  
I do have one last question about the data within the ui-template node ; Every time I re-deploy my flow or refresh the dashboard, all my variables are reset. Is there a way to fix that ? Thanks in advance !

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 March 2024 16:20 UTC](https://discourse.nodered.org/t/dashboard-2-socket-emit-from-ui-template/86051/6 "2024-03-01T16:20:19Z")

</div>

If you use watch msg rather than direct socket input then the server will send the most recent message back to the template on a page refresh or deploy.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 March 2024 16:21 UTC](https://discourse.nodered.org/t/dashboard-2-socket-emit-from-ui-template/86051/7 "2024-03-15T16:21:02Z")

</div>

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