Populating a form with data from db

Dashboard
1

I am hoping to be able to create a form using the form element of the dashboard. I need the following to occur:

  1. A dropdown in the form from the Dashboard Node collection containing prepopulated userids + year of birth of users which are stored in a db table (I am using either Firebase, Firestore or MySql, whichever will end up working more easily)
  2. A dropdown in the form in two parts, the first informing the second. So: user selects Fruits from the first dropdown, the second dropdown populates apples, bananas etc. for the user to make their final selection. These will have to be related items from two tables with some form of key in MySQL, some node in Firebase or some collection in Firestore).

Why using the Form from the dashboard? I need to have the ability to not send data immediately but to allow the form to be filled in completely before sending to DB.

Any hints and/or links to solutions already posted that I can't seem to find very welcome :slight_smile:

Best wishes all!

d.

2

I think you will need to hit up the Dashboard Template node to add some custom processing in order to achieve this with Dashboard.

I might be tempted to use NR to create API's that you can call to populate your dropdowns since that gives you an easy way to request the latest data.

3

Hmm, good advice. Have you seen any instances where people have shared ways of doing this? I've struggled to find any, but it seems surprising as I am sure it's not that uncommon a use case is it?

4

No, not really. But it is so easy to create a custom API using NR that I am not sure people even realise that they've done it :slight_smile:

Dashboard also includes jQuery along side Angular 1 for some reason which means that you can use jQuery to manage the AJAX calls to your API for you. Creating an API is as simple as using the http-in/out nodes. The in node is triggered by a request from your Dashboard code and will be used to trigger the request to the db. The data from that is then sent to the http-out node which sends it back to the calling browser.

5

This is really crude, but it might give you ideas you can use without resorting to a template node or custom API.

[{"id":"57e0f48f.2095cc","type":"inject","z":"f63bb00e.623cd8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":80,"wires":[["7bc2234f.756184"]]},{"id":"7bc2234f.756184","type":"change","z":"f63bb00e.623cd8","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"['fruits','vegetables','drinks']","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"fruits","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":220,"y":140,"wires":[["3bcb1d68.454592"]]},{"id":"3bcb1d68.454592","type":"ui_dropdown","z":"f63bb00e.623cd8","name":"","label":"","tooltip":"","place":"Select option","group":"2f028802.e68d","order":1,"width":0,"height":0,"passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":390,"y":140,"wires":[["fe9c6f12.2e1cc"]]},{"id":"fe9c6f12.2e1cc","type":"switch","z":"f63bb00e.623cd8","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"fruits","vt":"str"},{"t":"eq","v":"vegetables","vt":"str"},{"t":"eq","v":"drinks","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":450,"y":220,"wires":[["f49503bd.72a76"],["b7303574.28e768"],["f8d4e225.5471f"]]},{"id":"f49503bd.72a76","type":"change","z":"f63bb00e.623cd8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{'title':'apples'},{'title':'bananas'},{'title':'oranges'}]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":180,"wires":[["118429a4.b9a3b6"]]},{"id":"b7303574.28e768","type":"change","z":"f63bb00e.623cd8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{'title':'maize'},{'title':'beans'},{'title':'squash'}]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":220,"wires":[["118429a4.b9a3b6"]]},{"id":"f8d4e225.5471f","type":"change","z":"f63bb00e.623cd8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{'title':'beer'},{'title':'wine'},{'title':'water'}]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":260,"wires":[["118429a4.b9a3b6"]]},{"id":"118429a4.b9a3b6","type":"ui_list","z":"f63bb00e.623cd8","group":"2f028802.e68d","name":"","order":2,"width":"0","height":"0","lineType":"two","actionType":"click","allowHTML":false,"x":790,"y":220,"wires":[["bb4e2eca.92bcd"]]},{"id":"bb4e2eca.92bcd","type":"debug","z":"f63bb00e.623cd8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":930,"y":220,"wires":[]},{"id":"2f028802.e68d","type":"ui_group","z":"","name":"Test","tab":"cb94cd6.524bd3","order":2,"disp":true,"width":"6","collapse":false},{"id":"cb94cd6.524bd3","type":"ui_tab","z":"","name":"NR Discussion","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

The dashboard ui_list node could be replaced by ui_form, if the user needs to add new information rather than just make a selection.

6

Thank you! Will give it a try :slight_smile: