# Flowfuse/Dashboard UI 2 - Send msg.payload with UI template

**URL:** <https://discourse.nodered.org/t/flowfuse-dashboard-ui-2-send-msg-payload-with-ui-template/87466>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, ui-template\
**Created:** [24 April 2024 16:46 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-ui-2-send-msg-payload-with-ui-template/87466 "2024-04-24T16:46:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex4](https://avatars.discourse-cdn.com/v4/letter/a/b487fb/32.png) [@Alex4](https://discourse.nodered.org/u/Alex4)\
**Post date:** [24 April 2024 16:46 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-ui-2-send-msg-payload-with-ui-template/87466/1 "2024-04-24T16:46:26Z")

</div>

Hi all,

Beginner here.  
Using the UI template node, i managed to build a succession of forms containing some fixed data from incoming msg.payload, a text field and a submit button.  
I am trying now to send out a msg.payload containing that fixed data and the value entered in the text field.  
I can send the fixed data using the @click on v-btn element. I can send the text-field value using the v-form submit. I can use both but it sends 2 separate msg.payload.  
I have no clue on how to group both together and send a single msg.payload either upon button click or form submit.  
Can one provide some guidance on how to achieve that ?

Thanks

```auto
[
    {
        "id": "b28b629e3b122b36",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "b5a175c3dd70ec22",
        "type": "ui-template",
        "z": "b28b629e3b122b36",
        "group": "b9ee8ac2b439e011",
        "page": "",
        "ui": "",
        "name": "Submit_value",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<v-form @submit.prevent=\"submit\" v-for=\"item in msg.payload\">\n <v-container v-if=\"item.DCS_TAG!==null\">\n <v-row>\n <v-col>{{item.TAG}}</v-col>\n <v-col>\n <v-text-field label=\"Value\" density=\"compact\" name=\"Value\" role=\"textbox\" type=\"number\"></v-text-field>\n </v-col>\n <v-btn @click=\"send({payload:{tag:item.TAG}})\" type=\"submit\" density=\"compact\">Submit</v-btn>\n </v-row>\n </v-container>\n</v-form>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 560,
        "y": 60,
        "wires": [
            [
                "ef8ca7c0a124c9b8"
            ]
        ]
    },
    {
        "id": "ef8ca7c0a124c9b8",
        "type": "debug",
        "z": "b28b629e3b122b36",
        "name": "debug 19",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 740,
        "y": 60,
        "wires": []
    },
    {
        "id": "4c1cecbbc6773247",
        "type": "function",
        "z": "b28b629e3b122b36",
        "name": "Prepare message example",
        "func": "var msg=\n{\n \"payload\": [\n {\n \"TAG\": \"120HS000\"\n },\n {\n \"TAG\": \"120HS001\"\n }\n]\n};\nreturn msg;\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 320,
        "y": 60,
        "wires": [
            [
                "b5a175c3dd70ec22"
            ]
        ]
    },
    {
        "id": "a102362fc6c15e50",
        "type": "inject",
        "z": "b28b629e3b122b36",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": "3",
        "topic": "",
        "payload": "true",
        "payloadType": "bool",
        "x": 110,
        "y": 60,
        "wires": [
            [
                "4c1cecbbc6773247"
            ]
        ]
    },
    {
        "id": "b9ee8ac2b439e011",
        "type": "ui-group",
        "name": "Output",
        "page": "cabddcf362ce888a",
        "width": "6",
        "height": "1",
        "order": 2,
        "showTitle": true,
        "className": ""
    },
    {
        "id": "cabddcf362ce888a",
        "type": "ui-page",
        "name": "Dashboard",
        "ui": "17ae4509c251e909",
        "path": "/",
        "layout": "grid",
        "theme": "75cb746434039921",
        "order": -1,
        "className": ""
    },
    {
        "id": "17ae4509c251e909",
        "type": "ui-base",
        "name": "UI_Dashboard",
        "path": "/dashboard"
    },
    {
        "id": "75cb746434039921",
        "type": "ui-theme",
        "name": "UI_theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [24 April 2024 17:32 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-ui-2-send-msg-payload-with-ui-template/87466/2 "2024-04-24T17:32:30Z")

</div>

Hi, welcome to the forum.

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote `````)

````auto
``` 
   code goes here 
```

````

You can edit and correct your post by clicking the pencil ✏ icon.

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<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:** [24 May 2024 17:32 UTC](https://discourse.nodered.org/t/flowfuse-dashboard-ui-2-send-msg-payload-with-ui-template/87466/3 "2024-05-24T17:32:37Z")

</div>

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