How to use a dropdown action bar to replace multiple buttons, from our UI sessions Buttons post, which you can read in full here.
Our final, and snazziest, Retool hack is super simple and is one of our absolute favourites - we use it across many of the apps that we develop. In essence, it takes a series of action buttons (e.g. edit, view, send, save, upload documents) and condenses what would be many buttons into a simple action dropdown.
This is how it looks:
It’s good, right?!
It works by triggering modals to open when the option is selected by using event handlers (which can also be linked directly to queries where needed).
To get started, insert your modal components into the app, set them up however you need, and then hide the button itself by adding ‘true’ to the ‘hidden’ value box.
Then add a dropdown/select component to your app and label it ‘Action’.
Set the values of your select component however you need. Here is how ours looked:
Then, in the event handlers, set the values to trigger the modals to open. Here is our ‘Edit Details’ modal as an example:
Now, when the dropdown value changes, the editModal will open, but only if the value changes to ‘Edit’. Do the same with your other modals.
You can also connect this straight to a query, just like our ‘delete’ action:
When ‘delete’ is clicked, the delete query will run.
Finally, you can use a JavaScript query to set the dropdown to clear each time the value changes, so that you can select another option or reselect the same one.
Here is your query, which simply sets the dropdown value to empty (“ ”):
And here is how to trigger it from your dropdown:
Read more tips in the full post here.