# How can I set the value of msg.payload in the input box of input?

**URL:** <https://discourse.nodered.org/t/how-can-i-set-the-value-of-msg-payload-in-the-input-box-of-input/58133>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [11 February 2022 08:37 UTC](https://discourse.nodered.org/t/how-can-i-set-the-value-of-msg-payload-in-the-input-box-of-input/58133 "2022-02-11T08:37:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kappappa](https://avatars.discourse-cdn.com/v4/letter/k/c0e974/32.png) [@kappappa](https://discourse.nodered.org/u/kappappa)\
**Post date:** [11 February 2022 08:37 UTC](https://discourse.nodered.org/t/how-can-i-set-the-value-of-msg-payload-in-the-input-box-of-input/58133/1 "2022-02-11T08:37:38Z")

</div>

This is my template node.

```auto
[
    {
        "id": "7de5293d.2e88d8",
        "type": "ui_template",
        "z": "01a847b280f89652",
        "group": "18e6e44c.b0561c",
        "name": "CommonList",
        "order": 2,
        "width": 20,
        "height": 3,
        "format": "<style>\n .warned { color: orange }\n .inited { ng-init : \"\"}\n</style>\n<div>\n <h1>{{data}}</h1>\n<table style=\"text-align: left; width: 100%;\"\nborder=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n<tbody>\n<tr>\n <td style=\"vertical-align: bottom;\">\n <form name=\"form_odl\">\n <label ng-class =\"{'warned': form_odl.$valid === false}\" >ODL</label>\n <input style=\"width:95%;\" ng-init=\"model_odl='init data'\"\n ng-model=\"model_odl\" id=\"lab_odl\" name=\"input_odl\"\n ng-model-options=\"{ debounce: 200, allowInvalid: true }\" \n ng-pattern = \"/^ODL-[0-9]{8}$/\"><br>\n </form>\n </td>\n <td style=\"vertical-align: bottom;\">\n <button ng-click=\"out.payload = {val : model_odl, field : 'ODL', valid : form_odl.$valid}; send(out)\" style=\"width: 100px\">Carica ODL</button>\n </td>\n</tr>\n<tr>\n <td style=\"vertical-align: bottom;\">\n <form name=\"form_pn\">\n <label ng-class =\"{'warned': form_pn.$valid === false}\" >Part num./ ricetta</label>\n <input style=\"width:95%;\" ng-class =\"{'inited':msg.update_fields === true}\"\n ng-model=\"model_pn\" id=\"lab_pn\" name=\"input_pn\"\n ng-required= true ng-model-options=\"{ debounce: 200, allowInvalid: true }\" \n ng-pattern = \"/^[0-9]{11}[0-9A-Z]{2}$/\"\n ng-disabled = false><br>\n </form>\n </td>\n <td style=\"vertical-align: bottom;\">\n <button ng-click=\"out.payload = {val : model_pn, field : 'Cod.Cooltech', valid : form_pn.$valid}; send(out)\" style=\"width: 100px\">Carica PN</button>\n </td>\n</tr>\n</tbody>\n</table>\n\n</div>\n<br>\n<div>\n<hr style= \"border: 1px solid white;\">\n</div>\n\n\n\n<script>\nvar data = {{msg.payload.id}}\n (function(scope) {\n // watch for msg in order to get every new message\n scope.$watch('msg', function(data) {\n if (typeof data.update_odl !== 'undefined')\n scope.model_odl = data.update_odl;\n if (typeof data.update_pn !== 'undefined')\n scope.model_pn = data.update_pn; \n });\n })(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 410,
        "y": 700,
        "wires": [
            [
                "71168c98b5e6de99"
            ]
        ]
    },
    {
        "id": "18e6e44c.b0561c",
        "type": "ui_group",
        "name": "Tables",
        "tab": "e3a9c600.825af8",
        "order": 8,
        "disp": true,
        "width": 20
    },
    {
        "id": "e3a9c600.825af8",
        "type": "ui_tab",
        "name": "Angular UI templates",
        "icon": "dashboard"
    }
]

```

The initial value can be set using model\_odl.  
However, I cannot set the value of the received msg.payload.  
It can be set for the h1 tag.

---

<div class="post-metadata">

**Author:** ![tbobek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tbobek/32/45711_2.png) [@tbobek](https://discourse.nodered.org/u/tbobek)\
**Post date:** [12 February 2022 09:05 UTC](https://discourse.nodered.org/t/how-can-i-set-the-value-of-msg-payload-in-the-input-box-of-input/58133/2 "2022-02-12T09:05:18Z")

</div>

if you change the `{{data}}`to `{{msg.payload}}`in the `h1` tag you can feed the heading name in through a node before your ui-template. See your changed example below. Is it that what you asked for?

```auto
[
    {
        "id": "7de5293d.2e88d8",
        "type": "ui_template",
        "z": "a34dd978037fcb79",
        "group": "18e6e44c.b0561c",
        "name": "CommonList",
        "order": 2,
        "width": 20,
        "height": 3,
        "format": "<style>\n .warned { color: orange }\n .inited { ng-init : \"\"}\n</style>\n<div>\n <h1>{{msg.payload}}</h1>\n<table style=\"text-align: left; width: 100%;\"\nborder=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n<tbody>\n<tr>\n <td style=\"vertical-align: bottom;\">\n <form name=\"form_odl\">\n <label ng-class =\"{'warned': form_odl.$valid === false}\" >ODL</label>\n <input style=\"width:95%;\" ng-init=\"model_odl='init data'\"\n ng-model=\"model_odl\" id=\"lab_odl\" name=\"input_odl\"\n ng-model-options=\"{ debounce: 200, allowInvalid: true }\" \n ng-pattern = \"/^ODL-[0-9]{8}$/\"><br>\n </form>\n </td>\n <td style=\"vertical-align: bottom;\">\n <button ng-click=\"out.payload = {val : model_odl, field : 'ODL', valid : form_odl.$valid}; send(out)\" style=\"width: 100px\">Carica ODL</button>\n </td>\n</tr>\n<tr>\n <td style=\"vertical-align: bottom;\">\n <form name=\"form_pn\">\n <label ng-class =\"{'warned': form_pn.$valid === false}\" >Part num./ ricetta</label>\n <input style=\"width:95%;\" ng-class =\"{'inited':msg.update_fields === true}\"\n ng-model=\"model_pn\" id=\"lab_pn\" name=\"input_pn\"\n ng-required= true ng-model-options=\"{ debounce: 200, allowInvalid: true }\" \n ng-pattern = \"/^[0-9]{11}[0-9A-Z]{2}$/\"\n ng-disabled = false><br>\n </form>\n </td>\n <td style=\"vertical-align: bottom;\">\n <button ng-click=\"out.payload = {val : model_pn, field : 'Cod.Cooltech', valid : form_pn.$valid}; send(out)\" style=\"width: 100px\">Carica PN</button>\n </td>\n</tr>\n</tbody>\n</table>\n\n</div>\n<br>\n<div>\n<hr style= \"border: 1px solid white;\">\n</div>\n\n\n\n<script>\nvar data = {{msg.payload.id}}\n (function(scope) {\n // watch for msg in order to get every new message\n scope.$watch('msg', function(data) {\n if (typeof data.update_odl !== 'undefined')\n scope.model_odl = data.update_odl;\n if (typeof data.update_pn !== 'undefined')\n scope.model_pn = data.update_pn; \n });\n })(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 470,
        "y": 140,
        "wires": [
            []
        ]
    },
    {
        "id": "c79d8e2ec7041e28",
        "type": "inject",
        "z": "a34dd978037fcb79",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "Test",
        "payloadType": "str",
        "x": 320,
        "y": 180,
        "wires": [
            [
                "7de5293d.2e88d8"
            ]
        ]
    },
    {
        "id": "18e6e44c.b0561c",
        "type": "ui_group",
        "name": "Tables",
        "tab": "e3a9c600.825af8",
        "order": 8,
        "disp": true,
        "width": 20
    },
    {
        "id": "e3a9c600.825af8",
        "type": "ui_tab",
        "name": "Angular UI templates",
        "icon": "dashboard"
    }
]

```

---

<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:** [14 March 2022 09:05 UTC](https://discourse.nodered.org/t/how-can-i-set-the-value-of-msg-payload-in-the-input-box-of-input/58133/3 "2022-03-14T09:05:20Z")

</div>

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