Button Bar Techniques! Part 2

  • 8

Button Bar Techniques! Part 2

Tags : 

By David J. Weiner

In our first blog post on the topic of FileMaker 14 button bar techniques, I outlined why we love them so much (calculated labels!), and the main reason they’re so useful (calculated labels!). In our second post on Button Bar Techniques, I delve into the first of several actual tricks we use them for. And, as I looked over some of the examples that I’ll be explaining, it occurred to me that one thing that these techniques all have in common is that the formatting of the button bars is typically invisible — entirely, or partially.

Note that the inactive state of this button bar style has no fill and no outline. The active state has no formatting either.

Note that the inactive state of this button bar style has no fill and no outline. The active state has no formatting either.

By invisible formatting, I mean that we remove outlines and fills for most or all of the states (active, inactive, hover, and pressed), so that the button simply appears to be text on the layout.  Sometimes, we’ll actually use the hover state, to indicate that the text can be edited, or as a navigation link, but whatever the use case, we’re not making the object look like a button.

That being said, the button bar technique we probably use the most is simply replacing merge data with dynamically formatted text.

Merge fields can be useful, but without resorting to a calculated field, they can’t dynamically change depending on various criteria (as when using a case statement, for example). Further, one of the biggest problems with merge fields is that the data in the field can become too long to fit in the area allotted for the merge text (not to mention the problem with stupidly-long fully-qualified field names that won’t fit in layout mode). Using the calculation engine in a button bar label, you can resize or truncate text as needed for the purpose of making it fit. Additionally, you gain the benefit of all the button states available (hover, active, pressed, etc), plus an icon if you want it. We now regularly use button bar calculated text on report subsummary parts to describe the section (instead of using fields or merge text).

Subsummary parts with calculated headers using button bars.

Subsummary parts with calculated headers using button bars.

By using a case statement, we can display just about anything we need to, and using functions like TextStyleAdd or TextColor we can change the formatting of just parts of the text, but more on those tricks in our next installment…

 


8 Comments

Joris Aarts – ClickWorks

June 17, 2016at 10:55 am

I like this a lot! Thanks for sharing.

Scain101

July 5, 2016at 4:37 pm

Is there a way to format a calculation so that it represents currency, for example? When I use the calculation engine for a segment, the Inspector won’t allow me to format the result as data.

    Thomas Meglasson

    July 6, 2016at 5:58 pm

    Hi Scain101. I came up with this let statement to format a number as currency. Unfortunately it does not add thousands separators.

    Let ( [

    num = 216 ; // put your number here. Round it here if you want.

    perpos = Position ( num ; “.” ; 1 ; 1 ) ; // the position of the decimal point

    whole = Int ( GetAsNumber ( num ) ) ; // the whole number

    dec = Left ( Filter ( Mod ( num ; 1 ) ; “0123456789” ) & “00” ; 2 ) // the digits after the decimal point

    // Case ( perpos = 0 ; “00” ; Left ( Right ( num ; Length ( num ) – perpos ) & “00” ; 2 ) ) an alternate way to get the digits after the decimal point

    ];

    “$” & whole & “.” & dec

    )

    David Weiner

    July 6, 2016at 6:08 pm

    Nice Thomas!

    There are also custom functions you could use, one of which I tested HERE.

Scott

July 7, 2016at 9:26 pm

Thanks to both of you! I will try them out. The articles will really help me improve my design.

dancome

July 14, 2016at 5:05 am

Hello ~ Awesome content ~ Thanks

Marc Berning

August 25, 2016at 5:22 pm

I might also recommend an ‘up’ vote on this Product Idea:
https://community.filemaker.com/ideas/1497#comment-17092

Leave a Reply

five + 8 =