FM 13: Popovers in Portals

26 Aug 2014: fixed minor bug in “tab control in a portal” demo and updated article text.

The popover object in FileMaker 13 presents developers with a wealth of new design opportunities (a number of which were discussed in this article: FileMaker 13 Popovers). But if you’ve tried to use a popover inside a portal, you may have noticed that embedded portals, tab controls and slide controls within those popovers simply do not work as expected… or at all, for that matter.

Well, today we’re going to look at a simple work around, which was inspired by Ray Cologon’s brilliant Screen Popovers demo, and also utilizes David Thorp’s clever technique to enforce popover modality (i.e., prevent the user from dismissing the popover until certain conditions have been met)…

…with help from these three demo files:

• FM 13 portal popover experiments
• FM 13 tab control in a portal
• FM 13 portal in a portal

 Demo 1: FM 13 portal popover experiments

Demo 1 does not offer any work arounds; its purpose is merely to show the problem.

Demo 2: FM 13 tab control in a portal

In this demo we have a simple timesheet solution architected like so…

…and for a given employee’s time sheet, we want to be able to edit each portal row (i.e., day entry) in a popover. Since we can’t do that directly, we’re going to fake it as follows:

• When the user clicks into a field in the portal
• highlight that portal row and
• display a popover with an embedded tab control from outside the portal
• but make it look like it’s coming from inside the portal

Here’s how:

1. Define a global text field, zz_g_id_day, in TIMESHEET

2. Link it to a new occurrence of DAY on the relationships graph, like so

3. Define an invisible popover, place it at the top left of the screen, and size it to fill the screen. Make the background transparent, and place a visible simulated popover with embedded tab control in the center.

4. Add an OnObjectEnter script trigger to all fields in the portal

5. Add conditional formatting to each field in the portal

6. And wire everything up to this script

 Demo 3: FM 13 portal in a portal

In this demo a Timesheet has multiple related Day entries, and each Day entry has one or more related Breakdown entries. The basic architecture is straight-forward…

…and we want the user to be able to edit the breakdown (time detail) for a day record by clicking into the day row, and have a breakdown portal for that particular day pop up on top of the day portal.

This is accomplished by basing the breakdown portal on the highlighted TO below…

…and the details are similar to the ones we looked at in demo 2 above, so I won’t bother to reproduce them here, but instead invite you to pull the demo apart and see for yourself how it works.

In an upcoming article, we’ll look at a way to make this technique transactional, and in the meantime if you have any suggestions for improvements, I hope you’ll post a comment here.