Big Tabs!
By Daniel Wood, 13 February 2014
Introduction
Building FileMaker solutions for iOS introduces a new set of challenges for developers and requires UI controls that make it easy for users to interact. This article gives a very quick and simple technique you can use to make selecting tab controls much easier for FileMaker Go users on iPad and iPhone.
Tab Controls before FileMaker 13
Prior to FileMaker 13, the labels you define for tab panels would be the only means of dictating the height of those selectable tab panel areas. Increasing the font size inevitably increases the height of the tab panels selectable area.
The problem here is that with increased font size comes unreadability of the tab label. Various methods could be employed to inhibit this behaviour such as making the label white to hide it. Another method people have used is to set the tab label to a series of space characters and then overlaying the actual label as a standard piece of text. Neither method is that elegant or easy to maintain.
The solution in FileMaker 13
With FileMaker 13, we can now define the labels for tabs by way of calculation and as such we can make use of some of the text formatting functions within that calculation.
To retain big tabs but allow for readable labels, we can use the TextSize function to reduce the label size to a readable level, while making the font size associated with the tab control object large.
Here is a tab control where the tab font size is set to 72pt. By doing this, the selectable tab area height is increased.
If we look at the tab setup, you'll notice all the tabs are defined by calculation. I have also set tab width to a fixed width per tab (choosing the other options tends to not work nicely with this technique).
The tab function is simply a custom function that will correctly format the label to a desired size - this is purely for readability.
The End Result
When viewed in browse mode, we end up with some really nice tall tabs with a readable font size. On an iOS device this gives a much larger area to tap for selecting a tab.
Compare this to a tab control based on the standard font size of 12pt.
Example File
Please find attached an example file. This file is provided to help you fully understand what is going on in this article. Note that FileMaker 13 is required to view this example file.
And Finally...
It has been just over a year since my last article. in January of last year I set off and spent 5 months cycling across the African continent. Upon returning to work the motivation for writing new articles wasn't quite there and it took a while to get back into the swing of things. Now it is a new year and I'm looking forward to cracking out some new articles in 2014 and explore everything that FileMaker 13 has to offer!
Thank you for your continued readership and support!
Something to say? Post a comment...
Comments
Michael Huber 20/11/2014 8:15am (9 years ago)
This is no doubt a fantastic workaround, however it doesn't seem to be WebDirect compatible. The screen shows the smaller font size (as specified in the custom function) for a split-second, then reverts to size set on the tab itself. Bummer! I looks like an "override".
Maybe this could be helped by adding some CSS?? Unfortunately I'm not fluent enough, couldn't get it to work.
Eligio Ospina Meneses 12/08/2014 3:36pm (10 years ago)
Dear Daniel, I share with you these two interests (Filemaker and bike crossings)
It might seem late to welcome and congratulations. But I know from experience that you will already be embarked on another adventure that will bring us beautiful scenery and bright ideas.
I would like to share with you some images of my country, Colombia. If you are interested please send your personal email address.
Sincerely
Eligio Ospina Meneses
Simon Clement 22/02/2014 2:48pm (10 years ago)
Another option is to choose a large size for the tab then set Conditional... for the tab where the typeface size you require appears in browse mode using Get ( WindowMode ) ? 4.
Africa? Good start! Now how about coming over here and giving Australia a go...
Anders Monsen 22/02/2014 5:26am (10 years ago)
Welcome back! I lived 11 years in Zambia and saw much of Tanzania, Kenya, Malawi, Zimbabwe and South Africa. The bike ride must have been fantastic.
Juz 21/02/2014 1:22pm (10 years ago)
Hope the saddle-sores have all healed, but good to have you back and giving us some Kiwi Know-How!
Jeff Drake 20/02/2014 10:02am (10 years ago)
Very cool! Thanks for sharing!
Bob Stuart 19/02/2014 4:58pm (10 years ago)
Daniel, Hooray ? you're back ! I bet a lot of the FileMaker community has missed your helpful articles. Me, for one.
Bob.
HOnza 18/02/2014 11:39am (10 years ago)
Neat, as most of your tricks, Daniel!
Douglas Alder 15/02/2014 8:12am (10 years ago)
Cool technique and demo. I would have left out the Custom Function and just gone with: TextSize ( "Tab Name Goes Here" ; 12 ) in the tab name calculation. It seems like the benefit of readability is offset by more complexity and an extra step in defining the Custom Function.
Also welcome back.
Jonathan Fletcher 15/02/2014 6:59am (10 years ago)
Welcome back, Daniel. What exciting times!
John Colburn 14/02/2014 7:50am (10 years ago)
I hope you had a pleasant ride. I've missed your articles and are glad you're back.
john
Josh Ormond 14/02/2014 3:32am (10 years ago)
Classic Weetbicks. Welcome back. Glad to see you getting readjusted and settled back in.
Dan Shockley 13/02/2014 4:58pm (10 years ago)
Welcome back! Thanks for another useful tip!
Dave Zakary 13/02/2014 2:41pm (10 years ago)
Welcome back DW. Neat technique. Thanks for sharing.
No one has commented on this page yet.
RSS feed for comments on this page | RSS feed for all comments