# How To Initial Form UI

**URL:** <https://discourse.nodered.org/t/how-to-initial-form-ui/19180>\
**Category:** Dashboard\
**Created:** [15 December 2019 13:37 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180 "2019-12-15T13:37:20Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hamidreza](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hamidreza/32/15058_2.png) [@Hamidreza](https://discourse.nodered.org/u/Hamidreza)\
**Post date:** [15 December 2019 13:37 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/1 "2019-12-15T13:37:20Z")

</div>

Hi  
How To initialize Form  
Example : When Start Program TextInput In Form Value Initial = Hello World.

 ![phot1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7ceec3f6b5d958d271426afdd09dd784a00f2996.png)

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [15 December 2019 16:31 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/2 "2019-12-15T16:31:38Z")

</div>

I assume you are asking how to initialize a form?

This is what I use to pre-fill a drop-down menu.

 ![pre-fiil-form](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9abe3d4b5bced2ddd744fefb27aa824cd24c34f3.png)

```auto
[{"id":"b5e4059e.5d7a28","type":"inject","z":"4e4657de.9b461","name":"Initial reset","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":190,"y":200,"wires":[["d8ec9a42.ad7708"]]},{"id":"a532c2b5.0e645","type":"ui_dropdown","z":"4e4657de.9b461","name":"Data source","label":"","tooltip":"","place":"","group":"9c66415.50bbe4","order":1,"width":"4","height":"1","passthru":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"datasource","x":890,"y":200,"wires":[[]]},{"id":"d8ec9a42.ad7708","type":"function","z":"4e4657de.9b461","name":"Set-up name-value map","func":"// This mapping file uses {\"name\":\"value\"} pairs to pre-fill the drop-down widget in the dashboard\n\nmsg.payload = \n[\n {\"[Remove all]\":\"delete\"},\n {\"Lounge temperature\":\"lounge/temperature\"},\n {\"Snug temperature\":\"snug/temperature\"}, \n {\"Studio temperature\":\"studio/temperature\"},\n {\"Study temperature\":\"study/temperature\"},\n {\"Rear bedroom temperature\":\"rear_bedroom/temperature\"},\n {\"Rear bedroom humidity\":\"rear_bedroom/humidity\"},\n {\"Rear bedroom pressure\":\"rear_bedroom/pressure\"},\n {\"Garage temperature\":\"garage/temperature\"},\n {\"Loft temperature\":\"loft/temperature\"}\n];\nreturn msg;","outputs":1,"noerr":0,"x":430,"y":200,"wires":[["cb2b51b0.8fd79"]]},{"id":"cb2b51b0.8fd79","type":"change","z":"4e4657de.9b461","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":680,"y":200,"wires":[["a532c2b5.0e645"]]},{"id":"52feabff.97a174","type":"comment","z":"4e4657de.9b461","name":"Pre-fill the ui-dropdown widget","info":"","x":550,"y":160,"wires":[]},{"id":"9c66415.50bbe4","type":"ui_group","z":"","name":"Filters","tab":"412738d1.eb7ae","order":2,"disp":true,"width":"24","collapse":false},{"id":"412738d1.eb7ae","type":"ui_tab","z":"","name":"Data capture and charting","icon":"dashboard","order":10}]

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 December 2019 16:36 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/3 "2019-12-15T16:36:08Z")

</div>

Just send in the values you want when the flow starts....

```auto
[{"id":"77d7ffd4.edef9","type":"inject","z":"ea593186.4918d","name":"init","topic":"","payload":"{\"Temp\":\"Hello World\"}","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":130,"y":1340,"wires":[["d44c36e1.67d618"]]},{"id":"d44c36e1.67d618","type":"ui_form","z":"ea593186.4918d","name":"","label":"","group":"5749dfff.2a222","order":7,"width":0,"height":0,"options":[{"label":"Temp","value":"Temp","type":"text","required":true,"rows":null}],"formValue":{"Temp":""},"payload":"","submit":"submit","cancel":"cancel","topic":"","x":290,"y":1340,"wires":[["28bdccda.4fb624"]]},{"id":"28bdccda.4fb624","type":"debug","z":"ea593186.4918d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":470,"y":1340,"wires":[]},{"id":"5749dfff.2a222","type":"ui_group","z":"","name":"Default","tab":"8d16f8ce.591d18","disp":true,"width":"6","collapse":false},{"id":"8d16f8ce.591d18","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [15 December 2019 16:51 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/4 "2019-12-15T16:51:32Z")

</div>

I think it will be better to use ui\_control node instead of regular inject node for dashboard widget wake up flows. (better timing, tab change, ignore flow if at wrong tab ....)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/24e27ccad2e3a2b547387d8e6c63525deaea0266.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 December 2019 17:05 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/5 "2019-12-15T17:05:30Z")

</div>

True - that would initialise it every time the browser reloads the page.

---

<div class="post-metadata">

**Author:** ![Hamidreza](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hamidreza/32/15058_2.png) [@Hamidreza](https://discourse.nodered.org/u/Hamidreza)\
**Post date:** [16 December 2019 05:44 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/6 "2019-12-16T05:44:10Z")

</div>

thanks for reply  
In Form UI Each Text Input Have a unique Name  
I Want Initialize Text Input By Value When Program Is Start

---

<div class="post-metadata">

**Author:** ![Hamidreza](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hamidreza/32/15058_2.png) [@Hamidreza](https://discourse.nodered.org/u/Hamidreza)\
**Post date:** [16 December 2019 05:52 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/7 "2019-12-16T05:52:12Z")

</div>

Hi  
Thanks For Reply  
Can you using Function Node this be done ?  
Example :  
msg.payload.temp;  
return msg;

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 December 2019 08:46 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/8 "2019-12-16T08:46:39Z")

</div>

Simple way is to fill in the form as you want it to be - catch the payload when you submit.  
Use that payload to initialise the form.

---

<div class="post-metadata">

**Author:** ![Hamidreza](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hamidreza/32/15058_2.png) [@Hamidreza](https://discourse.nodered.org/u/Hamidreza)\
**Post date:** [16 December 2019 09:57 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/9 "2019-12-16T09:57:12Z")

</div>

Thanks for your guide.  
But it doesn't work.  
My Flow =[Test Form.json](https://discourse.nodered.org/uploads/short-url/9TDnZueKxkgFyyuKjfdSyYjjep2.json) (1.5 KB)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 December 2019 10:44 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/10 "2019-12-16T10:44:38Z")

</div>

It does if you set it as per what the form sends

```auto
msg.payload = {"Temp1":true,"Temp2":true}
return msg;

```

---

<div class="post-metadata">

**Author:** ![Hamidreza](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hamidreza/32/15058_2.png) [@Hamidreza](https://discourse.nodered.org/u/Hamidreza)\
**Post date:** [16 December 2019 11:49 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/11 "2019-12-16T11:49:50Z")

</div>

A million thanks.  
It worked.....

---

<div class="post-metadata">

**Author:** ![mardoche](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@mardoche](https://discourse.nodered.org/u/mardoche)\
**Post date:** [11 June 2023 19:24 UTC](https://discourse.nodered.org/t/how-to-initial-form-ui/19180/12 "2023-06-11T19:24:34Z")

</div>

bonjour a tous!  
moi j'ai un probleme sur la redirection des pages et le remplissage de ma base de donnée par un formulaire node red....j'utilise un raspberry.  
aider moi svp