Back Button on UI Pages

Hello, I am looking to make a button for the Node Red UI that will simply take me back to the last tab I was on. The solution posted in this topic seems like what I need to do, I am just relatively new to Node-Red / coding and would like to see an example of this or even just a walkthrough...

Many thanks

Is there a reason why you cannot use the back buttons of the browser?

Anyway, I worked on the problem a bit. Sure not perfect, because it still has function nodes in it :see_no_evil: but sometimes it feels easier to use a function node.

You need to install an extra node: node-red-contrib-toggle. The other nodes are standard (assuming you have installed the dashboard node-red-dashboard too.

[{"id":"65186acd.613074","type":"tab","label":"tabs back button","disabled":false,"info":""},{"id":"39af5c3.1662ea4","type":"ui_ui_control","z":"65186acd.613074","name":"","events":"change","x":120,"y":220,"wires":[["a95285b8.da83b8"]]},{"id":"d2bd44f9.e2e0b8","type":"debug","z":"65186acd.613074","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":810,"y":220,"wires":[]},{"id":"22e79623.511efa","type":"ui_button","z":"65186acd.613074","name":"back 2","group":"4d8bab62.970804","order":0,"width":0,"height":0,"passthru":false,"label":"back","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":110,"y":120,"wires":[["2f8d9066.f8449"]]},{"id":"74a56399.550f0c","type":"ui_button","z":"65186acd.613074","name":"back 1","group":"dacdd2cd.a3988","order":0,"width":0,"height":0,"passthru":false,"label":"back","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":110,"y":80,"wires":[["2f8d9066.f8449"]]},{"id":"37f36b44.774d44","type":"ui_button","z":"65186acd.613074","name":"back 3","group":"2fdfaf57.6fee5","order":0,"width":0,"height":0,"passthru":false,"label":"back","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":110,"y":160,"wires":[["2f8d9066.f8449"]]},{"id":"28ace144.aaf96e","type":"toggle","z":"65186acd.613074","name":"","onOffTopic":"","onValue":"0","onType":"num","offValue":"1","offType":"num","toggleTopic":"","toggleValue":"toggle","toggleType":"str","passOnOff":"always","x":490,"y":220,"wires":[["5f7350ed.0fcc3"]]},{"id":"a95285b8.da83b8","type":"change","z":"65186acd.613074","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"toggle","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":310,"y":220,"wires":[["28ace144.aaf96e"]]},{"id":"5f7350ed.0fcc3","type":"function","z":"65186acd.613074","name":"","func":"flow.get(\"tab_click_history\")[msg.payload] = msg.tab; // save current tab\nflow.set(\"slot_index\", msg.payload == 0 ? 1 : 0 ); // change index to previous tab\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":640,"y":220,"wires":[["d2bd44f9.e2e0b8"]]},{"id":"e202f442.6c9f48","type":"change","z":"65186acd.613074","name":"","rules":[{"t":"set","p":"tab_click_history","pt":"flow","to":"[0,0]","tot":"jsonata"},{"t":"set","p":"slot_index","pt":"flow","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":40,"wires":[[]]},{"id":"c5c8388d.eb2728","type":"inject","z":"65186acd.613074","name":"init","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":110,"y":40,"wires":[["e202f442.6c9f48"]]},{"id":"8d1adb58.540f78","type":"ui_ui_control","z":"65186acd.613074","name":"","events":"change","x":460,"y":120,"wires":[[]]},{"id":"2f8d9066.f8449","type":"function","z":"65186acd.613074","name":"","func":"msg.payload = flow.get(\"tab_click_history\")[flow.get(\"slot_index\")];\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":290,"y":120,"wires":[["8d1adb58.540f78"]]},{"id":"4d8bab62.970804","type":"ui_group","name":"Group Tab 2","tab":"d5ad8b85.f5ba18","order":2,"disp":true,"width":"6","collapse":false},{"id":"dacdd2cd.a3988","type":"ui_group","name":"Group Tab 1","tab":"a475f7ae.788338","order":1,"disp":true,"width":"6","collapse":false},{"id":"2fdfaf57.6fee5","type":"ui_group","name":"Group Tab 3","tab":"5ba5d455.383b6c","order":1,"disp":true,"width":"6","collapse":false},{"id":"d5ad8b85.f5ba18","type":"ui_tab","name":"Tab 2","icon":"dashboard","order":2,"disabled":false,"hidden":false},{"id":"a475f7ae.788338","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"5ba5d455.383b6c","type":"ui_tab","name":"Tab 3","icon":"dashboard","disabled":false,"hidden":false}]

EDIT: Let me know if you need some assistance.

Okay, here's a more optimized version (no need to use the toggle node anymore):

[{"id":"970005a1.f41878","type":"tab","label":"tabs back button optimized","disabled":false,"info":""},{"id":"7018df72.72f8a","type":"ui_button","z":"970005a1.f41878","name":"back 2","group":"4d8bab62.970804","order":0,"width":0,"height":0,"passthru":false,"label":"back","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":110,"y":120,"wires":[["9d401a0d.32ce28"]]},{"id":"77ee592b.fc0d48","type":"ui_button","z":"970005a1.f41878","name":"back 1","group":"dacdd2cd.a3988","order":0,"width":0,"height":0,"passthru":false,"label":"back","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":110,"y":80,"wires":[["9d401a0d.32ce28"]]},{"id":"466e5483.eb341c","type":"ui_button","z":"970005a1.f41878","name":"back 3","group":"2fdfaf57.6fee5","order":0,"width":0,"height":0,"passthru":false,"label":"back","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":110,"y":160,"wires":[["9d401a0d.32ce28"]]},{"id":"ecf25a53.38b3b8","type":"change","z":"970005a1.f41878","name":"","rules":[{"t":"set","p":"tab_click_history","pt":"flow","to":"[0,0]","tot":"jsonata"},{"t":"set","p":"last_tab","pt":"flow","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":40,"wires":[[]]},{"id":"4b7f6605.ad6d78","type":"inject","z":"970005a1.f41878","name":"init","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":110,"y":40,"wires":[["ecf25a53.38b3b8"]]},{"id":"cc0446d7.464e58","type":"ui_ui_control","z":"970005a1.f41878","name":"","events":"change","x":580,"y":100,"wires":[["cfa9ddb0.069f3","1732fd44.cdb3f3"]]},{"id":"cfa9ddb0.069f3","type":"debug","z":"970005a1.f41878","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":810,"y":60,"wires":[]},{"id":"1732fd44.cdb3f3","type":"function","z":"970005a1.f41878","name":"","func":"flow.get(\"tab_click_history\").pop(); // remove last element of the array\nflow.get(\"tab_click_history\").unshift(msg.tab); // add current tab id to the beginning of the array\nflow.set(\"last_tab\",flow.get(\"tab_click_history\")[1]); // remember last tab for using it later in the change node\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":820,"y":120,"wires":[[]]},{"id":"9d401a0d.32ce28","type":"change","z":"970005a1.f41878","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"last_tab","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":100,"wires":[["cc0446d7.464e58"]]},{"id":"4d8bab62.970804","type":"ui_group","name":"Group Tab 2","tab":"d5ad8b85.f5ba18","order":2,"disp":true,"width":"6","collapse":false},{"id":"dacdd2cd.a3988","type":"ui_group","name":"Group Tab 1","tab":"a475f7ae.788338","order":1,"disp":true,"width":"6","collapse":false},{"id":"2fdfaf57.6fee5","type":"ui_group","name":"Group Tab 3","tab":"5ba5d455.383b6c","order":1,"disp":true,"width":"6","collapse":false},{"id":"d5ad8b85.f5ba18","type":"ui_tab","name":"Tab 2","icon":"dashboard","order":2,"disabled":false,"hidden":false},{"id":"a475f7ae.788338","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"5ba5d455.383b6c","type":"ui_tab","name":"Tab 3","icon":"dashboard","disabled":false,"hidden":false}]

That works great! Thank you

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