UI tips: Creating dropdown actions in Retool

We’ve moaned plenty before about button overload and offered several tricks for UI that keep your apps extra efficient, but in this tutorial, we’re going to address a common UI sticking point we see in many Retool apps: creating tidy options for multiple actions. Building dropdown buttons with actions in Retool helps keep your interface clean and user-friendly and is a really intuitive design pattern used in many web apps.

Instead of cluttering your UI with multiple buttons, you can group related actions—like Edit, Delete, or Disable User—into a single dropdown. This makes interacting with data much more streamlined. In Retool, you can do this with a neat trick involving a table custom column and an option list.

Here’s what this will look like when we’re done:

We’re also going to show you best practices for setting up your create and edit forms to be more maintainable and less prone to error.

Let’s jump in!

Configuring Dropdown Actions in Retool

To get started, click on + at the left side of your screen and drag a Table onto the editor to display your data.

Connect it to a data source: For this tutorial, we’ve used Retool’s sample data.

Add a column to your table, set the ID to "actions" and label it "Actions". Then, enable the Editable toggle for user selections. Set a placeholder like "View >>" to make the dropdown button visible in the table. We added this to the left-hand side of the table as this is a common design pattern to which users will be accustomed.

Next, to set the dropdown options, add an Add-on “Option-List” to the column. Configure the options by selecting Manual input, clicking the ➕to add a new option, then setting each option’s Value and Label.

For this example, we’ve added options like "Update", "Disable User", and "View User". Though it can be tempting to put all actions into a single dropdown on a webpage, it’s important to create logical lists and group similar actions, such as the user actions in this table. This is because otherwise, dropdowns can quickly become bloated with options, making it harder for the user to find the action they are looking for and slowing them down.

Finally, make sure to disable ‘Allow custom Values’ to prevent users from entering their own options.

Using event handlers to trigger actions

Add a modal frame to your app and call it something like addAndEditModal.

Next, let’s connect this modal up to our Actions column and our ‘Update’ button in the sourceTable. Head to the setting of your actions dropdown button.

• Click ➕ in Event Handlers.
• Set the event to Change cell to detect dropdown selection.
• Choose Run script as the action and paste the code below

const latestChange = sourceTable.changesetArray[sourceTable.changesetArray.length - 1];
if (latestChange && latestChange.id === sourceTable.selectedRow.id) {
const selectedAction = latestChange.actions;
if (selectedAction === "update") {
addAndEditForm.setData(sourceTable.selectedSourceRow);
addAndEditModal.show();
} else if (selectedAction === "disable") {
disableUser.trigger();
} else if (selectedAction === "view") {
userModal.show();
parentData.setValue(sourceTable.selectedRow);
}
sourceTable.clearChangeset();
}

What does this do? This listens for the most recent dropdown selection (latestChange) and checks if it matches the currently selected row. It proceeds to run the appropriate action based on the user’s selection

Update: Prefills the form with row data and opens the modal

Disable: Runs the disableUser query

View: Opens a user modal and sets row data into a parentData state

Lastly, we clear the table’s  changesetArray to prevent stale state

Now, when a user selects an option from the Actions dropdown, the system will dynamically update and trigger the correct and expected action

Best practices for forms: dynamic create/edit

Since building in Retool is so quick and easy, it’s also very easy to create more elements than you need and forget coding best practices. As most Add and Edit forms contain the same values, it’s best to build a single form that changes dynamically (where needed) according to the action you are looking to execute.

We already have our ‘update’ functionality, so next, add a Button component and name it clearly, like "addUser", and configure the event handler to:

• Open the modal using: addAndEditModal.show() - just like we did for our update action
• Reset the form’s data by setting it to an empty object {}
  

In the title of your modal, you can use the markdown “ ### {{ addAndUpdateForm.initialData?.id != null ? "Update" : "Add" }} User”. This ensures that the title will dynamically display to match the selected action.

Now, to set up our form modal, pull in a form component and click Generate Form from Table to take advantage of Retool’s automated form generator to quickly create your form.

Select sourceTable as the data source and choose the fields you would like to include in your form.

Congratulations! You have successfully generated your form.

In the same way, you can also customize the Submit button to change its text based on formState.value, i.e. whether it’s Adding or Updating a user. Use the following expression to update the button text when the form is opened for updating a user: {{ addAndUpdateForm.initialData?.id != null ? "Update" : "Submit" }}.

Next, we’ll need two event handlers to trigger our Edit and Create queries respectively. Once you’ve set up two queries to either add or update a row in your database, add an Event Handler to the Submit button. Set the event type to Submit, choose Control Query as the action, and select updateData.trigger() to update user details.

Use an Only run when condition to ensure this action runs specifically for updates: {{ !addAndUpdateForm.initialData?.id }}

Similarly, add another Event Handler for new data entries. Set the event to Submit, choose Control Query as the action, and select the appropriate query (e.g., addData.trigger()).

Use an Only run when condition to ensure that the event runs only when "Add" is selected:  {{ addAndUpdateForm.initialData?.id }}. Now, the correct query will also fire depending on whether the form is the add or update version.

With these steps, you have successfully implemented Dropdown Actions in Retool! 🎉

Now, when users select an option from the Actions dropdown, the system dynamically updates formState, and the corresponding modal or function is triggered automatically.

Happy Retooling! 🚀