Slideout Menus

Slideout menus have been around for quite some time in the mobile world. They often come alongside an icon of three short horizontal bars which are commonly called a hamburger menu. Called as such because it looks like two buns, with one above and one below the meat in between. This icon is also suspiciously similar to a "List view" icon in our familiar world of FileMaker.

While the UI pattern still has a lot of use in the mobile world, it's becoming increasingly "out of fashion" and referred to as a basement menu when considered for the purpose of navigation. Regardless of whether the pattern is useful as a navigational method, the know-how behind implementing within FileMaker allows us to use that knowledge in various other ways as well.

In this video I showcase the implementation of a slideout menu for the purpose of discussing all the critical bits to knowing how it's implemented. This knowledge will allow you to take advantage of how a slider panel can be used to disclose further information which may be intentionally hidden within your user interface. Understanding how this UI pattern is implemented within FileMaker will improve your proficiency with creating solutions in our favorite database application.

AttachmentSize
SlideoutMenus.zip322.33 KB

Comments

I love this menú, but I can't figure out how to solve the problem with the list view since objects cannot go over the record lines.

Matt, it appears not to work in Web direct as provided. To make this work, I changed the hide condition on the slider.menu.# to not $$SHOW.SLIDER. Then modified the script trigger as follows:

Set Layout Object Animation [ On ]
Set Variable [ $$SHOW.SLIDER; Value:True ]
Set Variable [ $targetPanel; Value:GetValue ( Get ( TriggerTargetPanel ) ; 1 ) ]
Set Variable [ $targetObject; Value:GetValue ( Get ( TriggerTargetPanel ) ; 2 ) ]
Set Variable [ $$OVERLAY.ON; Value:Choose ( $targetPanel - 1 ; True ; False ) ]
Set Variable [ $$SHOW.SLIDER; Value:$$OVERLAY.ON ]
Refresh Window

A simple refresh object did not appear to work as expected.