Cool things to do with Tab Controls in FileMaker 12

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:

• FileMaker version comparisons
• FileMaker Knowledgebase Article documenting all of the changes - a great resource!
• FileMaker 12 Whats New from DB Services
• FileMaker 12 Managing Container Data also from DB Services
• New Features Video from Matt Petrowsky of FileMakerMagazine.com
• 12 days of FileMaker 12 series of webinars from FileMaker Academy

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:

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.

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.

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

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:

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.

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.

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

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.

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.

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.

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.

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.

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:

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