Working with modals

Adding a pop of utility to your application.

What's a modal?

Before we get into the nuances of using a modal in a Retool app, it’s probably worth taking a moment to define what a modal is in the first place. Modals are windows — both large and small — that “pop” onto the screen when an action is taken. Sometimes these come in the form of a warning (e.g. “Are you sure you want to delete that?”) and sometimes they can be in the form of something useful (e.g. clicking a ‘view details’ button and seeing the specifics about an object). Modals allow you to both save space as well as present the right information, at the right time. No matter what type of modal you’re looking for, we’ll cover all the cases here.

What we're going to cover:

  • The Basics and Properties
  • Scripting Modals
  • Applications of Modals

The basics and properties

To add a modal into your application, find it in the component sidebar on the right and drag in onto the canvas. It will look just like a normal button at first, so don’t be alarmed! To see the modal in action, click the button. Once you do so, you’ll see the modal window pop up. Neat? Very.

An open modal acts as a container does, meaning that you can drag and drop other components into it when it’s open!

Modals in Retool have width and height properties that you can set in the component inspector. You can use pixels (55px) or percentages (60%).

Remember that anything inside those properties can be scripted as JavaScript within curly brackets, so you can dynamically set modal sizes based on other parts of your app. For example, if you wanted to change your modal size based on the values in a dropdown components, you might use this for the "width" property:

{{ (dropdown.value > 5) ? "500px" : "400px" }}

Next, you’re able to set an action handler that will fire a query on open or close actions. In order to configure these, we give you a dropdown to select which query to be triggered. If you’d like to systematically close the modal and trigger a query simultaneously, we’ll cover that in the next section — hang tight.

Since modals pop onto the page, you might want to be able to scroll down to see more information inside it. Go ahead and flip the “Scroll?” toggle to enable this!

Scripting modals (e.g. close on form submit)

Let’s say you have a form inside of a modal. Once you submit the form, you want the modal to automatically close. That’s scripting a modal! We’ll follow the logic stated in our documentation about scripting Retool.

In this particular case, modals have a .open and .close property associated with them:
Opens a modal

Closes the modal

Assuming you have a query created to submit your form, let’s go ahead and create a single query of type “RunJS” code to trigger both the submit query AND script the modal together. It will look something like this:

Now, you can attach your newly created combined query to the form submit handler and you’re good to go! If you're using a button to submit your form, you can select the query you built to close your modal in the "On click" field:

Open a Modal from a Table

You have a table that shows you a list of customers that have placed orders. Upon clicking that customers ID, you want to see the orders they’ve placed — displayed in a modal.

Tables columns now have a property where you can change the column type to ‘modal’! To find this you’ll first want to select the table so that the properties bar on the right of the page shows. There you’ll see a list of all your columns. Go ahead and select the one you’d like to enable the modal pop up on click and change the column type to “modal”!

Open a Modal from an action button in a Table

If you’d like a custom sized modal from your table, there’s another way to achieve the modal pop up effect from clicking on a row in the table.

First, drag a modal onto the canvas just under the table. While you have the modal selected, there is a property in the right side menu for that modal that both lets you resize it as well as hide it when a certain condition is true. In order to hide the modal, write ‘true’ in the input so that it’s always hidden.

Next, you’re going to want to create a JavaScript query that systematically opens the modal — will work well!

Last, you are going to select the table so that the properties show on the right hand side of the screen. From there, add an action button to the table and hook up the JavaScript query you wrote to that button.

Click the action button and VOILA! A modal pop up from a table!

Did this page help you?