Someone recently suggested (a blog, at DevCon? Sorry I lost my source on this one.) using the combination of FileMaker 14’s new button bar with a Slide Panel to emulate a tab panel. Why bother you ask? Well you get the cool slide animation effect when using Slide Panels. iOS users are increasingly used to the idea of sliding things around on their screen. Button Bars are cool because they take care of highlighting themselves (with a little help sometimes). The advantage of using a Button Bar to emulate a Tab Label is that it gives the user more information about where they are on the layout. The best of both worlds would be a Sliding Tab Bar. We don’t have that yet, so here is how to emulate one.
In my recent article about a Mortgage Calculator, I used this combination of Button Bar and a Slide Panel to present data entry for three different scenarios and an ‘All’ tab to show the scenarios side by side. I wasn’t totally happy with the result though, so I set out to improve it. Here is what was wrong: if the user tapped the Button Bar, it would highlight the correct button and show the right panel, but if instead, the user, slides the Panel, the Button Bar would remain unselected—no header was highlighted. The benefit of having the name at the top is lessened because the user is not clear which panel they are on. The highlight of the Button Bar was not staying in sync with the slide panel. Here is how I got things back into sync. Perhaps there are easier methods and if you have one I would love to hear about it.
- Button Bar calls Go to Scenario Tab with a Script Parameter
- Button 1 = 1
- Button 2 = 2
- Button 3 = 3
- Button All = 4
- The Active Segment is determined by the current value of a Global Variable called $$PanelNumber
1) Button Bar: ‘Go to Scenario’ Tab Script
2) Button Bar: Active Segment set to Global Variable
3) Button Bar: Name the Buttons
Select each button and in the Inspector: Position tab, give the button a name.
The Slide Panel has a Script Trigger On It
Slide Panel Script Trigger calls a ‘Refresh Button Bar’ Script OnPanelSwitch
‘Refresh Button Bar’ script uses Get(TriggerTargetPanel) to set the Global Variable $$PanelNumber
The getvalue is necessary because the Get(TriggerTargetPanel) returns both the panel number and the name of the panel. I only need the panel number.
Sources and Inspiration
Scarpetta Group: FileMaker Pro 13: Slip Sliding Away
SeedCode: FileMaker 14 Navigation with Button Bars
FileMaker Help: Get(TriggerTargetPanel)
FileMaker Help: Slide Controls