# Ui\_numeric - how does it maintain state across browser refresh

**URL:** <https://discourse.nodered.org/t/ui-numeric-how-does-it-maintain-state-across-browser-refresh/35595>\
**Category:** Dashboard\
**Created:** [9 November 2020 13:26 UTC](https://discourse.nodered.org/t/ui-numeric-how-does-it-maintain-state-across-browser-refresh/35595 "2020-11-09T13:26:43Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [9 November 2020 13:26 UTC](https://discourse.nodered.org/t/ui-numeric-how-does-it-maintain-state-across-browser-refresh/35595/1 "2020-11-09T13:26:43Z")

</div>

Hi, all.

What options are available to achieve the same behaviour with a ui\_template ?

One method I know goes like this:

1. Within ui\_template listen for a commands 'get\_state' and 'set\_state'.  
Write code to action those commands.
2. When the flow has started inject 'get\_state' and pick up the response with a function node that saves the state to more persistent storage. Make sure that all state changes in the ui\_template also update the persistent store.
3. When a browser refresh occurs inject 'set\_state' along with the stored state.

Is there a simpler way any one ?

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [10 November 2020 09:56 UTC](https://discourse.nodered.org/t/ui-numeric-how-does-it-maintain-state-across-browser-refresh/35595/2 "2020-11-10T09:56:12Z")

</div>

Can I take a no reply as an affirmative that this is the only way ?

Any one ?

---

<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:** [10 November 2020 14:58 UTC](https://discourse.nodered.org/t/ui-numeric-how-does-it-maintain-state-across-browser-refresh/35595/3 "2020-11-10T14:58:32Z")

</div>

The options at the bottom of the node should handle most use cases...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/07b3022771ad38a2e65267a8b6d57ec54fbf3151.png)  
The first tells it to save any output that the template sends back to the server...  
and the second tells the server to send that to the template on a refresh.

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [10 November 2020 15:58 UTC](https://discourse.nodered.org/t/ui-numeric-how-does-it-maintain-state-across-browser-refresh/35595/4 "2020-11-10T15:58:43Z")

</div>

Hi thank you for your reply.

I have several ui\_template nodes that form dashboard buttons and a single ui\_template that is the event handler.

Could you please tell me are you referring to the button templates in this instance or my event handler or both ?

Also I am trying to extract the correct event data for clientX ,Y and bbox[left,bottom,right,top]

Do you know exactly where this data comes from ?

I have not been able to get the correct values (as produced by a standard dashboard button of the same size and position as my ui\_template button) from the e.originalEvent object.

---

<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:** [10 November 2020 16:35 UTC](https://discourse.nodered.org/t/ui-numeric-how-does-it-maintain-state-across-browser-refresh/35595/5 "2020-11-10T16:35:58Z")

</div>

i am referring to the generic capabilities of he ui\_template node. What your template does is up to you. If they send a payload then it can be stored and replayed.

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [12 November 2020 14:26 UTC](https://discourse.nodered.org/t/ui-numeric-how-does-it-maintain-state-across-browser-refresh/35595/7 "2020-11-12T14:26:13Z")

</div>

I have found a working ui\_template that does not enter a feedback loop like my template does but I am not sure if the observed behaviour is correct.

Here is a flow to demonstrate:

```auto
[{"id":"9ea17f7a.df536","type":"tab","label":"Flow 7","disabled":false,"info":""},{"id":"6aeef412.e50ccc","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 1","payloadType":"str","x":190,"y":80,"wires":[["91a4ce0c.b2c85"]]},{"id":"91a4ce0c.b2c85","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"00","order":2,"width":"3","height":1,"format":"\n<div class=\"blocktitle blue\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":390,"y":140,"wires":[["549220ba.d65f2"]]},{"id":"8613b2fb.2dd71","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"Title CSS","order":13,"width":0,"height":0,"format":"<style>\n .blocktitle{\n font-weight: bold;\n background-color: inherit;\n padding: 6px;\n text-align: center;\n }\n .blocktitle.blue{\n background-color: blue;\n \n }\n .blocktitle.red{\n background-color: red;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":400,"y":40,"wires":[["549220ba.d65f2"]]},{"id":"dd380195.41b53","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"11","order":8,"width":"3","height":1,"format":"\n<div class=\"blocktitle red\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":380,"wires":[["549220ba.d65f2"]]},{"id":"549220ba.d65f2","type":"debug","z":"9ea17f7a.df536","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":620,"y":200,"wires":[]},{"id":"e7570f96.7c2d3","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"10","order":6,"width":"3","height":1,"format":"\n<div class=\"blocktitle blue\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":390,"y":300,"wires":[[]]},{"id":"ce508c0d.9d32b","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"01","order":4,"width":"3","height":1,"format":"\n<div class=\"blocktitle red\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":220,"wires":[[]]},{"id":"a87ee7bd.c3d7a8","type":"ui_text","z":"9ea17f7a.df536","group":"eb14755f.a52328","order":1,"width":"4","height":"1","name":"","label":"False and False","format":"{{msg.payload}}","layout":"row-spread","x":420,"y":100,"wires":[]},{"id":"e4d0db50.3756a8","type":"ui_text","z":"9ea17f7a.df536","group":"eb14755f.a52328","order":5,"width":"4","height":"1","name":"","label":"True and False","format":"{{msg.payload}}","layout":"row-spread","x":420,"y":260,"wires":[]},{"id":"ca0b4efc.50059","type":"ui_text","z":"9ea17f7a.df536","group":"eb14755f.a52328","order":3,"width":"3","height":"1","name":"","label":"False and True","format":"{{msg.payload}}","layout":"row-spread","x":420,"y":180,"wires":[]},{"id":"30757de8.844782","type":"ui_text","z":"9ea17f7a.df536","group":"eb14755f.a52328","order":7,"width":"4","height":"1","name":"","label":"True and True","format":"{{msg.payload}}","layout":"row-spread","x":420,"y":340,"wires":[]},{"id":"94d3c556.406b68","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 1","payloadType":"str","x":190,"y":160,"wires":[["ce508c0d.9d32b"]]},{"id":"c65941a4.e906e","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 1","payloadType":"str","x":190,"y":240,"wires":[["e7570f96.7c2d3"]]},{"id":"c5e4e506.fb8d38","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 1","payloadType":"str","x":190,"y":320,"wires":[["dd380195.41b53"]]},{"id":"7722d8fc.365c88","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 2","payloadType":"str","x":190,"y":120,"wires":[["91a4ce0c.b2c85"]]},{"id":"9211739.260e99","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 2","payloadType":"str","x":190,"y":200,"wires":[["ce508c0d.9d32b"]]},{"id":"1ddd7c1e.82ba74","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 2","payloadType":"str","x":190,"y":280,"wires":[["e7570f96.7c2d3"]]},{"id":"f224c5cd.bf2458","type":"inject","z":"9ea17f7a.df536","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"State 2","payloadType":"str","x":190,"y":360,"wires":[["dd380195.41b53"]]},{"id":"eb14755f.a52328","type":"ui_group","z":"","name":"Store and Restore State","tab":"c88be1ab.5033b","order":1,"disp":true,"width":"4","collapse":false},{"id":"c88be1ab.5033b","type":"ui_tab","z":"","name":"Persistence","icon":"dashboard","disabled":false,"hidden":false}]

```

From a cold start I get:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/8/581ec15c322cb74e34a7a9a7c3a98aec210e7d7f.png)  
Injecting State 1 into each node and then doing a browser refresh  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cfd7007ba6a206c5bd9aa70d78b6ea31f128b95d.png)  
Which is OK I think.  
If I now edit the ui\_templates and set them all to False False and redeploy  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/344b5e379cd92f360380ccf8ca15fee05702617f.png)  
Which I think is not OK. I have to restart node-red for it to forget stored state.

Also if I set a ui\_template to disabled like the clock toolbar it also remains after redeploy and requires node-red restart.

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [17 November 2020 11:00 UTC](https://discourse.nodered.org/t/ui-numeric-how-does-it-maintain-state-across-browser-refresh/35595/8 "2020-11-17T11:00:32Z")

</div>

```auto
[{"id":"dd380195.41b53","type":"ui_template","z":"9ea17f7a.df536","group":"eb14755f.a52328","name":"11","order":16,"width":"3","height":1,"format":"\n<div class=\"blocktitle red\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":380,"wires":[["549220ba.d65f2"]]},{"id":"eb14755f.a52328","type":"ui_group","name":"Store and Restore State","tab":"c88be1ab.5033b","order":1,"disp":true,"width":"4","collapse":false},{"id":"c88be1ab.5033b","type":"ui_tab","name":"Persistence 1881 Dashboard version 2.24.1-beta","icon":"dashboard","disabled":false,"hidden":false}]

```

I have updated the example to the beta dashboard and the problem is there as well.

It boils down to this:

If a ui\_template ever has 'Reload last value on refresh' set to Checked then the value will persist through browser refresh and even a redeploy with the 'Reload last value on refresh' set to Unchecked.

This cannot be right, any one ?