Button Bar Techniques!

  • 1

Button Bar Techniques!

Tags : 

FileMaker Button Bars

By David J. Weiner

Button bars, for me, are the single most useful new feature introduced in FileMaker 14 (aside from the Script Workspace, which is a beautiful thing). Interestingly, the reason I find them so useful has nothing to do with their primary intended use case: the navigation bar. Sure, a simple and neatly-aligned navbar is great to have, and being able to switch segments from a regular button to a popover and back again is truly useful for speed of UI design, but the killer feature of button bars is the calculated label. This feature alone is, as they say, worth the price of admission. It means that you can display output from FileMaker’s calculation engine right at the user interface level, which, prior to FileMaker 14, was not available without creating a calculated field or resorting to script or Let statement variable tricks.

We’ve started using button bars all over the place just for access to the calculation engine. Things we might have formerly accomplished by running a script, then creating (and managing) a $$ global variable, then placing that variable on a layout, and then refreshing that layout, ALL are replaced with a single calculation inside a button bar’s label.

I started off writing this article as a one-off, and was going to go into various creative ways we’ve put button bars into service, but then figured I had enough material to make an actual series of blog posts, so that’s what I’ll be doing. This post will be followed up in the coming weeks with a set of blog entries describing the following button bar techniques:

  • Using button bars to replace simple merge data with dynamically formatted text, including calculated data and button states.
  • Using button bars to eliminate the need for another calculated field, just for displaying data.
  • Using button bars as a replacement for fixed-position portals on a “dashboard” with dynamically-positioned button bar segments containing aggregated data.
  • Using button bars to display actual data, aligned in columns that dynamically shift their alignment when empty.

There are numerous other ways to use the calculated label of the button bar to accomplish UI tricks that, prior to FileMaker 14, were much clunkier (if not impossible) to accomplish.

Post a comment and let us know your own techniques!


1 Comment

Jonathan Fletcher

September 1, 2016at 4:44 am

I just finishing an entire reporting module array using your 4th bullet point technique and I wondered if anyone else was doing this. I found this post through a search.

The idea is to build an global variable array of data points and then display them in a good old Bruce Robertson virtual list table. I use a combination of looping scripts and a healthy dose of FQL to build a two dimensional array for the data. I built a 1D array (tab-delimited) for the column heads, and another one (CR-delimited) for the left axis labels. I add a total value at the end of each row of the array, and then a last row that is the totals of each column. (Hmm, probably should have done that with a sub summary part. Oops.)

The client has a bunch of parameters they can report on including time range and aggregation values and various metrics in their solution. The button bars are great to create any width array up to the maximum number of button segments that I decided to use. Setting each segment to hide using the isEmpty ( self ) calc is easy to copy and paste into each segment’s hide calc. (THEN duplicate the button bar for the column heads row and change the display calc. The hide calc is the same for every segment. Very easy, if slightly tedious to set up.)

That way, if there are 30 columns they are evenly spaced across the page, and then if there are only 4 columns THEY are even spaced across the page. Dynamically adjusting column widths! Who’da thought you could do that in FMP? (Well, without HTML in a web viewer, I mean.)

Very cool.

Now, if you could only put a width percentage value on each segment, so you could vary the width of the column for field with more data…

Leave a Reply

5 + six =