# 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:** 1\
**Showing post:** 3

<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

---

_[View the full topic](https://discourse.nodered.org/t/dashboard2-form-populate-with-input/86671)._