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

Dashboard
,
1

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

[
    {
        "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"
        }
    }
]
2

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 ```)

``` 
   code goes here 
```

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

See this post for more details - How to share code or flow json

3

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