FR - Dashboard Form to include drop down

Dashboard
1

Hi ,

I am aware that Dashboard - base Angular is EOL.
Having said this - the current Dashboard is extremely flexible.

I am not sure if any active pieces are happening on it

I wanted to a raise a FR for existing Form widget - if option of drop down can be added to it - it would be extremely useful.

Currently , we need to implement Form and Dropdown separately and then manage the sync between them is almost impossible - then context variables etc.. need to come in - plus the state needs to be maintained so that they remain in sync.

Hope i could explain.

2

There are no existing plans to add that to the dashboard ui-form. Of course if someone were to offer up a pull request we would be happy to look at it.

3

Thanks @dceejay .

Can you share what i need to do to create a PR ?
(Even previously i got stuck on one of the other FRs due to this. ).
Does it involve technical detailing ? going into details of what needs to be changed where ?

Additionally, in the absence of the above PR - would you know how i can achieve the combo of form and drop down - possibly without involving context variable ?

4

To create a Pull Request you need to clone the existing repository - then create a branch for you to work on - then edit the code to do what you want (and test it) then create a pull request to send/offer it back to the project - Pull requests - GitHub Docs - where we can then check it work etc before accepting the changes into the project. And yes lots of technical detailing.. like making it work and testing it in various use cases.

With standard nodes - I would probably feed both into a function node - and yes use internal node status (rather than flow or global) - to hold the current results... until the form is submitted and then send them combined... - Or maybe use the select to populate one of the fields in the form so it's already filled in when they hit OK. etc. Not really thought about it to be honest.

5

I would configure the form and dropdown to send different topics and feed the two into a Join node configured like this

image
image526Ă—537 34.4 KB

Follow that with a Switch node set to only pass messages where the topic is that of the form, and then each time submit is pressed you will get a message with all the fields. If submit is clicked before the dropdown entry has not been selected then that field will not exist so you will have to cope with that somehow.

1 Like
6

If number of message parts is set to 1, you could submit form without selecting a dropdown. May be better to set it to 2.

Or you could move dropdown payload to a mag.payload.<property_name>, then merge the two payloads, with a count of the number of form elements + 1
e.g.

