# 🚀 \[FlexDash\] alpha release - a dashboard for Node-RED

**URL:** <https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861>\
**Category:** Share Your Nodes\
**Tags:** flexdash\
**Created:** [1 August 2022 05:49 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861 "2022-08-01T05:49:33Z")\
**Posts on this page:** 20\
**Page:** 5

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [25 August 2022 18:43 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/81 "2022-08-25T18:43:59Z")

</div>

I like to use the dark theme, but if the browser is refreshed, or opened in a different browser, then it reverts back to the light theme.  
At some stage (at the bottom of the todo list), could the user's choice be persisted?  
(I'm aware about adding a `?theme=dark` query string to the url, but that's not ideal.)

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [25 August 2022 18:49 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/82 "2022-08-25T18:49:33Z")

</div>

> [@Paul-Reed](#):
>
> At some stage (at the bottom of the todo list), could the user's choice be persisted?

Definitely! Right now there are no cookies (nor any login) and remembering requires cookies, so there's some work involved... Also, I'm not sure where to persist that stuff: in memory seems bad but on disk prob requires at least tying into a persistent context store (which is something NR doesn't make that simple 'cause a node can't discover which context stores are available AFAIK).

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [26 August 2022 01:08 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/83 "2022-08-26T01:08:01Z")

</div>

> [@tve](#):
>
> (which is something NR doesn't make that simple 'cause a node can't discover which context stores are available AFAIK).

I believe it can, though it might not be straight-forwards. They are defined in settings.js and you have access to the settings in the node.

But the point is true anyway. This is why uibuilder uses its own filing structure.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [26 August 2022 01:21 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/84 "2022-08-26T01:21:20Z")

</div>

> [@TotallyInformation](#):
>
> I believe it can, though it might not be straight-forwards. They are defined in settings.js and you have access to the settings in the node.

Hmmm, wait, the change node has `flow` as one of the content options and that displays a list of context stores. I should be able to use that!

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 August 2022 07:20 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/85 "2022-08-26T07:20:25Z")

</div>

At client side, you can list available context stores to present to the user via `RED.settings.context.stores.forEach(callback)`

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 August 2022 08:40 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/86 "2022-08-26T08:40:13Z")

</div>

Is the Dropdown select widget in a state that it could be released even though it needs further tidying up? That would allow me to make progress in building my whole UI using FD.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [26 August 2022 17:34 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/87 "2022-08-26T17:34:34Z")

</div>

Yikes! I wouldn't want to be impeding that! You need to update node-red-flexdash and node-red-corewidgets:

```auto
26 Aug 10:29:55 - [info] Node-RED FlexDash plugin version 0.4.94                                    
26 Aug 10:29:57 - [info] Node-RED FlexDash version 0.4.94                                           
26 Aug 10:29:57 - [info] Node-RED FD Core Widgets version 0.4.41                                    
26 Aug 10:29:59 - [info] FlexDash UI version 0.4.51                                                 

```

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [26 August 2022 20:44 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/88 "2022-08-26T20:44:32Z")

</div>

I'm passing the data array into the `time-plot` node using msg.payload, and it works great, but...  
looking at the description in the config, it suggests using msg.data (which doesn't work).  
Is it a typo?  
 ![data](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/429c1a8eda085b17fcdb3612eaaccfde81d93af7.jpeg)

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [26 August 2022 20:48 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/89 "2022-08-26T20:48:22Z")

</div>

It's not a typo. I did notice some issues still with typedInput and null values. 😢 I need to do another round of fixing it seems.

---

<div class="post-metadata">

**Author:** ![holazit](https://avatars.discourse-cdn.com/v4/letter/h/ce73a5/32.png) [@holazit](https://discourse.nodered.org/u/holazit)\
**Post date:** [27 August 2022 23:14 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/90 "2022-08-27T23:14:02Z")

</div>

Hi, I would like to replace the old dashboard with FlexDash but I am not able to customize the buttons: I would like to change their size (including icon and font sizes) with a result similar to the attached image. It can be done? Thank you

![Screenshot 2022-08-28 01.07.45](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d8d325daad712dcfa162bd4a374980032ce3cd0d.png)

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [28 August 2022 01:23 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/91 "2022-08-28T01:23:51Z")

</div>

What have you tried?

I would create the three widgets, then place them into a Panel (config node), make the panel 2x2 in dimension, then make the 'sala' widget 2x2, the 'cucina' widget 2x3 (WxH), and the 'tv' widget 2x1.

Here's a starting point:

```auto
[{"id":"fab6b7c44654ddb3","type":"fd-stat","z":"0e6b577fa39b8084","fd_container":"a85c2b65747b8fa9","fd_cols":"2","fd_rows":"2","fd_array":false,"fd_array_max":10,"name":"sala","title":"sala","popup_info":"","unit":"°C","value":23,"color":"","low_color":"blue","high_color":"pink","low_threshold":null,"high_threshold":null,"low_regexp":"","high_regexp":"","chip":false,"iso_prefix":true,"zoom":1,"x":190,"y":400,"wires":[]},{"id":"1b994b3c1404a987","type":"fd-stat","z":"0e6b577fa39b8084","fd_container":"a85c2b65747b8fa9","fd_cols":"2","fd_rows":"3","fd_array":false,"fd_array_max":10,"name":"cucina","title":"cucina","popup_info":"","unit":"°C","value":24.8,"color":"","low_color":"blue","high_color":"pink","low_threshold":null,"high_threshold":null,"low_regexp":"","high_regexp":"","chip":false,"iso_prefix":true,"zoom":1,"x":190,"y":440,"wires":[]},{"id":"93a7dce8c1cada97","type":"fd-push-button","z":"0e6b577fa39b8084","fd_container":"a85c2b65747b8fa9","fd_cols":"2","fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"","name":"tv","title":"TV","popup_info":"","enabled":true,"color":"","output_value":25,"icon":null,"x":190,"y":480,"wires":[[]]},{"id":"a85c2b65747b8fa9","type":"flexdash container","name":"demo panel","kind":"Panel","fd_children":",fab6b7c44654ddb3,1b994b3c1404a987,93a7dce8c1cada97","title":"","tab":"","min_cols":"1","max_cols":"20","parent":"f54be6d9a8b8053d","solid":false,"cols":"2","rows":"2"},{"id":"f54be6d9a8b8053d","type":"flexdash container","name":"demo grid","kind":"StdGrid","fd_children":",a85c2b65747b8fa9","title":"","tab":"060e75cb0ea9e3e1","min_cols":"1","max_cols":"20","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"060e75cb0ea9e3e1","type":"flexdash tab","name":"demo tab","icon":"mdi-rocket","title":"","fd_children":",f54be6d9a8b8053d","fd":"e8f5aea52ab49500"}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/940a05a5805f6923a84e02a738cbc9df39009c6b.png)

I don't have an icon widget to put in there, oops, one more for the to-do list!

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [28 August 2022 01:48 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/92 "2022-08-28T01:48:20Z")

</div>

> [@Paul-Reed](#):
>
> I'm passing the data array into the `time-plot` node using msg.payload, and it works great, but...  
> looking at the description in the config, it suggests using msg.data (which doesn't work).  
> Is it a typo?

I'm not managing to reproduce this issue. Would it be possible for you to post a sample flow that shows it?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 August 2022 05:06 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/93 "2022-08-28T05:06:14Z")

</div>

> [@tve](#):
>
> don't have an icon widget

Does that needs to be a dedicated widget? Isn't this simply html content (containing some icon identifier) inside the existing widget?

P.S. this is _ **not** _ an argument against a new widget (which is probably a more user friendly solution), but just a question...

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [28 August 2022 05:18 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/94 "2022-08-28T05:18:34Z")

</div>

Well, the button widget has an icon prop and that places an icon into the button in front of the text (if any). I could do something similar with the stat widget, and the gauge widget too? But then you also get into questions about having the icon to the left, to the right, above, below?

There is a label widget which allows you to place text, change its justification, alignment, size and color. So you can combine a label and another widget in a panel to get whatever arrangement you want, more or less. An icon widget would allow you to do something similar.

At some point you just have to create your own custom widget, which will be easy someday, but not yet...

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [28 August 2022 08:53 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/95 "2022-08-28T08:53:46Z")

</div>

> [@tve](#):
>
> Would it be possible for you to post a sample flow that shows it?

OK, 2 identical flows attached, one uses `msg.data` to feed in the data array, as described in the config - `Array with unix timestamp followed by a value per series. Change using msg[data]`

And a second flow using `msg.payload` instead of `msg.data`.

```auto
[{"id":"bfbe90dadb982ce6","type":"function","z":"1543d308b342690a","name":"Use msg.data","func":"if (msg.hasOwnProperty(\"reset\")) {\n context.set('Flexchart', [])\n return\n}\n\nlet data = context.get('Flexchart') || []\nconst newdata = msg.payload\nconst timestamp = Date.now() / 1000\n\nnewdata.unshift(timestamp)\ndata.push(newdata)\nwhile (data.length > 50) data.shift()\ncontext.set('Flexchart', data)\nmsg.data = data\nmsg.labels = [\"dataA\",\"dataB\"]\nmsg.widths = [1,1]\nmsg.colors = ['blue','red']\nreturn msg\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":185,"wires":[["e381de90de996890"]]},{"id":"9b370a9a1cdb26aa","type":"function","z":"1543d308b342690a","name":"Example Data","func":"/*\n\n*/\nconst now = Date.now()\nconst a = Math.sin(now / 6000)\nconst b = 1.2 * Math.cos(now / 4000)\nmsg.payload = [a,b]\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":265,"y":185,"wires":[["bfbe90dadb982ce6"]]},{"id":"7b830c4b6928a022","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":110,"y":185,"wires":[["9b370a9a1cdb26aa"]]},{"id":"ec11c1750a0e181e","type":"inject","z":"1543d308b342690a","name":"Clear Chart","props":[{"p":"reset","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":275,"y":225,"wires":[["bfbe90dadb982ce6"]]},{"id":"e381de90de996890","type":"fd-time-plot","z":"1543d308b342690a","fd_container":"69c2e3f5798c3475","fd_cols":"7","fd_rows":"3","fd_array":false,"fd_array_max":10,"fd_output_topic":"","name":"Test chart","title":"Using msg.data","popup_info":"","data":"\"null\"","labels":"\"[]\"","colors":"\"[]\"","axes":"\"[]\"","widths":"\"[]\"","span_gaps":"\"[]\"","left_unit":"","right_unit":"","left_min":null,"left_max":null,"left_decimals":1,"right_min":null,"right_max":null,"right_decimals":1,"reverse_legend":false,"x":680,"y":185,"wires":[[]]},{"id":"bd24b9df38fd9b97","type":"function","z":"1543d308b342690a","name":"Use msg.payload","func":"if (msg.hasOwnProperty(\"reset\")) {\n context.set('Flexchart', [])\n return\n}\n\nlet data = context.get('Flexchart') || []\nconst newdata = msg.payload\nconst timestamp = Date.now() / 1000\n\nnewdata.unshift(timestamp)\ndata.push(newdata)\nwhile (data.length > 50) data.shift()\ncontext.set('Flexchart', data)\nmsg.payload = data\nmsg.labels = [\"dataA\",\"dataB\"]\nmsg.widths = [1,1]\nmsg.colors = ['blue','red']\nreturn msg\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":500,"y":275,"wires":[["92068bc37c49da87"]]},{"id":"ca257a34e62fa351","type":"function","z":"1543d308b342690a","name":"Example Data","func":"/*\n\n*/\nconst now = Date.now()\nconst a = Math.sin(now / 6000)\nconst b = 1.2 * Math.cos(now / 4000)\nmsg.payload = [a,b]\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":265,"y":275,"wires":[["bd24b9df38fd9b97"]]},{"id":"d101acc060767af7","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":110,"y":275,"wires":[["ca257a34e62fa351"]]},{"id":"7cf85c40db3d0ba7","type":"inject","z":"1543d308b342690a","name":"Clear Chart","props":[{"p":"reset","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":275,"y":315,"wires":[["bd24b9df38fd9b97"]]},{"id":"92068bc37c49da87","type":"fd-time-plot","z":"1543d308b342690a","fd_container":"69c2e3f5798c3475","fd_cols":"7","fd_rows":"3","fd_array":false,"fd_array_max":10,"fd_output_topic":"","name":"Test chart","title":"Using msg.payload","popup_info":"","data":"\"null\"","labels":"\"[]\"","colors":"\"[]\"","axes":"\"[]\"","widths":"\"[]\"","span_gaps":"\"[]\"","left_unit":"","right_unit":"","left_min":null,"left_max":null,"left_decimals":1,"right_min":null,"right_max":null,"right_decimals":1,"reverse_legend":false,"x":680,"y":275,"wires":[[]]},{"id":"69c2e3f5798c3475","type":"flexdash container","name":"Demo grid","kind":"StdGrid","fd_children":",ecf5adc800160eeb,e381de90de996890,92068bc37c49da87","title":"","tab":"fef6c0f6d48841d6","min_cols":"8","max_cols":"10","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"fef6c0f6d48841d6","type":"flexdash tab","name":"Demo","icon":"mdi-view-dashboard","fd_children":",69c2e3f5798c3475","fd":"e8f5aea52ab49500"}]

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [28 August 2022 08:56 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/96 "2022-08-28T08:56:13Z")

</div>

The Dropdown Select is working well, thanks.  
One minor issue, in the config, under Value it says "Value of selection to show in the box. Change using msg[value]". I think that should say msg[payload]. It works correctly, it is just the text shown in the config. As a matter of interest, why do you use msg[xxx] rather than msg.xxx?

A couple of questions on the Text View widget. With that widget I have to pass the text to show via msg.text, whereas msg.payload would be more conventional for the primary input value. Is that intentional or just the way it has come out?  
Also on Text View I see it has an output, and I had hoped that this was intended to be the widget that might eventually become something comparable to the ui\_text dashboard widget which displays and allows input of text, numbers etc. But the fd node operates in a different way, requiring the user to go into edit mode, edit, and then save it, which is inconvenient if just using it as a user input node. Could you share your thoughts on this?  
I have just noticed that there is also the Value Sequence node, which is also comes into this area.

---

<div class="post-metadata">

**Author:** ![holazit](https://avatars.discourse-cdn.com/v4/letter/h/ce73a5/32.png) [@holazit](https://discourse.nodered.org/u/holazit)\
**Post date:** [28 August 2022 12:32 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/97 "2022-08-28T12:32:01Z")

</div>

Thanks but using "stat" instead of "button" I cannot perform action by pressing that widget (in my previous example "sala", "cucina" and "tv" turn on their respective lights in addition to displaying the room temperature through an html code inserted in the label of the button as in the example below).

```auto
[{"id":"12d68747b1a5db6e","type":"ui_button","z":"14153030d1f012bd","name":"Luce Sala","group":"8ecdbfcddfca1903","order":1,"width":3,"height":2,"passthru":false,"label":"{{label}}","tooltip":"","color":"{{color}}","bgcolor":"DimGray","className":"","icon":"{{icon}}","payload":"","payloadType":"str","topic":"","topicType":"str","x":500,"y":320,"wires":[["290e3a27bbf6a3aa"]]},{"id":"6bdc7783322545cf","type":"mqtt in","z":"14153030d1f012bd","name":"Stato Luce Sala","topic":"shellies/shelly1-XXXXXXXXXX/relay/0","qos":"2","datatype":"auto","broker":"babea684.f913c","nl":false,"rap":false,"inputs":0,"x":120,"y":320,"wires":[["4dd6a544f936ca97"]]},{"id":"4862ef6044bea485","type":"link out","z":"14153030d1f012bd","name":"MQTT out","links":["4353bbe6.c81db4","7672bd27.3024c4"],"x":930,"y":320,"wires":[],"l":true},{"id":"4dd6a544f936ca97","type":"function","z":"14153030d1f012bd","name":"Desktop","func":"var icon = \"iconify-mdi:sofa 48px\";\nvar object = \"Sala\";\nglobal.set(\"luce_sala\", msg.payload);\nconst object1 = global.get(\"temperatura_sala\");\nconst object2 = Number(object1).toFixed(1);\nvar text = \"<br/><font size=4 color=white>\" + object + \"</font>\";\nvar temp = \"<br/><font size=3 color=white>\" + object2 + \"°</font>\";\nvar label = text + temp;\nvar iconcolor;\n\nif (msg.payload == \"on\") {\n iconcolor = \"DarkOrange\";\n} else {\n iconcolor = \"White\";\n}\n\nmsg = { color:iconcolor, label:label, icon: icon};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":320,"y":320,"wires":[["12d68747b1a5db6e"]]},{"id":"0f5633a18075df97","type":"mqtt in","z":"14153030d1f012bd","name":"Temperatura Sala","topic":"rtl_433/Nexus-TH-119/temperature_C","qos":"2","datatype":"auto","broker":"babea684.f913c","nl":false,"rap":false,"inputs":0,"x":130,"y":380,"wires":[["d0e12fba75150c0e"]]},{"id":"4d6a4d409ee10d64","type":"change","z":"14153030d1f012bd","name":"Stato Temperatura Sala","rules":[{"t":"set","p":"temperatura_sala","pt":"global","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":380,"wires":[[]]},{"id":"d0e12fba75150c0e","type":"delay","z":"14153030d1f012bd","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"minute","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":true,"allowrate":false,"outputs":1,"x":340,"y":380,"wires":[["4d6a4d409ee10d64"]]},{"id":"290e3a27bbf6a3aa","type":"function","z":"14153030d1f012bd","name":"Object State","func":"var object3 = global.get(\"luce_sala\");\nvar topic = \"shellies/shelly1-XXXXXXXXXX/relay/0/command\";\n\nif (object3 === \"on\") {\n msg.payload = \"off\";\n \n} else if (object3 === \"off\") {\n msg.payload = \"on\";\n}\n\nmsg = { topic:topic, payload:msg.payload};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":710,"y":320,"wires":[["4862ef6044bea485"]]},{"id":"8ecdbfcddfca1903","type":"ui_group","name":"Piano Terra","tab":"a404e75d.99def8","order":2,"disp":false,"width":"15","collapse":false,"className":""},{"id":"babea684.f913c","type":"mqtt-broker","name":"Mosquitto","broker":"10.0.0.6","port":"1883","clientid":"nodered","autoConnect":true,"usetls":false,"compatmode":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closeRetain":"false","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willRetain":"false","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"a404e75d.99def8","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![nileio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nileio/32/9444_2.png) [@nileio](https://discourse.nodered.org/u/nileio)\
**Post date:** [28 August 2022 14:48 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/98 "2022-08-28T14:48:58Z")

</div>

@tve congrats . this is great effort. I used your ealier older version a while ago without the integration to node-red . yet to try this one.  
just one quick thing , in regards to

> Editing a FlexDash node in the flow editor uses typed input input fields which have various issues with defaults for boolean values, null as object or string values, not supporting the input of multi-line strings, not supporting a color picker, and more. An input field better suited for FlexDash is badly needed`

I can possibly help with TypedInput. I played so long with it that I managed to create custom input fields that are embedded within the TypedInput itself using the custom function handlers exposed by the TypedInput Widget and jQuery. Looks good and works as expected but needs a bit of code to handle different events, etc. I used it in a personal project as I really like to use standard fields such as TypedInput and it gives loads of flexibility to users. Anyway , please try put together details of what you trying to achieve (type of input like ColorPicker, etc. ) and I can create the TypedInput for it 🙂  
cheers

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [28 August 2022 14:54 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/99 "2022-08-28T14:54:56Z")

</div>

> [@holazit](#):
>
> Thanks but using "stat" instead of "button" I cannot perform action by pressing that widget

I think the example flow was to show you how do the layout. If you want a push button then use that instead of a stat.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [28 August 2022 16:14 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/100 "2022-08-28T16:14:01Z")

</div>

> [@Colin](#):
>
> One minor issue, in the config, under Value it says "Value of selection to show in the box. Change using msg[value]". I think that should say msg[payload]. It works correctly, it is just the text shown in the config. As a matter of interest, why do you use msg[xxx] rather than msg.xxx?

> [@Colin](#):
>
> A couple of questions on the Text View widget. With that widget I have to pass the text to show via msg.text, whereas msg.payload would be more conventional for the primary input value. Is that intentional or just the way it has come out?

None of the widgets actually have a `payload` prop, it's the node generator that maps `msg.payload` to one of the props using a small hard-coded list (looking for a `value` or `data` prop at the moment). I need to enhance the generator so it can take some config to fix this as well as provide the ability to specify an icon for each generated node. I added `text` to the list for now...

You're right about the `msg[value]` vs `msg.value`, brain fart on my end 🙄, would have to be `msg['value']` to be correct, actually... I just changed it, thanks!

> [@Colin](#):
>
> But the fd node operates in a different way, requiring the user to go into edit mode, edit, and then save it, which is inconvenient if just using it as a user input node. Could you share your thoughts on this?

You are asking for the TextField widget, which I haven't yet written 😜. For text fields I've used the PropsTable widget, which allows you to input multiple fields at once and then submit them. To get a TextField widget, if you post the spec (help text and props) I'll write the rest 😃.

The intent for the Text widget is to display unformatted text, for example lines of log output.

> [@holazit](#):
>
> Thanks but using "stat" instead of "button" I cannot perform action by pressing that widget (in my previous example "sala", "cucina" and "tv" turn on their respective lights in addition to displaying the room temperature through an html code inserted in the label of the button as in the example below).

You can change the stat widgets to buttons. To display the temperature, I would use two widgets: one for the button and one for the temperature. If you set the title of a widget to the empty string you won't get a title, so you don't end up with two "sala" titles. You will have to play around a little to get the layout you like... 🏗

> [@nileio](#):
>
> I can possibly help with TypedInput.

That would be very appreciated, thank you for offering!!! I've made progress over the last week and some of the issues are fixed. I believe what I'm missing is:

- add a selection for "unset" or "null" so one can clearly unset a field (same effect as string + empty box or json "null")
- add '...' button to string input to bring up a multi-line text editor so one can input some text
- possibly integrate the color picker into TypedInput

For reference, the code is at [node-red-flexdash/plugin/flexdash-plugin.html at main · flexdash/node-red-flexdash · GitHub](https://github.com/flexdash/node-red-flexdash/blob/main/plugin/flexdash-plugin.html#L461-L529) and gets called from the oneditprepare and oneditsave from [node-red-flexdash/templates/widget-node.html at main · flexdash/node-red-flexdash · GitHub](https://github.com/flexdash/node-red-flexdash/blob/main/templates/widget-node.html#L59-L78) (which is a template for the node generator). You can see it in action in any of the core widgets. Maybe we need to hack up a core widget and embed the load\_props\_edit and save\_props\_edit functions to serve as a test-bed?

[Previous page](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861.md?page=4)

[Next page](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861.md?page=6)