How to build hierarchical selects

Last update:

Audience: Developers building Sapho micro apps

Imagine a situation where you need to set up a dependency between multiple select components so that one select component populates the set of options displayed in another select component. A common example of this functionality is the input of Country along with State/Province, where the list of values in the State/Province select component is populated according to the selected country. This scenario can even go a level deeper by populating City in yet another select component after a State/Province is selected.

Sapho makes it easy to link select components together to create this type of drill down, which is also known as a "hierarchical select".

Here’s a step-by-step guide to using hierarchical selects:

  1. Log in to your Sapho account and open up the Sapho Builder by clicking on the micro app you wish to edit. Open the Sapho Builder and navigate to a search page.
  2. Go to the Pages tab in the left side menu.
  3. Click on the search page of the selected micro app.
  4. Drag and drop two Select components to your page and then, map them to the appropriate database (DB) columns. You can do this by navigating to Select Type in the settings menu on the right-hand side and setting Select Type to "Select from Database".
  5. Click on your secondary select component to open the settings menu. Go to Query and click SET / EDIT QUERY.
  6. In the Query dialog window, set the constraint for the secondary DB column based on the value of the primary select component’s selected value. To do this, click the drop-down menu option “[component value]” and select the name of the primary select component from the list.

    Click Save and from now on the list of options within your secondary select component should be filtered based on the value selected in the primary one.