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.
Button bars in FileMaker 14
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.
Jeff- This rocks! Thanks for the awesome demo file!
Very nice. Think it works best in the header – no unusable area to the right of the compact bar.
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.
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!
+1
:+1:
I second that motion for calculated button icons!
If FileMaker actually told us what features were coming before a release, we might be able to provide feedback and identify shortcomings such as this. I can dream…
This is just AMAZING! Great work! Thank you for sharing
Nice work!
/ste
This is great! Now if only we could use it in list view.
a) Thanks Jeff, that is a great demo.
b) Jon, to see a convincing FM 14 simulated list view, check out this demo from Team DF (it doesn’t have Jeff’s palette of course, but it sure could).
http://www.teamdf.com/weetbicks/254/14-for-14-shortcuts-for-quick-script-step-entry
P.S. Make sure to download the demo — the screens in the article don’t show it.
Thanks Kevin!
Great demo!! Curious to see how this works on Web Direct?
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.
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.
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.
Hi, I want to know if there is possible to hide or don´t include a layout. Thanks
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. =)
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?
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.
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.
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.
Hi,
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.
Hi,
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!
KC
Brilliant! thank you so much for sharing this