BlogFileMaker

FileMaker Button Bar as Progress Indicator

By June 20, 2016 8 Comments

Button Bars

FileMaker 14 introduced Button Bars, which are basically layout objects that consist of segments that you can define. In my experience Button Bars get used mostly for navigation menus. I’m sure we will come up with all kinds of nifty ideas for areas they can be useful in. This article’s purpose is to show you how you can use the Button Bars to show progress.

There are lots of articles out there that can give you an idea how Button Bars are used for navigation menus. I also want to mention the application example that shows a snowflake game using Button Bars from Will at Beezwax.

Progress Bars

There are many tools out there that you can use in your solution to indicate the stage of some process in FileMaker. You can use HTML and Javascript or perhaps a plug-in to show progress. While plug-ins have become seamlessly integrated with FileMaker over the years, you still can’t use them in iOS, unless you install the plug-in on the server.

Button Bar as a Progress Bar

The wise ones always tell you to use FileMaker natively as much as you can. So I try my best to follow that notion. Primarily so you will have one piece of software to manage and you can run into less trouble. This method works well on iOS, and works in portals, as well.

The example below shows you the stage of the projects marked with a progress bar. It gives you a nice visual indication of where each project is in its lifecycle.

Example showing project stages marked with a progress bar.

Figure 1 – Projects marked with a progress bar.

You’ll see in the example file I use  20 to 100 in increments of 20, for the numbers to use to show progress. I have 5 segments in the button bar, one for each 20% reached. These numbers, of course, can be anything. If you want to go crazy, you can make it a 50-segment bar (which is the limit).
Button bar with 5 segments

Figure 2 – Button bar with 5 segments.

Each of the segments have conditional formatting, which makes them “light up” when the condition has been met. And once you have visible progress, I want to see where the end is, so that’s marked with a separate color. So I have two conditions assigned to them with two colors.

The first button has these conditional formatting conditions:

Screenshot of conditional formatting for the button bar segments

Figure 3 – Conditional formatting for the button bar segments.

The rest of them are similar, only the math changes a bit to account for the progress.

The button is named with the following calculation:

Case ( Project::Progress = 20 ; Project::Stage & ” ” & Char ( “10095” ) ; “” )

I also wanted to add an arrow, so I’ve used the Char() function to show an arrow character of my choice with an ASCII code.

Demo File

Download the demo so you can look under hood to see how this works in real life.

Watch our videos for more FileMaker tips and techniques:

Agnes Riley

Agnes Riley

Agnes is a Senior Application Developer, and a jack of all trades, master of none. While she mostly enjoys crafting pretty things and integrating different technologies, she is equally a fan of helping clients with data parsing from Excel to FileMaker. When she is not chained to her MacBook Pro, she can be found hanging off a rope in an indoor climbing gym or holding onto the handlebars on her red and white motorcycle.

8 Comments

Leave a Reply