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 →  

23 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!
    /ste

  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. =)

Leave a Reply

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

Share →
DOWNLOAD
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
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