Form node as output

Dashboard
1

A common problem I have is that using the standard dashboard, it is tricky to display several fields in an organised manner. Sure, you can set up 10 or 20 fields of text for a machine, but what to do when you have the same 10 or 20 fields on 30 or 40 machines? That's a lot of branching flows, and a lot of nodes that must be configured individually.

In my usual application, I had a workaround that used function nodes to transform the JSON object into an HTML string that prepares a formatted table (I used css to style the borders and warning/error themes for the out-of-bound parameters), then I feed that into a text node.

The problem for that is the humongous amount of work required for each individual template, but once it's done, it's just copy-pasting the text node for a machine, and feed it the formatted HTML string. Still, that's a workaround, and a clunky one at best.

I've been using forms lately, and I realised that forms are easy to arrange, you can display a big amount of fields in a simple column or two-column arrangements. There are also several controls to choose from.

Forms can be initialised by feeding them a proper JSON with the field names and the initial values, so each field is able to serve as a display. They can already be used to display data, but the only problem is that the fields are meant as an input, and as far as I know, that can't be disabled. Same for the submit-cancel buttons.

I was wondering... would it be possible to disable the input/button functions and use the form just as a display?

I think it would already save a lot of time and enormously simplify flows where you require to show several parameters. Of course, some options (as changing the colours of a field according to its value) would be missing, but it would still be very useful.

2

It is possible to disable the form via msg.enabled = false

3

You are possibly trying to push Dashboard 1 beyond its really usefulness. This is a typical issue with framework-based UI's.

You may wish to consider whether UIBUILDER would be more appropriate. It already has, for example, a defined JSON schema for the creation of any HMTL UI.

4

I'll take a look, thanks.

5

I know there are better alternatives. But things are as follows:

My usual duties involve doing maintenance/programming on 30+ automation machines (including industrial robots) that are hooked into the production lines, plus a few mobile robots and smart storage automation. At first, it took me all of my working hours. As I tweaked things, errors became less frequent and machines more reliable, so I had some time to spare. Since the factory was partially rebuilt with the "industry 4.0" goal in mind and most of the new machines had the option, I started getting data and using it to create alarms, monitor production data, and so on.

