Dashboard2 Form populate with input

[KarolisL]

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

It shows that there should be dynamic properties, but

node doesn't have inputs:

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:

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

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

but no success

[joepavitt]

There is an open issue flagging the lack of input for a ui-form, as well as another to cover the dynamic setting of values:

[KarolisL]

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

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

@joepavitt I've also tried to use:

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

and

Listen to input on dashboard 2 ui-template

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

with ui-template example

<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

[KarolisL]

In case somebody needs:

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

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