FileMaker Go 14: Keeping Button Bars and Slide Panels in Sync


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.

Slide Panel

Button Bar

  1. Button Bar calls Go to Scenario Tab with a Script Parameter
    1. Button 1 = 1
    2. Button 2 = 2
    3. Button 3 = 3
    4. Button All = 4
  2. 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.

Demo File

Sources and Inspiration

Advertisements

4 Responses to “FileMaker Go 14: Keeping Button Bars and Slide Panels in Sync”

  1. Nice demo, though I do wonder why it always defaults to pane zero.

    • True, when the database first loads, it goes to the first slider, but doesn’t highlight the panel. Also, when you flip from Layout Mode back to Browse Mode, the selected Button Bar is lost.

      The solution was to change the Get(TriggerTargetPanel) calculation to:

      If(GetValue(Get(TriggerTargetPanel); 1)=0; 1;GetValue(Get(TriggerTargetPanel); 1)).

      So that if the TriggerTargetPanel came back with a zero, it would substitute in 1, for the first panel. If your default panel is another panel, then substitute a different panel number instead of a 1.

      I have updated that in the Refresh Button Bar script. Please download a fresh copy to get this. Thanks for pointing this out.

  2. Thanks Douglas! Here’s a tip.

    When using an enumerated list of numerical values, I find the Choose function to be a bit less verbose. For example…

    Choose ( $$PanelNumber – 1 ; “ButtonBar01” ; “ButtonBar02” ; “ButtonBar03” ; “ButtonBarAll” )

    Less typing than Case, and you can always add returns between the results. The rule of thumb I use is if I see sequential values then Choose is better than Case. Of course, you can use Choose for non sequential too. Just add in placeholder results.

    • Thanks Matt. Excellent idea. Double bonus points.

      In the Button Bar Active Segment specification, I changed the Case to Choose.

      Case(
      $$PanelNumber = 1; “ButtonBar01”;
      $$PanelNumber = 2; “ButtonBar02”;
      $$PanelNumber = 3; “ButtonBar03”;
      $$PanelNumber = 4; “ButtonBarAll”;
      $$PanelNumber = 5; “Reverse” )

      Became:

      Choose ( $$PanelNumber ; “ButtonBar01”; “ButtonBar01”; “ButtonBar02”; “ButtonBar03”; “ButtonBarAll”; “Reverse” )

      And because the Choose function starts counting with ‘0’, I was able have 0 and 1 both go to “ButtonBar01”.

      I could then simplify the script ‘Refresh Button Bar when Slider Used’ from this:

      If(GetValue(Get(TriggerTargetPanel); 1)=0; 1;GetValue(Get(TriggerTargetPanel); 1))

      Back to this:

      GetValue(Get(TriggerTargetPanel); 1)

      A revised version of the file has been uploaded.

%d bloggers like this: