FileMaker 13 brings with it many new innovative features. Building on the new design space innovations created in FileMaker 12 and a continued focus on database tools for mobile, FileMaker 13 offers a new layout object dubbed the “Popover Button”.

You may recall some months ago I wrote about pros and cons (mostly con) of using tab panels to hide and display pop-up content to assist in data entry and display.

The Popover Button

Well, now that rather kludgy technique has been rendered mostly obsolete with Popover Buttons.  A Popover Button is a new layout object that creates a pop up within which you can place layout objects. This design pattern is seen frequently in the software, web, and mobile design worlds these days, and we are glad that FileMaker is keeping up by providing a simple tool to create this effect. What’s more, Popover Buttons can be used across the FileMaker platform: they work in FileMaker Pro client, FileMaker Go, and through a browser using Web Direct.

Here are just a few ideas of how we might use this new layout object:

• Display related or secondary data
• Display container data in a larger format
• Display additional button choices that don’t fit on a layout
• Provide the user with a popup to select a record for related record creation
• Display help text throughout a solution

Creating A Popover Object

True to FileMaker form, creating Popover Buttons is simple.  They are created from the Toolbar object that also creates buttons. You can simply click and hold to toggle between Button and Popover Button.

A Popover Button can then be added to a layout just like a regular button. Once placed, you can click on the button in layout mode – this reveals the popover – and then content can placed within it, just as you would with a tab panel.  Here is a screen shot from the Invoices starter solution provided with FileMaker 13:

There is a bit more to configuring a popover. Double click the popover and a Popover Setup HUD appears with the following features:

• Calculated title bar for the popover
• Check box to toggle display of title bar
• Selection of one of four preferred “directions” to display the popover. Note that a popover will display in a different direction if required to by the window size.
• On Object script triggers

Popover in Action

And here is a screen shot of the Popover Button as used in the Invoices starter solution that comes with FileMaker Go 13:

Popover buttons are just one of the features that enhance the user experience in FileMaker 13.  We are also looking forward to using Slide Controls (for iOS swipe gestures), iOS Keyboards for FileMaker Go data entry, and FileMaker Go native barcode scanning.

FileMaker 13 introduces a new option in layout mode, which both enhances the design process and also speeds up schema changes. All this happens via the new Field Picker, a heads-up display into the fields for the current active window.

By default, when you create a new database in FileMaker 13, you now will be taken to layout mode with an empty Field Picker ready to create new fields (figure 1). This replaces the previous scenario where you were taken to table view in order to create and manage fields. The default behavior can be changed in Preferences to use Manage Database dialog to create files, but this new Field Picker actually makes it worthwhile to keep the default behavior. Or, you can select the Field Picker from the tool bar (figure 2)

Unlike the Inspector, only one instance of the Field Picker window can be opened. If you have multiple FileMaker windows open, with layouts based on different table occurrences, when you switch windows the Field Picker will update to show the fields available to the active window. You cannot drag fields to inactive windows, so there’s no chance of dragging fields to the wrong layout. Fields can be filtered by name, which is a good reason for consistent field naming.

Although you have virtually all the field options that you need, you can launch the Manage Database from the picker window. This makes the picker inactive until you close Manage Database.

It Makes A Big Difference

So much can now be accomplished in the Field Picker, that this becomes one of the coolest developer tools in the new version. Not only can you add new fields, select field options (figure 4), and change the sort order for fields, but you can drag and drop selected fields directly onto a layout. Plus, you can determine whether you want labels, and if you want these to the left or above the fields.

No more double-clicking on fields to add a label if the Specify Field dialog didn’t have this checked. You can also position fields vertically or horizontally when you drag them onto the layout. In short, you can tuck this picker to the side and work merrily away on the layout without having to bring up Manage Database unless you need to change something in the Relationships Graph or create a new table.

The only puzzling aspect to the new field picker is that Filemaker, Inc. did not refresh the design of the Inspector palette (figure 5). The look and feel of the two now seems to clash, with the red/yellow/green buttons for the Inspector and its light gray color, and the simple X for the Field Picker and with a much darker (yet somewhat transparent) shading.

For developers and users, this new field picker once again improves FileMaker’s Rapid Application Development view of the database world.

FileMaker 12 includes significant changes to tab panel objects that make using pop-up overlays far easier to implement. Now, tab panels are “less sticky” and can be moved freely around a layout without the risk of inadvertently picking up objects that were not intended to be contained in the tab panel. Our colleague Daniel Wood over at Digital Fusion offered an excellent detailed description of this new behavior in his blog post Cool things to do with Tab Controls in FileMaker 12.

In particular, I was intrigued with the idea of using invisible tab panels to provide pop-up data entry overlays on FileMaker user screens. Here is an example from a customer database that uses an overlay to display a portal that allows users to select a Contact record and add it to a list of related contacts in a Company record:

Using this design pattern offers some really excellent advantages both for the developer and end user:

• No new layout is required to provide a pop-up window
• Space is saved on the current layout
• User is provided a data entry UI, visually aligned to its purpose
• Opacity features of the object give the interface a clean, modern look
• The interface is intuitive and easy to understand

Of course, no pro/con article would be complete without the ‘con’ side. And in particular, this technique can have the effect of increasing the maintenance burden on the layouts where it is used. As stated previously, FileMaker 12’s improved tab panels can be freely moved around a layout and they will not ‘grab’ objects from the layout. The reverse, however, is not the case. That is, if an object that is within the borders of a tab panel, but not part of the tab panel, is moved – even one pixel – it will become part of the tab panel and from then on move with it. These screen shots illustrate the point:

Further complicating layout maintenance is the fact that objects behind the tab panel are difficult to access without first moving the tab panel. Any modification of the Title field, for example, would require the developer to first move the tab panel, make changes to the field and then move the tab panel back. This adds an additional layer of inconvenience to layout maintenance. And it requires the developer to remember to put the tab panel back in place before shipping an upgrade to the solution!

It is of course possible to access the field under the tab panel without moving the tab panel. This is accomplished by holding down the command key (OS X) or control key (Windows) while in layout mode and using the mouse to drag a rectangle around the object until it is fully enclosed. This method of layout object selection selects only objects fully enclosed within the rectangle and can be used to precisely select single objects on complex layouts.

Given this additional maintenance burden, I would conclude that hidden tab panels used as interface overlays should be used carefully and sparingly. Developers should consider the complexity of the layout, knowing that multiple objects around and behind the tab panel will increase difficulty in maintaining the layout. In these cases, a dialog window may be the best choice for providing this type of data entry interface to the user. That said, simple layouts may be a perfect match for this technique and effective use can enhance the appearance and usability of a layout.

Special thanks to MightyData customer Younger Partners for granting permission to use images from its database.