And yes, Dashboard 1.0 is missing a lot of things like multiuser support. The only experience I have with user interfaces is plain HTML (with a bit of javascript and css) and Siemens Touchscreen HMIs. Having to store information properly already forced me to learn MySQL (which I didn't have any previous knowledge of). I also had to deal with different brands of PLCs and their quirks when it comes to information. I had to learn by doing, and it took a long time.

In the beginning, it was mostly for personal use, so it was fine. Then a time came where some colleagues saw what I did and realised it made their lifes easier if they also had access to it. Then things began to spiral, with several people making requests. Some were easy to solve, but some required something else entirely.

Some colleagues are trying to push me into using Grafana instead of the NR Dashboard as our UI, but I have no previous experience and when I tried to set it up for testing, it didn't work because of some IT shenanigans. Out IT department is basically one guy who has too much work, so he can't support further.

There's also the option of getting all the data into our SAP system and use our SAP frontend, but we have no one in-house with SAP technical knowledge, and we would need to hire external people to do that.

In the mean time, whenever I ask for additional resources (one or two guys to handle frontend/SAP integration), I get the "don't count on it, keep working by yourself, you're doing a great job" standard reply, and nothing happens except me getting more requests and no resources.

Anything new I need to learn is very time-consuming and any mistakes while doing so might break NR temporarily (I'm not allowed to have a separate VM for development, so I have to work on a production environment that is now used by several colleagues).

And days are still 24 hours, last time I was able to check. So, even if I have to push Dashboard 1.0 above and beyond its initial purpose, it's faster for me than learning an entirely new thing (if doable).

6

Oh, the familiar tale! :confounded:

Of course, if you have decent access to the VM, you can run a completely separate instance or two of Node-RED for testing. And a local PC, if allowed to run node.js can happily run a dev version.

But I get your issues for sure.

So I'll just say that, with uibuilder, you can use your HTML knowledge. And you could use it along side Dashboard too so you wouldn't need to do any kind of big-bang.

7

Give this a try and see if it will work for you, I removed the buttons and fixed the "faded out" look when form is disabled -

image
image1049Ă—183 2.17 KB

[{"id":"c79fa04ce3ffce00","type":"inject","z":"5a045d978a5b966a","name":"disable input","props":[{"p":"enabled","v":"false","vt":"bool"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":815,"y":255,"wires":[["535b58b5b49352b8"]]},{"id":"f15cd1d71c85baf0","type":"inject","z":"5a045d978a5b966a","name":"show data 1","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"1\":\"Machine two\",\"2\":\"35\",\"3\":\"12/09/1983\",\"4\":\"running\"}","payloadType":"json","x":820,"y":330,"wires":[["535b58b5b49352b8"]]},{"id":"535b58b5b49352b8","type":"ui_form","z":"5a045d978a5b966a","name":"","label":"","group":"9c90a075584ede2b","order":0,"width":0,"height":0,"options":[{"label":"one","value":"1","type":"text","required":false,"rows":null},{"label":"two","value":"2","type":"text","required":false,"rows":null},{"label":"three","value":"3","type":"text","required":false,"rows":null},{"label":"four","value":"4","type":"text","required":false,"rows":null}],"formValue":{"1":"","2":"","3":"","4":""},"payload":"","submit":"","cancel":"","topic":"topic","topicType":"msg","splitLayout":true,"className":"myform","x":1025,"y":345,"wires":[[]]},{"id":"a2a646f43efdab37","type":"ui_template","z":"5a045d978a5b966a","group":"9c90a075584ede2b","name":"","order":1,"width":0,"height":0,"format":"<style>\n    .myform {\n        opacity: 1 !important;\n\n    }\n\n    div.form-control.form-control-single.form-control-no-label {\n        display: none\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1035,"y":300,"wires":[[]]},{"id":"ad36b72768f84b90","type":"inject","z":"5a045d978a5b966a","name":"show data 2","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"1\":\"Machine one\",\"2\":\"99\",\"3\":\"12/09/2023\",\"4\":\"stopped\"}","payloadType":"json","x":820,"y":390,"wires":[["535b58b5b49352b8"]]},{"id":"9c90a075584ede2b","type":"ui_group","name":"Form Test","tab":"f394bc89e321d6f1","order":1,"disp":false,"width":"19","collapse":false,"className":""},{"id":"f394bc89e321d6f1","type":"ui_tab","name":"Form Test","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
8

I'll give it a try tomorrow, thanks for the pointer.

9

It's your lucky day :-)...
I was fixing another issue - and have added the ability to v3.6.2. If you set both the Submit and Cancel buttons blank (clear) - then they will now disappear completely.
(will get pushed later this evening)

2 Likes
10

If you upgrade the dashboard to v3.6.2, and use this modified flow then it will look better -
image

[{"id":"c79fa04ce3ffce00","type":"inject","z":"5a045d978a5b966a","name":"disable input","props":[{"p":"enabled","v":"false","vt":"bool"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","x":815,"y":270,"wires":[["535b58b5b49352b8"]]},{"id":"f15cd1d71c85baf0","type":"inject","z":"5a045d978a5b966a","name":"show data 1","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"1\":\"Machine two\",\"2\":\"35\",\"3\":\"12/09/1983\",\"4\":\"running\"}","payloadType":"json","x":820,"y":330,"wires":[["535b58b5b49352b8"]]},{"id":"535b58b5b49352b8","type":"ui_form","z":"5a045d978a5b966a","name":"","label":"","group":"9c90a075584ede2b","order":0,"width":0,"height":0,"options":[{"label":"one","value":"1","type":"text","required":false,"rows":null},{"label":"two","value":"2","type":"text","required":false,"rows":null},{"label":"three","value":"3","type":"text","required":false,"rows":null},{"label":"four","value":"4","type":"text","required":false,"rows":null}],"formValue":{"1":"","2":"","3":"","4":""},"payload":"","submit":"","cancel":"","topic":"topic","topicType":"msg","splitLayout":true,"className":"myform","x":1025,"y":345,"wires":[[]]},{"id":"a2a646f43efdab37","type":"ui_template","z":"5a045d978a5b966a","group":"9c90a075584ede2b","name":"","order":1,"width":0,"height":0,"format":"<style>\n    .myform {\n        opacity: 1 !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1035,"y":300,"wires":[[]]},{"id":"ad36b72768f84b90","type":"inject","z":"5a045d978a5b966a","name":"show data 2","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"1\":\"Machine one\",\"2\":\"99\",\"3\":\"12/09/2023\",\"4\":\"stopped\"}","payloadType":"json","x":820,"y":375,"wires":[["535b58b5b49352b8"]]},{"id":"9c90a075584ede2b","type":"ui_group","name":"Form Test","tab":"f394bc89e321d6f1","order":1,"disp":false,"width":"19","collapse":false,"className":""},{"id":"f394bc89e321d6f1","type":"ui_tab","name":"Form Test","icon":"dashboard","disabled":false,"hidden":false}]
11

@dceejay when set to 2 columns the label seems to be squashed :wink:
image

12

Form node does quite of calculations to manage sizes of its elements according to content what will be displayed. It doesn't rely purely on CSS in which case it could maybe fixed with CSS override. But also those calculations don't take into account the configuration without buttons.
I know, I did that 2 column layout, the calculations have some magic numbers in it and it is far from straightforward to be easily fixed/changed.

13

Yeah I found that when trying to tweak it for @OriolFM, even though I managed to not display the button div, it didn't recover the space used.

14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.