UI Tricks for Buttons: Replace Multiple Buttons with an Action Dropdown

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:

gif shows dropdown selection opening modals

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.

3 Likes

I needed to have a dynamic menu so I solved it this way:

  1. Create a transformer that returns the items to go into the menu:

     // trMenuItems
     let menu = ["Duplicate Invoice","Assign to a Different Account", "Cancel Current Invoice","Refresh Queries"]
     if ({{qryInvoicesSelect.data.template_id[0]}} > 0) {
      menu.push("Update w/ Newest Template")
     }
     return menu
    
  2. Assign that transformer to a select component's Values.

image

  1. Now create a js query that will execute the various menu items:

     // jsSelectMenuItem
     switch (selMenu.value) {
       case 'Duplicate Invoice':
         qryCopyInvoice.trigger()
         break;
       case 'Assign to a Different Account':
          modReassignInvoice.open()
         break;
       case 'Cancel Current Invoice':
         jsCancelInvoice.trigger()
         break;
       case 'Refresh Queries':
         jsRefreshQueries.trigger()
         break;
       case 'Update w/ Newest Template':
         jsUpdateInvoiceFromTemplate.trigger()
         break;
     }
     selMenu.setValue("") // Clear menu after selection
    
  2. And wire that up to the onChange event:

All done.

1 Like