# Dashboard2 Form populate with input

**URL:** <https://discourse.nodered.org/t/dashboard2-form-populate-with-input/86671>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 March 2024 16:54 UTC](https://discourse.nodered.org/t/dashboard2-form-populate-with-input/86671 "2024-03-22T16:54:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [22 March 2024 16:54 UTC](https://discourse.nodered.org/t/dashboard2-form-populate-with-input/86671/1 "2024-03-22T16:54:38Z")

</div>

If I understand correctly dashboard2 Form doesn't have option to be populated with input.

It shows that there should be dynamic properties, but  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/749b952bb14293eb4566251d9a4ea1b047b85a66.png)

node doesn't have inputs:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/4/1432e589f4b8c8f3549a0101c0b8241981b80d47.png)

Am I missing option similar to MQTT dynamic input possibilities?

I've tried to use template node, and managed to submit my data, but how do I populate it dynamically?  
My code:

```auto
[{"id":"705bc06bb8220e7c","type":"debug","z":"42df28f38b7015cb","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":510,"y":300,"wires":[]},{"id":"f0646820af75eaee","type":"ui-template","z":"42df28f38b7015cb","group":"049df7ce25695955","page":"","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"<template>\n <v-sheet class=\"mx-auto\" width=\"300\">\n <v-form v-model=\"valid\">\n <v-container>\n <v-row>\n <v-col cols=\"15\" md=\"5\">\n <v-text-field\n v-model=\"barcode\"\n :counter=\"10\"\n label=\"Barcode\"\n hide-details\n required\n ></v-text-field>\n </v-col>\n </v-row>\n <v-row>\n <v-col cols=\"15\" md=\"5\">\n <v-text-field\n v-model=\"firstname\"\n :counter=\"10\"\n :rules=\"nameRules\"\n label=\"First name\"\n hide-details\n required\n ></v-text-field>\n </v-col>\n </v-row>\n <v-btn class=\"mt-2\" @click=\"submitForm\" block>Submit</v-btn>\n </v-container>\n </v-form>\n </v-sheet>\n</template>\n\n<script>\nexport default {\n data: () => ({\n valid: false,\n barcode: '',\n firstname: '',\n nameRules: [\n value => {\n if (value) return true\n return 'Name is required.'\n },\n value => {\n if (value?.length <= 10) return true\n return 'Name must be less than 10 characters.'\n },\n],\n }),\n\n methods: {\n submitForm() {\n if (this.valid) {\n // Trigger the send method with the payload 'Submitted'\n let form = {\n \"barcode\": this.barcode,\n \"firstname\": this.firstname\n }\n this.send({ payload: form });\n }\n },\n\n watch: {\n msg: function(){ \n const formIn = this.msg.payload \n this.form = formIn\n this.barcode = formIn.barcode \n }\n } \n // Define send method here or ensure it's available in your component\n // Example: send(payload) { ... }\n },\n};\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":360,"y":300,"wires":[["705bc06bb8220e7c"]]},{"id":"73465afa9ec8ceee","type":"inject","z":"42df28f38b7015cb","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"barcode\":\"10101055\",\"name\":\"John\"}","payloadType":"json","x":230,"y":300,"wires":[["f0646820af75eaee"]]},{"id":"049df7ce25695955","type":"ui-group","name":"Set Management","page":"33f90bfd302476bf","width":"6","height":"5","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"33f90bfd302476bf","type":"ui-page","name":"TestGroup","ui":"6f45e2d6304310fc","path":"/pageN","icon":"home","layout":"grid","theme":"015f2f066ac65dee","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"6f45e2d6304310fc","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"},{"id":"015f2f066ac65dee","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

I've tried to adapt @hotNipi Tank Volume example

```auto
        watch: {
            msg: function(){            
                const v = this.validate(this.msg.payload)           
                this.value = v                         
            }
        }  

