Is it possible to send data from ui-form to a table?

Is it possible to use the ui-form node to put data into a table of some kind? i'm trying to get a leader-board type of thing working where I can input the information and it go right into the table but I'm not sure what i'm doing wrong.

Yes it it possible.

Nor are we :stuck_out_tongue:

Share your flow and someone will have a look :slight_smile:

[{"id":"501bcd6b.46c1a4","type":"ui_form","z":"5e29b817.d4c428","name":"","label":"","group":"3346acfc.8202b4","order":0,"width":"4","height":"4","options":[{"label":"Name","value":"Group Name","type":"text","required":true,"rows":null},{"label":"Time","value":"Time Remaining","type":"text","required":true,"rows":null},{"label":"Clues","value":"Clues Used","type":"number","required":true,"rows":null},{"label":"Date","value":"Date","type":"date","required":true,"rows":null},{"label":"Escaped?","value":"Did they escape?","type":"checkbox","required":true,"rows":null}],"formValue":{"Group Name":"","Time Remaining":"","Clues Used":"","Date":"","Did they escape?":false},"payload":"","submit":"submit","cancel":"cancel","topic":"topic","topicType":"msg","splitLayout":"","x":790,"y":880,"wires":[["967b13ab.763dc"]]},{"id":"23051269.a5479e","type":"comment","z":"5e29b817.d4c428","name":"Leaderboard","info":"","x":780,"y":840,"wires":[]},{"id":"967b13ab.763dc","type":"ui_table","z":"5e29b817.d4c428","group":"fc893c6c.aaeff","name":"Leaderboard","order":1,"width":0,"height":0,"columns":[{"field":"","title":"","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":1010,"y":880,"wires":[[]]},{"id":"bdc370b0.eda9a","type":"inject","z":"5e29b817.d4c428","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"payload","payloadType":"msg","x":790,"y":920,"wires":[["967b13ab.763dc"]]},{"id":"3346acfc.8202b4","type":"ui_group","name":"Music","tab":"5c030594.084acc","order":5,"disp":false,"width":"6","collapse":false},{"id":"fc893c6c.aaeff","type":"ui_group","name":"Leaderboard","tab":"c79bed56.dc9bd","order":1,"disp":true,"width":"6","collapse":false},{"id":"5c030594.084acc","type":"ui_tab","name":"Game Master","icon":"dashboard","disabled":false,"hidden":false},{"id":"c79bed56.dc9bd","type":"ui_tab","name":"LeaderBoard","icon":"dashboard","order":3,"disabled":false,"hidden":false}]  

Before looking at your flow, have you tried any of these from the flow library?

https://flows.nodered.org/search?term=crud&type=flow

I'm not sure what CRUD is, but I haven't tried them. After looking through they don't use a form in order to fill out the data in the table. Unless i'm not understanding (there's still a lot about node-red I don't understand, i'm still pretty new).

CRUD is Create, Read, Update, and Delete - its the programming definition related to table or data operations (i.e. search CRUD when you want to know about this area of programming)

Here is something to get you started...

image

[{"id":"501bcd6b.46c1a4","type":"ui_form","z":"1683bd9a.5e0a02","name":"","label":"","group":"fc893c6c.aaeff","order":1,"width":"10","height":"5","options":[{"label":"Name","value":"name","type":"text","required":true,"rows":null},{"label":"Time Left","value":"timeLeft","type":"text","required":true,"rows":null},{"label":"Clues Used","value":"cluesUsed","type":"number","required":true,"rows":null},{"label":"Date","value":"date","type":"date","required":true,"rows":null},{"label":"Escaped?","value":"escaped","type":"checkbox","required":true,"rows":null}],"formValue":{"name":"","timeLeft":"","cluesUsed":"","date":"","escaped":false},"payload":"","submit":"submit","cancel":"cancel","topic":"topic","topicType":"msg","splitLayout":"","className":"","x":790,"y":1480,"wires":[["20331c95b75d9f3d"]]},{"id":"23051269.a5479e","type":"comment","z":"1683bd9a.5e0a02","name":"Leaderboard","info":"","x":780,"y":1440,"wires":[]},{"id":"967b13ab.763dc","type":"ui_table","z":"1683bd9a.5e0a02","group":"fc893c6c.aaeff","name":"Leaderboard","order":2,"width":0,"height":0,"columns":[{"field":"name","title":"Name","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"timeLeft","title":"Time Left","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"cluesUsed","title":"Clues Used","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"date","title":"Date","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"escaped","title":"Escaped?","width":"","align":"left","formatter":"tickCross","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":1130,"y":1480,"wires":[[]]},{"id":"bdc370b0.eda9a","type":"inject","z":"1683bd9a.5e0a02","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"data","payloadType":"flow","x":800,"y":1520,"wires":[["967b13ab.763dc"]]},{"id":"20331c95b75d9f3d","type":"function","z":"1683bd9a.5e0a02","name":"Add Row","func":"var entry = {\n    name: msg.payload.name,\n    timeLeft: msg.payload.timeLeft,\n    cluesUsed: msg.payload.cluesUsed,\n    date: msg.payload.date,\n    escaped: msg.payload.escaped,\n}\nvar data = flow.get(\"data\") || [];\n\ndata.push(entry);\n\nflow.set(\"data\", data);\n\n// function sorter(a, b) {\n\n//     if (a.timeLeft < b.timeLeft) {\n//         return -1;\n//     }\n//     if (a.timeLeft > b.timeLeft) {\n//         return 1;\n//     }\n//     return 0;\n// }\n\n// data.sort(sorter);\n\nmsg.payload = data;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":940,"y":1480,"wires":[["967b13ab.763dc","1a60a95ce6285238"]]},{"id":"1a60a95ce6285238","type":"debug","z":"1683bd9a.5e0a02","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1090,"y":1540,"wires":[]},{"id":"fc893c6c.aaeff","type":"ui_group","name":"Leaderboard","tab":"c79bed56.dc9bd","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"c79bed56.dc9bd","type":"ui_tab","name":"LeaderBoard","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
1 Like

where do you guys (the node-red community) learn these things. Just from the forum and such, YouTube, or is there some masterclass I can take?

Coming from a programming background helps. Apart from that, read the docs, read the built in help, learn what to search.

Some free online JS training wont go amiss either.

Also, importantly, try stuff (as you did) and when you get stuck, ask - but provide info about what you have done. I often avoid those who come asking cap in hand with no effort to help themselves. But if they have tried something & got stuck, I dont mind helping out or pointing in the right direction.

For beginners - I recommend watching this playlist: Node-RED Essentials. The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain. Lots of tips in them videos

3 Likes

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