Sliding menus in FileMaker

Introduction

While FileMaker allows for some pretty decent interface design, web based applications are a few steps ahead when it comes to providing visually attractive user interface. Sometimes though, FileMaker solution developers can push the boundaries a bit further themselves. In this blog I will show you how to create sliding hamburger menus while using only FileMaker native tools.

Challenge

Many applications are equipped with some sort of navigation menu that allows the user to open layout of specific modules. In my example this menu is designed in this way:
  • Every layout has a hamburger menu icon.
  • Clicking that icon opens a Card window with the Menu layout in List view.
  • Each record in this list represents a menu item and clicking it closes the menu and brings the user to the desired layout.
By default the Card window just pop- in. What we want is a nice animation showing the menu expanding to the final size.

Solution

It is actually quite simple.
We create an OnFirstWindowOpen trigger handler. This script opens an off screen window, adjusts the size to match the Menu Card layout and navigates to the Menu layout. Then it switches to the Preview window mode and executes the Copy command.
Next, the copied snapshot of the Menu is pasted to a global container field created for the purpose of holding the picture of the Menu.
When the user clicks on the hamburger menu, instead of the Menu layout the application presents a layout with the above mentioned global field first and sets the Card window to the smallest size possible. A loop follows that gradually increases the size and as the window expands, so does the picture of the Menu. Once it reaches the final size, the Card window switches to the Menu layout.

Important Details

You can see the implementation in the Example file attached to this article. Still, I want to point out few important pieces of information.

Setting the Print format

When loading the Menu picture during the file startup, you have to set the printing size to match the final size of the Menu layout. I haven’t found any simple way to automate this. So in case the amount of Menu items changes down the project development, you have to remember to modify the print format as well.

Fine-tuning the menu expansion

When opening the menu, the custom function ZK.NVM.Menu.EXPANSION_STEPS defines how many steps should be used in the window expansion process. Experiment with this value to get the best experience in your specific environment.

Clipboard usage

Unfortunately, this trick uses the clipboard. That can present an inconvenience for the user, so it might be preferable not to choose for a sliding menu.

Operating system specifics

I have tested this om Windows and MacOS.
Windows works well in all cases. Unfortunately, Mac has a minimum window size of 110x144px. This makes the expansion look quite weird with only a small amount of menu items.

Actual Navigation

The navigation used in the Example file is rather naive. There are better ways to achieve a dynamically modifiable navigation menu but since it doesn’t fall into the scope of this blog, I haven’t put much effort into it.