[{"id":"207363c6.8fdc6c","type":"ui_dropdown","z":"30af2d3e.d94ea2","name":"","label":"","tooltip":"Id","place":"Select option","group":"2d4fe667.28f8ba","order":10,"width":0,"height":0,"passthru":false,"multiple":false,"options":[{"label":"one","value":"one","type":"str"},{"label":"two","value":"two","type":"str"},{"label":"three","value":"three","type":"str"}],"payload":"","topic":"dropdown","topicType":"str","className":"","x":230,"y":200,"wires":[["31a229df.880f26"]]},{"id":"31a229df.880f26","type":"change","z":"30af2d3e.d94ea2","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload.id","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":430,"y":200,"wires":[["ac07e9cc.1dd27"]]},{"id":"ac07e9cc.1dd27","type":"join","z":"30af2d3e.d94ea2","name":"merge","mode":"custom","build":"merged","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"3","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":460,"y":260,"wires":[["8a59a5c7.403248"]]},{"id":"5ca810f8.ba885","type":"change","z":"30af2d3e.d94ea2","name":"","rules":[],"action":"","property":"","from":"","to":"","reg":false,"x":295,"y":260,"wires":[["ac07e9cc.1dd27","f78397ea.246688"]],"l":false},{"id":"8a59a5c7.403248","type":"switch","z":"30af2d3e.d94ea2","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"form","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":600,"y":260,"wires":[["24b442be.b0e346"]]},{"id":"f78397ea.246688","type":"ui_form","z":"30af2d3e.d94ea2","name":"","label":"","group":"2d4fe667.28f8ba","order":11,"width":0,"height":0,"options":[{"label":"name","value":"name","type":"text","required":true,"rows":null},{"label":"age","value":"age","type":"number","required":true,"rows":null}],"formValue":{"name":"","age":""},"payload":"","submit":"submit","cancel":"cancel","topic":"form","topicType":"str","splitLayout":"","className":"","x":210,"y":260,"wires":[["5ca810f8.ba885"]]},{"id":"24b442be.b0e346","type":"debug","z":"30af2d3e.d94ea2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":790,"y":260,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
7

Thank You @Colin, @E1cid .

The challenge with this approach is

  1. If for some reason - selects an option in drop down. Goes to the form and realizes something is incorrect - and goes back to dropdown - multiple events for dropdown come. This can potentially happen multiple times.
  2. I have multiple users working with the Dashboard. It means that for each user maintain the socket details as well who caused above scenario to happen.
  3. timeout handling...... if for some reason user disconnects midway - then join will stiill have parts in memory waiting for submit event to come.

With everything in the form - i dont care - what user does until he clicked Submit - the action is limited to user for whom the socket ID came from Form output.

(Currently i am not having to maintain states. Each user action results in an action whch doesn't depend on other users).

8

That doesn't matter, none of them will get past the Switch node.

That is a disaster for this problem. I don't think you mentioned that. I suspect that this is extremely difficult to solve, as you said in your initial post.

That is just an extension of the multi user issue.

9

Issue 2
You could save the dropdown socketid in the payload, then after switch, check that it matches the form socket id, if not reset the dropdown, This should make sure that all form submissions are are from the same socketid
e.g.

[{"id":"207363c6.8fdc6c","type":"ui_dropdown","z":"30af2d3e.d94ea2","name":"","label":"","tooltip":"Id","place":"Select option","group":"2d4fe667.28f8ba","order":10,"width":0,"height":0,"passthru":false,"multiple":false,"options":[{"label":"one","value":"one","type":"str"},{"label":"two","value":"two","type":"str"},{"label":"three","value":"three","type":"str"}],"payload":"","topic":"dropdown","topicType":"str","className":"","x":230,"y":200,"wires":[["31a229df.880f26"]]},{"id":"185351dc.a8fbde","type":"change","z":"30af2d3e.d94ea2","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":380,"wires":[["207363c6.8fdc6c"]]},{"id":"31a229df.880f26","type":"change","z":"30af2d3e.d94ea2","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload.id","tot":"msg"},{"t":"set","p":"payload.socket_dropdown","pt":"msg","to":"socketid","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":200,"wires":[["8f8902ab.e18","9613b30c.b3418"]]},{"id":"8a59a5c7.403248","type":"switch","z":"30af2d3e.d94ea2","name":"","property":"socketid","propertyType":"msg","rules":[{"t":"eq","v":"payload.socket_dropdown","vt":"msg"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":720,"y":260,"wires":[["24b442be.b0e346"],["185351dc.a8fbde"]]},{"id":"8f8902ab.e18","type":"debug","z":"30af2d3e.d94ea2","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":200,"wires":[]},{"id":"9613b30c.b3418","type":"join","z":"30af2d3e.d94ea2","name":"","mode":"custom","build":"merged","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"4","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":430,"y":260,"wires":[["ff87991b.c36618"]]},{"id":"ff87991b.c36618","type":"switch","z":"30af2d3e.d94ea2","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"form","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":580,"y":260,"wires":[["8a59a5c7.403248"]]},{"id":"24b442be.b0e346","type":"debug","z":"30af2d3e.d94ea2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":830,"y":320,"wires":[]},{"id":"5ca810f8.ba885","type":"change","z":"30af2d3e.d94ea2","name":"","rules":[],"action":"","property":"","from":"","to":"","reg":false,"x":295,"y":260,"wires":[["f78397ea.246688","9613b30c.b3418"]],"l":false},{"id":"f78397ea.246688","type":"ui_form","z":"30af2d3e.d94ea2","name":"","label":"","group":"2d4fe667.28f8ba","order":11,"width":0,"height":0,"options":[{"label":"name","value":"name","type":"text","required":true,"rows":null},{"label":"age","value":"age","type":"number","required":true,"rows":null}],"formValue":{"name":"","age":""},"payload":"","submit":"submit","cancel":"cancel","topic":"form","topicType":"str","splitLayout":false,"className":"","x":210,"y":260,"wires":[["5ca810f8.ba885"]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

All in this could get very complicated very quickly, Maybe try a different dashboard , that handles multiple users better. Or separate tabs for each user, or separate groups for different user input.

10

Precise reason I prefer to have drop down in the form. This way output of complete form goes with the socket Id…being transparent to me as developer. It ensures each front end user gets his own response ( I maintain the socket I’d throughout)

11

Not sure how I missed this.

Thanks @dceejay .

Not yet there technically :-(. Let me see if we can figure some workaround.

12

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