Here’s a FileMaker 14 navigation sidebar that uses the new button bar object to dynamically stay in sync with the layouts in your file. It also uses a slide control for a cool animated show/hide effect, and you can option-click the “hide” arrow for a compacted icon-only version. This technique uses only native FileMaker functionality, no plugins, custom functions or web viewers. And you don’t even need a script trigger on every layout; it’s very simple.

Navigation systems are one of those things that can get very complicated as you try to build something you’ll never need to mess with again. In contrast, this is a simple system that looks great and keeps your code easy to work with.

How it works: the script that opens and closes the sidebar builds a list of your layout names and those are reflected in the sidebar, as are changes to the layout sort order. And since FileMaker’s design functions like LayoutNames respect access privileges, this sidebar only show layouts the logged in user is allowed to see.

Animations here are an updated and improved version of what we were working on here in FileMaker 13.

Example file: download the example file “Navigation Sidebar” in the lower half of our downloads page.

Want more? Subscribe to SeedCode for more example files.

Tagged with →  

30 Responses to FileMaker 14 Navigation with Button Bars

  1. Jason Larson says:

    Jeff- This rocks! Thanks for the awesome demo file!

  2. Tim Anderson says:

    Very nice. Think it works best in the header – no unusable area to the right of the compact bar.

  3. Gianandrea Gattinoni says:

    Great demo.
    One question, when you close the bar or when you just display the icons, how you can use the area that become available? is it to put the fields on the sliders?

    • Thanks Gianandrea. Since the slide control is transparent, any object that is “behind” the slide control will be visible when the sidebar buttons are hidden. Buttons layered behind the slide control will also be clickable, which is true because you can always “click through” a slide control (even if it has a fill color), that is UNLESS there is another button in front of it on the active slide-control panel. Note that it can be tricky to position objects behind a slide control since FileMaker might try to put it on one of the panels. To avoid this problem you can first cut the entire slide control object and all of its contents (to your clipboard), then paste it back into position after you’ve positioned all of the objects you want to be behind it on the layout.

      • Thanks Jeff. Cut out the SlideControl, arrange your other objects and then paste it back sounds genius. Just make sure you don’t use Cat again when you arrange the objects behind it.
        – Another way could be to set the left position of the Slider to f ex 1400 pt., if your layout is 1300 pt. wide, then rearrange your object under the Slider, and finally put the Slider back to Left = 0 pt.
        /Arild S.

  4. Fun demo! One odd thing is that although the button names are dynamic, the icons are not. So when you add or remove a layout in the middle of the list, all of the names shift, but the icons stay in the same order. Unless FileMaker gives us a way to calculate the icon for a button segment, I don’t see a way around it. Of course as developers, we love the new features, but always want a little more. C’mon, FileMaker, let us calculate ALL THE THINGS!

  5. Howard Callender says:

    This is just AMAZING! Great work! Thank you for sharing

  6. Stefano says:

    Nice work!

  7. Jon Myrah says:

    This is great! Now if only we could use it in list view.

  8. Jaywill Sands says:

    Great demo!! Curious to see how this works on Web Direct?

  9. David Zakary says:

    Awesome demo. My only issue (and it’s easily dealt with) – how many people have just “display only” layouts in a file? Even with data separation you’ve probably got a few utility layouts kicking around, which would get integrated into the nav.

  10. Walter says:

    Hi… Jeff

    Great Job , do you think it is possible to make this work in Webdirect

    • It is all totally native FileMaker stuff, so it should work fine in WebDirect. The only thing I can see that wouldn’t work would be having items under the slide panel when the navigation bar is “closed.” This is because WebDirect doesn’t allow you to “click through” to an object underneath another object. But if implemented it without the feature to close the nav bar, it should work just fine.

  11. Hamish Mac says:

    Thanks for this Demo. I was going to have a crack at this and just found your post.

    With list view / vertical menu implementation has anyone had success with slider in an invisible popover. I haven’t put the effort into controlling popover positioning yet … is is the control not there? I will give it a go I guess.

  12. Freddy says:

    Hi, I want to know if there is possible to hide or don´t include a layout. Thanks

    • seedcode says:

      Sure. The script that opens and closes the sidebar builds a list of your layout names: simply edit that to exclude layouts you want hidden. Note that the design functions used to build that list respect access privileges. So if the logged in user doesn’t have access to a layout, that layout will be absent from the list without any work on your part. =)

  13. Benjamin Epps says:

    Is there a maximum number of layouts that the button bar will try to pick up? I noticed that when I threw it into my work in progress solution with a whole mess of layouts (maybe 34 layouts) the slider showed the first 10 layouts as buttons with the arrow being the first – for a total of 11 in the slider. Are there theoretically 34 actually being created (equal to my layout count) or is there some limiting factor stopping it at 10?

    • seedcode says:

      Hi Benjamin, the number of segments in a button bar is not dynamic, so you’d want to add as many segments as your users will navigate through. You’ll see that there are 11 segments defined now if you enter layout mode, select the button bar, and click “button bar setup”. Click the + button to add more.

      You’ll see that the segments are almost all the same except for their label ($$layout_x), their icon, a “hide when” condition, and the script parameter being sent to the “Nav Bar Button” script when the button is clicked.

      Hope that helps.

      • Karen says:

        Hi Seedcode, I am using this and it is brilliant. However, when I add another button, changing all the parameters above, the last button changes to the correct layout name etc, but won’t go to the layout. If I change the layout order around, all but the last button will work. Doesn’t seem to want to work past the 11th button even though I’ve changed the label, “hide when” option and set the script parameter.

        • seedcode says:

          Hi Karen,

          Have you ran the “Show Sidebar” script to initialize all these variables? You’ll want to do that as part of start-up and whenever you add a new layout. Doing that should get you going with any number of layouts.

  14. m says:


    how do I change which layout the bar calculation picks up? For example, I do not want to display my first layout, but my 10th one. Thank you.

    • KC Embrey says:


      The “Show Sidebar” script in the example file is where the list of layouts is extracted. While you could build the $$layout_names list excluding a layout by number, it would probably be easier, and fit the design of the example, to exclude layouts by name. This way, you can move the layouts around and the layout name you’ve specified will be ignored.

      Here’s an example of how you could use the Substitute function to remove the “Mango” layout from the $$layout_names variable. Add this line just after the existing line 4 and replace “Mango” with your layout name to see it in action:

      Set Variable [$$layout_names; Value: Substitute( $$layout_names; “Mango¶”; “”) ]

      I hope that helps!


  15. Karen says:

    Brilliant! thank you so much for sharing this

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share →
DayBack Calendar
DayBack's 30-day trial is unlocked so you can customize it and integrate it with your files.
Download DayBack and we'll send you a couple short emails with tips on how to modify it and use some of the coolest features.
Thank you! Please download: DayBack Calendar
Need More?
SeedCode tips & example files in your inbox
Need More?
SeedCode tips & example files in your inbox
Want More?
Be the first to see articles and tips like these
Download TimeZync and we'll send you a couple short emails with tips syncing your FileMaker Go files.
Thank you! Please download: TimeZync
Want More?
Be the first to see articles and tips like these