```

but no success

---

<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:** [22 March 2024 17:07 UTC](https://discourse.nodered.org/t/dashboard2-form-populate-with-input/86671/2 "2024-03-22T17:07:23Z")

</div>

There is an [open issue](https://github.com/FlowFuse/node-red-dashboard/issues/253) flagging the lack of input for a `ui-form`, as well as [another](https://github.com/FlowFuse/node-red-dashboard/issues/363) to cover the dynamic setting of values:

---

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [22 March 2024 17:15 UTC](https://discourse.nodered.org/t/dashboard2-form-populate-with-input/86671/3 "2024-03-22T17:15:04Z")

</div>

Thanks for quick reply,

how can I populate form fields by using msg in ui-template?

Edit:  
managed to populate form with msg by directly accessing msg instead of creating temporary variables

```auto
  watch: {
    msg: function(){        
        this.barcode = this.msg.payload.barcode
    }
  },

```

@joepavitt I've also tried to use:

```auto
this.$socket.on('msg-input:' + this.id, this.handleMessage);

```

and I've noticed that watch persists field state after screen reload while $socket.on clears the field.

Is there documentation about Input message handling? best info I found while researching was:

> **[Building a Custom Video Player in Dashboard 2.0 • FlowFuse](https://flowfuse.com/blog/2023/12/dashboard-0-10-0/)**
>
> We've just released the latest version of Dashboard 2.0, with a fully featured UI Templates node which now allows for full definition of a Vue component, external JS dependencies and CSS.

and

> [@Listen to input on dashboard 2 ui-template](https://discourse.nodered.org/t/listen-to-input-on-dashboard-2-ui-template/85545/5):
>
> The core missing piece you're looking for is: watch: { msg: function(){ // do stuff with msg.payload }, } This will run the relevant functionality when a new message is received, in your case, you could run this.status = msg.payload

maybe it would make sense to extend examples:

> **[node-red-dashboard/examples at main · FlowFuse/node-red-dashboard](https://github.com/FlowFuse/node-red-dashboard/tree/main/examples)**
>
> Contribute to FlowFuse/node-red-dashboard development by creating an account on GitHub.

with ui-template example

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/3/33bf53519e8bf0f62e1d497f369740c8e1623e2a.png)

```auto
<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                count: 0
            }
        },
        watch: {
            // watch for any changes of "count"
            msg: function (){
                //increase by incomming message
                if(this.msg.payload === "increase") this.count++

                //decrease by incomming message
                if(this.msg.payload === "decrease") this.count--   
            },
            count: function () {
                if (this.count % 5 === 0) {
                    this.send({payload: 'Multiple of 5'})
                }
            }
        },
        computed: {
            // automatically compute this variable
            // whenever VueJS deems appropriate
            formattedCount: function () {
                return this.count + 'Apples'
            }
        },
        methods: {
            // expose a method to our <template> and Vue Application
            increase: function () {
                this.count++
            }
        },
        mounted() {
            // code here when the component is first loaded
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>

```

just my 2 cents

---

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [25 March 2024 18:29 UTC](https://discourse.nodered.org/t/dashboard2-form-populate-with-input/86671/4 "2024-03-25T18:29:31Z")

</div>

In case somebody needs:

Form with inputs, multiple action buttons, validation rules, and row/column layout

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/b/eb3b935d94585d7ff24d72350487c39f483457a9.png)

```auto
[{"id":"5d43284124de176f","type":"inject","z":"42df28f38b7015cb","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"form\":{\"order\":\"ababac\",\"barcode\":\"10003\",\"height\":\"0\",\"width\":\"1\",\"depth\":\"1\",\"checkbox\":true,\"gripHeight\":\"1\",\"prodType\":\"2\",\"depalLayers\":\"2\",\"articleNumber\":\"1212\"},\"retMsg\":\"Barcode 10003 ready for editing\"}","payloadType":"json","x":330,"y":1080,"wires":[["207f39340e5315f2"]]},{"id":"207f39340e5315f2","type":"ui-template","z":"42df28f38b7015cb","group":"fec013ce2ef9da51","page":"","ui":"","name":"Form","order":2,"width":"3","height":"1","head":"","format":"<template>\n <v-sheet class=\"mx-auto\" width=\"500\">\n <v-form ref=\"form\">\n <v-container>\n <!-- Barcode Row -->\n <v-row>\n <v-col cols=\"2\" md=\"12\" class=\"pad2px\">\n <v-text-field\n v-model=\"barcode\"\n :counter=\"20\"\n :rules=\"name20CharRules\"\n label=\"Barcode\"\n required\n dense\n ></v-text-field>\n </v-col>\n </v-row>\n <!-- First Row -->\n <v-row>\n <v-col cols=\"2\" md=\"12\" class=\"pad2px\">\n <v-text-field\n v-model=\"order\"\n :counter=\"20\"\n :rules=\"name20CharRules\"\n label=\"Order\"\n required\n dense\n ></v-text-field>\n </v-col>\n </v-row>\n\n <!-- Second Row -->\n <v-row justify=\"space-between\" align=\"center\">\n <v-col cols=\"4\" md=\"4\" class=\"pad2px\">\n <v-text-field\n v-model=\"height\"\n :counter=\"4\"\n :rules=\"para4CharRules\"\n label=\"Height\"\n required\n dense\n ></v-text-field>\n </v-col>\n <v-col cols=\"4\" md=\"4\" class=\"pad2px\">\n <v-text-field\n v-model=\"width\"\n :counter=\"4\"\n :rules=\"para4CharRules\"\n label=\"Width\"\n required\n dense\n ></v-text-field>\n </v-col>\n <v-col cols=\"4\" md=\"4\" class=\"pad2px\">\n <v-text-field v-model=\"depth\" :counter=\"4\" :rules=\"para4CharRules\" label=\"Depth\" required dense></v-text-field>\n </v-col>\n </v-row>\n\n <!-- Third Row -->\n <v-row>\n <v-col cols=\"2\" md=\"8\" class=\"pad2px\">\n <v-checkbox\n v-model=\"checkbox\"\n label=\"Intermediate Carton Sheets\"\n required\n ></v-checkbox>\n </v-col>\n </v-row>\n\n <!-- Fourth Row -->\n <v-row justify=\"space-between\" align=\"center\">\n <v-col cols=\"4\" md=\"4\" class=\"pad2px\">\n <v-text-field\n v-model=\"gripHeight\"\n :counter=\"4\"\n :rules=\"para4CharRules\"\n label=\"GrippingHeight\"\n required\n dense\n ></v-text-field>\n </v-col>\n <v-col cols=\"4\" md=\"4\" class=\"pad2px\">\n <v-text-field\n v-model=\"prodType\"\n :counter=\"2\"\n :rules=\"para2CharRules\"\n label=\"ProductType\"\n required\n dense\n ></v-text-field>\n </v-col>\n <v-col cols=\"4\" md=\"4\" class=\"pad2px\">\n <v-text-field \n v-model=\"depalLayers\" \n :counter=\"4\" \n :rules=\"para4CharRules\" \n label=\"Depaletize Layers\" \n required \n dense>\n </v-text-field>\n </v-col>\n </v-row>\n <!-- Fifth Row -->\n <v-row>\n <v-col cols=\"2\" md=\"12\" class=\"pad2px\">\n <v-text-field\n v-model=\"articleNumber\"\n :counter=\"20\"\n :rules=\"name20CharRules\"\n label=\"Article Number\"\n required\n dense\n ></v-text-field>\n </v-col>\n </v-row>\n\n <!-- Save & Clear Buttons -->\n <v-row>\n <v-col cols=\"4\" md=\"6\" class=\"pad2px\">\n <v-btn\n color=\"brown-lighten-2\"\n block\n @click=\"validate\"\n >\n Save\n </v-btn>\n </v-col>\n <v-col cols=\"4\" md=\"6\" class=\"pad2px\">\n <v-btn\n color=\"blue-grey-lighten-2\"\n block\n @click=\"reset\"\n >\n Clear Form\n </v-btn>\n </v-col>\n </v-row>\n <v-row>\n <v-btn\n color=\"success\"\n class = \"mt-4\"\n block\n @click=\"load\"\n >\n Load\n </v-btn>\n </v-row>\n </v-container>\n </v-form>\n </v-sheet>\n</template>\n\n<script>\n export default {\n data: () => ({\n\n name20CharRules: [\n v => !!v || 'Field is required',\n v => (v && v.length <= 20) || 'Name must be <= 20 characters',\n],\n para4CharRules: [\n v => !!v || 'Para is required',\n v => (v && v.length <= 4) || 'Para must <=4 characters',\n v => (/^\\d+$/.test(v)) || 'Only numbers allowed'\n],\n para2CharRules: [\n v => !!v || 'Para is required',\n v => (v && v.length <= 2) || 'Para must <=2 \\n characters',\n v => (/^\\d+$/.test(v)) || 'Only numbers allowed'\n],\n order:'',\n barcode: '',\n height:'',\n width:'',\n depth:'',\n gripHeight:'',\n prodType:'',\n depalLayers:'',\n articleNumber:'',\n checkbox: false,\n }),\n\n methods: {\n async validate () {\n const { valid } = await this.$refs.form.validate()\n\n if (valid) {\n const validForm = {\n order: this.order,\n barcode: this.barcode,\n height: this.height,\n width: this.width,\n depth: this.depth,\n checkbox: this.checkbox,\n gripHeight: this.gripHeight,\n prodType: this.prodType,\n depalLayers: this.depalLayers,\n articleNumber: this.articleNumber\n }\n \n const loadForm = {\n \"form\": validForm,\n \"action\": \"save\"\n }\n this.send({ payload: loadForm});\n }\n },\n reset() {\n this.$refs.form.reset()\n },\n async load () {\n const { valid } = await this.$refs.form.validate()\n\n if (valid) {\n const validForm = {\n order: this.order,\n barcode: this.barcode,\n height: this.height,\n width: this.width,\n depth: this.depth,\n checkbox: this.checkbox,\n gripHeight: this.gripHeight,\n prodType: this.prodType,\n depalLayers: this.depalLayers,\n articleNumber: this.articleNumber\n }\n \n const loadForm = {\n \"form\": validForm,\n \"action\": \"load\"\n }\n this.send({ payload: loadForm});\n }\n },\n },\n // watch: {\n // msg: function(){ \n // const formIn = this.msg.payload.form\n // console.log(formIn)\n // this.send({payload: formIn}) \n // this.barcode = this.msg.payload.form.barcode\n // //this.order = this.formIn.order\n // // this.height = formIn.height\n // // this.width = formIn.width\n // // this.depth = formIn.depth\n // // this.checkbox = formIn.checkbox\n // // this.gripHeight = formIn.gripHeight\n // // this.prodType = formIn.prodType\n // // this.depalLayers = formIn.depalLayers\n // // this.articleNumber = formIn.articleNumber \n // }\n // }, \n watch: {\n msg: function(){ \n const formIn = this.msg.payload?.form \n // this.form = formIn\n if(formIn){\n this.barcode = formIn.barcode\n this.order = formIn.order\n this.height = formIn.height\n this.width = formIn.width\n this.depth = formIn.depth\n this.checkbox = formIn.checkbox\n this.gripHeight = formIn.gripHeight\n this.prodType = formIn.prodType\n this.depalLayers = formIn.depalLayers\n this.articleNumber = formIn.articleNumber \n } \n }\n }, \n mounted() {\n // code here when the component is first loaded\n this.send({ payload: \"formRefresh\"});\n },\n }\n</script>\n\n<style scoped>\n.pad2px {\n padding: 2px;\n}\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":460,"y":1080,"wires":[["89559bae28f361e9"]]},{"id":"89559bae28f361e9","type":"debug","z":"42df28f38b7015cb","name":"debug 5","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":600,"y":1080,"wires":[]},{"id":"fec013ce2ef9da51","type":"ui-group","name":"Tele 05","page":"33f90bfd302476bf","width":"3","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"33f90bfd302476bf","type":"ui-page","name":"MFSsim","ui":"6f45e2d6304310fc","path":"/IT","icon":"home","layout":"grid","theme":"66ef48d50fdc6f7f","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"6f45e2d6304310fc","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"},{"id":"66ef48d50fdc6f7f","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<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 April 2024 18:30 UTC](https://discourse.nodered.org/t/dashboard2-form-populate-with-input/86671/5 "2024-04-24T18:30:13Z")

</div>

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