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)…

8-25-2014 4-53-35 AM

…with help from these three demo files:

 Demo 1: FM 13 portal popover experiments

8-25-2014 8-50-29 AM

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

8-25-2014 10-06-50 AM

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

8-28-2014 8-54-31 PM

…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

8-25-2014 9-15-59 AM

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

8-25-2014 9-26-44 AM

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.

8-25-2014 10-17-14 AM

4. Add an OnObjectEnter script trigger to all fields in the portal8-25-2014 10-49-49 AM

5. Add conditional formatting to each field in the portal

8-25-2014 9-08-30 PM

6. And wire everything up to this script

8-26-2014 8-59-59 AM

 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…

8-28-2014 9-48-30 PM

…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.

8-25-2014 9-37-26 PM

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

8-28-2014 10-56-54 PM

…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.

4 thoughts on “FM 13: Popovers in Portals

  1. Seth Greene

    A gigantic “in your face!” to the annoying limitations of FileMaker.

    Thanks so much for this fantastic technique.

    Reply
  2. Justin

    I tried your approach (Demo 3 for portal in portal) but modified it to match my slightly different setup, but something’s not working:
    Some notes:
    – My tables are Employees (parent), Hirings (child), Salaries (grandchild)
    – I’m launching the Salaries popover by clicking a button in each row of the Hirings portal.
    – Because of how I’m launching that popover, I omitted the create new record line in the script.

    Here is the code: http://snag.gy/1h1fU.jpg
    And here are a couple of screenshots of the layout: http://snag.gy/PcBLG.jpg and http://snag.gy/A6WUf.jpg

    The display popover section of the script is definitely getting activated, but the popover won’t become visible.

    Any help would be greatly appreciated – Thanks very much,
    Justin

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s