Feature Highlight: Dependent Dropdowns on Forms

06/29/2017 Posted by Carson

When capturing data using forms, it's frustrating when users input incorrect information. In Knack, there are features available in forms to help prevent erroneous data from being captured. One of these is the Show option for fields on a form.

Let’s say you have a form for adding new Projects. On that form, you have two connection fields: Department and Employee.

You want the list of employees shown on the Employee connection field to be limited to only the employees that are a part of the selected Department.

1

 

The Show option will prevent the Employee field from showing employees in the Sales or Operations departments when the Marketing department is selected.

How to Create Dependent Dropdowns on a Form

Here’s how you can set this up in your own forms using connections and the Show option.

  1. In the Data section of the builder, you’ll need three objects setup:
  • Departments
  • Employees
  • Projects
  1. Next, you’ll need to have the following connections setup between the objects:
  • Many Employees connect to one Department.
  • Each Project connects to one Department.
  • Each Project connects to one Employee.

Note: The Show filter only works with “one-to-many” or “one-to-one” connections.

In this case, Department and Employee will be the connection fields on the form, and they have a one-to-many relationship with the Project object.

2

  1. In the Pages section of the builder, select a page with the Add Project form or create a new Add Project form.
  1. Click on the Add Project form on its page to open the editor.
  1. Add inputs for both the Department and Employee connection fields:

3

  1. Hover over the Employee input field and click the edit “pencil” icon:

4

  1. On the edit input window, you’ll see the Show option and can select to show only Employees connected to this form’s Department:

5

You’re done!

Now when the user selects a different department, the employee records will automatically update to only show the employees connected to the selected department: