Digital Fusion – – FileMaker Developers
MENU

Cool things to do with Tab Controls in FileMaker 12

By Daniel Wood, 13 April 2012

Introduction

FileMaker 12 is here, and with it comes many new cool new features, a lot of which are a result of the new css-based layout engine. In this article we are focusing on one small change borne out of the new layout engine which has massive potential for building new interface controls.

FileMaker 12

So FileMaker 12 is here and by now I'm sure you are getting stuck into it and learning about all the cool new features. We figure rather than re-hashing the same feature lists that you have already seen, we will skip that and cut straight to the cool stuff - namely how can you use the new cool stuff in 12 to do even cooler stuff :)

If you need to learn about any of the new features in FileMaker 12, here are some great resources to get you started:

Tab controls are no longer hungry object-grabbers

In FileMaker 11, tab controls are an all or nothing type object when it comes to objects that they enclose. An object is either enclosed in a tab control, or not enclosed in a tab control, it cannot be half-in or half-out.

This behavior made placing tab control objects over the top of existing layout objects a troublesome affair, especially if you did not wish for the tab control to enclose those objects. In FileMaker 11, objects could become enclosed when the tab control itself was moved or resized.

Here is an example of what we mean:

12overlay 1

Here is a tab control and inside it a field. The field is completely enclosed in the tab control - that is to say no edge of the field lies outside of the tab boundary.

12overlay 2

As you can see, we can move the tab control to another location on the layout and the field moves with it. Everything enclosed in the tab moves with the tab.

12overlay 3

Even putting the field outside of the tab boundary above is still considered enclosed in the tab.

12overlay 4

Here we have a typical portal. One of the things you are bound to have done during development is attempt to enclose a portal in a tab or try to resize a tab control over a portal only to find some odd things happening if you don't quite get it right:

12overlay 5

Uh-oh! It looks as if one of the fields that was in the portal is now gone. Where did it go? Well the answer is it went nowhere. Remember that everything not fully enclosed in the tab control is considered outside of it.

Another key rule is that anything which falls partly in and partly out of a tab control will by default be placed in front of the tab control.

In the above example, the portal is in front of the tab and everything inside. One field managed to become fully enclosed inside the tab and that field now appears behind the portal.

12overlay 6

If we now reposition the tab control you can see the portal field revealed behind the portal.

So what does this all mean?

FileMaker 12 is completely different in the way that it handles tab controls and enclosed objects. An object is still either enclosed in a tab control or not, but this is distinction is now visually blurred somewhat. Objects can appear to be enclosed in a tab control when in actuality they are not - they are simply behind or in front of the tab control.

Whereas before a tab control would enclose any objects within its boundaries, in FileMaker 12 the user has to literally drag, copy and paste, or move an object within a tab control for it to be considered enclosed in that tab. We can best illustrate this with an example.

12overlay 7

Again here we have a portal, this time in FileMaker 12

12overlay 8

When we drag the portal part-way into a tab control, you'll notice nothing disappears from view. The reason for this is that we dragged the entire portal plus fields into the tab control. FileMaker 12 treats this as a single moved object and because it does not entirely fall inside the tab, nothing is considered enclosed in the tab - not even the field that appears to be fully enclosed.

12overlay 9

Because nothing is actually enclosed in the tab, we can now move the tab control around the layout. Moving the tab control in FileMaker 12 has no effect on any of the objects on the layout in terms of them becoming enclosed in the tab control.

Remember - layout objects cannot be placed inside a tab control by means of adjusting the tab control itself - only through moving an object into the tab control.

12overlay 10

Now look what happens when we move the field slightly. This time we are moving the field and not the tab control and we have moved it within the tab boundaries. The field is now considered to be enclosed in the tab.

As a result, it now appears behind the portal that is still outside of the tab - just like it did in FileMaker 11. If we now move the tab, you'll notice the field moves with the tab.

12overlay 11

Okay I get all that, so what is the benefit?

Well, the benefit is that you can create tab controls full of objects, then drag them somewhere on your layout and have them have no effect on existing layout objects. This may seem a pointless thing to do - why would you put objects in a tab control and them move them in front of other layout objects?

One reason you might wish to do this is in creating overlay menus - hence the name of this article :) An overlay menu is one which we will activate via a button and the menu itself will become visible in front of any other objects on the layout. This functionality can be achieved through the use of a hidden tab control.

12overlay 12

Here we have a tab control with 2 tabs. We have placed it on the layout and it happens to be covering part of a portal - no worry! Because we moved the tab control here, it has not enclosed any contents of the portal causing issues.

The button on the first tab is hooked up to the "Go to Object" script step to take the user to the second tab - both tabs have object names.

12overlay 13

And here is the second tab with the menu itself present. We have used some opacity on the menu so the user can see what the menu is overlaying. When the user wishes to hide the menu they just click the button which takes them back to the first tab. The overall effect is really quite nice.

The power of tab controls

Using this technique you could in fact end up building some rather cool menu and navigation systems. In FileMaker 12 layouts now have a right edge, so you can use the area outside of the layout for construction of your menu tab controls. When satisfied with them, simply drag them onto the layout wherever you want them to go. You could even group multiple tab controls into a single object to make it even easier. If you need to make changes to a menu, you can do so direct on the layout - just as long as you don't accidentally move any existing layout objects into one of the tab controls you'll be fine.

The case of the disappearing tab control

Another very awesome feature of tab controls in FileMaker 12 is the fact that once a layout object is classified as enclosed in a tab, it is in it until you move it out - no questions asked! This means even if you are to resize the tab control object, shrinking it down to a smaller size - those objects that it enclose are technically still in the tab control, just not visible and not accessible, here is an example:

12overlay 14

Here we have reduced the height of the tab control, and as a result half of our menu is now gone. It is still in the tab but because the tab is smaller, it is inaccessible.

Why would this be useful you ask? Well, you can very easily resize a tab control in this fashion to access underlying layout objects you wish to edit.

What else could you do with this functionality? hmm. Let's say you create a tab-control object with a whole heap of stuff in it - a really tall tab control for example. Place it at the bottom of your layout and set it to anchor to top & bottom of the layout. Initially on the layout a user will not see anything, but as they begin to drag the layout height to make it taller, the tab control will reveal its secrets!

Note that in testing this technique we discovered that placing the tab control too close to the bottom of the body part means when the layout is resized the tab control contents are not revealed. There seems to be a threshold point about 30-40 pts above the bottom of the layout part after which the contents don't reveal themselves - odd !

You can find an example of this technique in the demo file supplied below.

A couple of "bugs" as of writing

With all new features in a new version of FileMaker Pro, there are bound to be some issues. In the example file you may notice that the overlay menu itself is actually constructed from a web viewer object rather than a straightforward rectangle object. The reason for this is that if the tab control is placed over an object such as a portal, then clicking in the tab control is actually going to click on the underlying object in some cases - in this case the portal. This means if you miss-click an item on the menu you may in fact click on a portal row instead.

To fix this we use a web viewer because the web viewer object is always in front of portals no matter what, so you can freely click on the menu without it selecting underlying portal rows.

Note:when tested in FileMaker Go 12, this didn't work properly - the web viewer does not appear to render its transparency or colour in Go and instead is just a white void obscuring the menu items. Perhaps it would work better in that scenario with a rectangle for the menu instead of a web viewer.

The technique for revealing layout contents on layout resizing doesn't exactly work great on the iPad where the only way to resize a layout is to change orientation - though it could be used for that purpose to reveal something when you enter portrait mode, and hide it when in landscape for example.

Example File

Please find attached an example file. This is a brand new example file for FileMaker 12.

This file was used for "most" of the screenshots in this article, and is provided to help you fully understand what is going on in this article, and to let you experiment in FileMaker with this solution.

Download Example File

In addition to this, Patrick Kenlock has also kindly submitted his example file of a cool thing you can do with tabs in FileMaker 12. His example allows you to toggle individual tab controls on or off, conditionally formatting them differently depending on whether they are toggled or not. He has also included an updated version of the example produced by David Jondreau, cheers guys!

Download Patricks Example File

Download Davids Example File

Posted in Weetbicks FileMaker 12 26

Something to say? Post a comment...

Comments

  • Tom E 07/05/2015 9:48pm (9 years ago)

    And the simplest way to hide tab handles- when defining them, use spaces instead of letters

  • matt babinec 05/10/2013 9:19am (11 years ago)

    Hi,
    This is a handy little trick, however it dosent seem to Display properly in Filemaker Go on the iPad.. even i your example file, if you click the options button to bring up the hidden tab, it gets buried behind the portal that is listing names and e-mails, even though the tab control is set to be the top most layer.
    Ive tried this in my own file as well, and the same thing happens, the menu gets buried behind portals that i would like it to appear on top of..
    Does anyone know how to solve this?

    Thanks!

  • Paula Sanchez 29/04/2013 4:46am (11 years ago)

    Doesn't work for our purpose. We need something transparent to just simply suppress what is underneath and have the tab control behave as it is designed in Pro. We are putting other tab controls, buttons, fields, popups (web-like feel) into this overlay so it with a light transparency (no actual working web viewers). Since Go won't let you disable the refresh icon (that I know of) and the web view trumps everything else (can't use my actual object I am placing into the tab control) and I can't make the web viewer transparent... I am pretty much stuck. Not sure why it is so different from Pro. Is this really an OS level issue rather than an FMP design?

  • John Sindelar 29/04/2013 4:19am (11 years ago)

    Yea; this is a change in the new versions of Go. The portals blow thorough. You can see how we do this now in this video on GoMaps.

    http://www.youtube.com/watch?v=Kl3uUvISX5I

    We show this at 2:35 and basically we either use off-layout elements OR tabs that are only 1px wide on vert layouts and expand to widen on horiz layouts. You'll note that the main map screen on GoMaps *appears* to solve the portal-blow-through, but only because what's covering the portal is a web viewer, and they trump portals.

    HTH.

  • Paula Sanchez 29/04/2013 4:09am (11 years ago)

    We've been using the overlays quite a bit, but have run into a problem. They work beautifully on Pro, but not on FM Go, Portals will always pop to the front of the tab control and overlap. We are even using the Button behind trick (scripted to "exit" when clicked so the user is locked into "Pause" mode until they click to close) as this works for Pro, but not on Go. Anyone found a solution for this?

  • Burt 14/03/2013 11:37am (11 years ago)

    I'm trying to create the button to change from red Colour image button to another Colour button when click. Is there any sample file that I can use and learn

  • Darren Burgess 28/02/2013 8:10am (11 years ago)

    Hey Daniel, I posted a response blog over at http://www.mightydata.com/blog/procon-using-tab-panels-for-user-interface-pop-ups/

    Thanks for the inspiration and info on this technique.

  • Daniel Wood 21/12/2012 10:00am (11 years ago)

    Hi Patrick, Thanks for the comment! If you would like to e-mail me the demo file I'll be happy to add it to the article at the end with the other example file, with description & credit of course, let me know. Just flick it to daniel@teamdf.com, cheers.

  • patrick Kenlock 21/12/2012 12:57am (11 years ago)

    Haha, just realised you guys are in Aus and it's probably midnight as in UK it's still 20th

  • patrick Kenlock 21/12/2012 12:54am (11 years ago)

    Hi Daniel, As you said ( If you guys find any more cool "quirks" or "features" of tab controls in 12 I'd love to hear them, thanks!) I have found a way of programmatically disabling/enabling the operations of individual tabs so that say there are four tabs any one or more or even all tabs can be disabled depending on a condition, could be user name, field contents whatever really. coupled with this using conditional formatting the disable tabs can appear dimmed and non responsive while enabled tabs are normal colour and respond to mouse over (focus), I'd like to make my demo file available if anyone's interested, not sure how to do it or where though:)

  • patrick Kenlock 15/12/2012 2:09am (11 years ago)

    Great posts, always well considered and interesting.
    As well as a vertical scroll bar a horizontal one as well,on portals would answer some of the space constraints on iOS

  • frank stanley 25/10/2012 3:57am (11 years ago)

    That's strange! it's working now.

  • frank stanley 25/10/2012 2:44am (11 years ago)

    I have also noticed if you place a tab control box inside/on another larger tab control box it shows on all the tabs tabs. Not sure if this is a bug or if I should be doing it some other way.

  • David Jondreau 06/09/2012 2:13am (12 years ago)

    Bob...yes, you can put a list view of a table in a tab control...it's called a portal!

  • Bob Moran 17/05/2012 5:16am (12 years ago)

    Great work. Question, is it possible to put a list view of a table in a tab control. This would be incredibly powerful as it would allow one to pick content to drag and drop onto the parent table as needs warrant, something I need for a db I am doing for a client. Any info on this would be terrific. I have not seen anything showing this can be done but it doesn't hurt to ask. :)

    You are a great resource to be sure.

    Best

    Bob Moran

  • Michael Kupietz 11/05/2012 2:05pm (12 years ago)

    Fantastic! Although I was initially underwhelmed by FM 12, I'm beginning to see many little advances that I'm very fond of. This technique could remove the need for some modal pop-up windows/dialogs, as a 'floating palette' or 'floating window' could be created entirely inside of a tab object and revealed, layered over the main visible layout objects, as necessary. Wonderful.

  • Bob Stuart 03/05/2012 5:30pm (12 years ago)

    Great stuff, Daniel. One thing I would LOVE to have the ability to do is to Rotate a tab control, to make vertical tabs, as well as horizontal tabs? like down the sides of an indexed address book. Maybe in FM 12.5?

  • Daniel Wood 01/05/2012 9:27am (12 years ago)

    Hi Ron, thanks for the comment, I really like that technique - thanks for sharing!

  • Ron Cates 01/05/2012 8:09am (12 years ago)

    I was very excited to see this article and try building a menu using this technique. I can't wait to use this to free up screen real estate that i may not otherwise have available. When i put together my own test I did run into one thing that I thought I would share. Unlike a web page with a similar appearing menu, i'm pretty sure there is no way to have the menu close when the cursor is moved off of it. We are left with a menu that apears when you click a button, and stays open until perhaps clicking a close button. I though it might be a little more elegant if the menu closed when you click anywhere else on the screen. So i thought to use an onRecordCommit script trigger. I found though, that just clicking on the screen doesn't trigger a record commit. I had to use a menu open script to goto the menu tab and set a field to a different value so that clicking on the layout would then trigger the script. I added a utility text field to the table and just set it to the current timestamp, leaving the change uncommitted. Then clicking anywhere on the layout would trigger the script to hide the menu. I first tried using an existing Global field from the same base table for this but I found out that changing a global and clicking on the layout does not fire the onRecordCommit trigger. So it had to be a non global field.

  • Daniel Wood 15/04/2012 12:14pm (12 years ago)

    PS: If you get the post question "The current version of FileMaker is..." the answer is still 11 but that will be fixed this week ;)

  • Daniel Wood 15/04/2012 12:13pm (12 years ago)

    Hi Agnes, John & Chiyoko - thank you for the comments! John I love that tip very awesome indeed, and it should make developing so much easier because we won't have to keep changing tab widths to 0 and back, awesome! If you guys find any more cool "quirks" or "features" of tab controls in 12 I'd love to hear them, thanks!

  • Chiyoko Yoshida 15/04/2012 5:22am (12 years ago)

    Great article! Thanks! I look forward to pushing around some layout objects and tab panels to learn the behaviors. I love that objects inside of portals are now enclosed and move with the portal too.

  • John Sindelar 15/04/2012 2:21am (12 years ago)

    Love the drag-to-reveal trick! Another nice this is that tab text can now be conditionally formatted, giving us a much easier way to hide tabs when combined with an OnTabSwitch script trigger. Short demo: http://www.youtube.com/watch?v=zfE5zv1j7Bw

  • Agnes 14/04/2012 1:58am (12 years ago)

    This is really funny. I was just working on this yesterday on FM12 for an iPad app. Not a lot of space for needless tab handles. I have used the invisible tab control many times before. Curious to see your demo file. As to the tab control's new behaviour, we tend to think when there's a new feature that FMI has gone mad, but playing with it usually proves that indeed they put in a lot of thought to create a feature that can be excellent if used in creative ways. Thanks for the article, great work, as usual, Daniel!

  • Daniel Wood 13/04/2012 6:42pm (12 years ago)

    Thanks Bruce, I'd love to hear your ideas on how that functionality could be used to do some cool stuff!

1 2

RSS feed for comments on this page | RSS feed for all comments

Categories(show all)

Subscribe

Tags