Table of Contents

How to Create Dynamic Dropdowns in Forms

Lesley Updated by Lesley

Scenario

Dynamic dropdowns, also called dependent or cascading dropdowns, are actually just two related connection fields in a form. They allow you to show values in the second dropdown field based on the selection made in the first dropdown field.

For example, a consulting company wants to create new Projects, add Tasks, and assign them to an Employee they work with. On the Add Tasks form, they only want to see the Projects connected to that particular Employee. They do not want to see all the Project records in their database.

In other words, you’ll be editing the form to only show the child records connected to the selected parent record.

Requirements

If this your first time creating an app, you'll need to know some basics about adding tables, fields, pages, and views. You can start by reading our Builder Basics section. 

Other good resources can be found in our designing the database and building pages sections of the knowledge base.

Steps

Add Your Tables

This article uses the Project Management template app to illustrate this example. In the Data section of the Builder, add your three tables:

  • Tasks
  • Employees
  • Projects

You can learn more about adding tables here.

Add Connections

In the Data section of the Builder, navigate to the Employees table. Add a connection to the Projects table:

In Projects, add two connection fields, one to Employees and one to Tasks.

You can learn more about adding connections here.

Add Records

Add some sample records to the Project and Employee tables, connecting each Project record to an Employee.

Learn more about adding and managing records here.

Add a Form

In the Pages section of the Builder, add a new page for Tasks. Include a form at add a new Task on that page:

Learn more about adding Pages and Views to your app.

Edit Form Fields

Click on your form to add a new Task to open the form's view editor:

In the Inputs section, add inputs for both connections:

Select the child connection, or Projects field. Under the Show dropdown, select the option to only show the Project records connected to the form's Employee:

Learn more about editing forms here.

Test Your Form

Go to the form you created in the Live App and select an Employee from the dropdown. Click on the Projects dropdown to ensure only the Project records you connected to the selected Employee are displayed.

When you select a different Employee, the Project records will automatically update to only show the Projects connected to the selected Employee.

Notes & Troubleshooting

If you’re not seeing the correct “Show” option:

  • Make sure your connection is set up properly. You’ll want the connection to be in the child table, or the table associated with the connection field you’re editing.
  • Make sure the field you are editing is a connection field.

 

How did we do?

Add Read-Only Fields to a Form

Contact