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

Dashboard
1

This is my template node.

[
    {
        "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.

2

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?

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

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