MainSpring Blog

Customize Drop-down Menus in FileMaker to Improve UX

Written by Mike Beargie | June 29, 2016 at 5:21 PM
Drop-down menus are an important user interface component in our toolbox. They offer a quick and simple way to view a list of values, and then pick the one you need. Drop-down menus operate on the principle of recognition rather than recall, which is important for user experience (UX). FileMaker does offer native drop-downs, but they don’t allow you to show a great deal of context with each option, and you’re a little limited in what you can do with them… But that’s not necessarily a bad thing.

I’m a big advocate of simplicity whenever possible, and FileMaker’s native drop-downs are usually the best choice. There are times, however, when I’d like a little more. Luckily, FileMaker gives us the tools to hunt for ourselves. So, today, I’d like to explain an experimentation with the concept of custom drop-down menus.

What are we doing?

The idea behind this example is to use a hidden popover button that, when activated, will effectively replace a regular field with a global field and a portal. The global field will be used as an autocomplete/search field, and the portal will show results driven by the value of the global field. A script trigger attached to our regular field, On Object Enter, will:

  • Activate the hidden popover
  • Set the global field with the current contents of our regular field
  • Set our cursor in the same position that it had been in
  • Show the appropriate results in our portal

From there, we have some additional machinery behind the scenes to handle the searching of those records in an efficient way that doesn’t break our user’s context.

Outcome

The result is a searchable, drop-down style-picker that shows as much information as you need. The most obvious use is to link records together, but I’ve found some other pretty neat use cases for this kind of thing, including a universal spotlight style search that we recently whipped up for one of our clients.

The file

Now that you’re familiar with the thought process behind this demo, download our FileMaker demonstration with custom drop-down menus.

Also, shout outs to Soliant Consulting for the test data generator and Seedcode for the control file/virtual list setups! We used the test data generator to populate the 8,000 sample contacts, and the control file and virtual list methods were used for the purposes of finding and displaying the records in our custom drop-down menu.