FileMaker 13 Animated Slide Panels

A colleague was asking how to simulate a drawer effect in FileMaker where an animated slide panel appears to withdraw completely into the window edge. This is pretty easily done but there are a few tricks to keep in mind (below).

Animated Slide Panels

Download the demo file, based on the Invoices starter solution. Click “slide panel demo” in the header to show and hide the panel.

Here are some tips to get this working smoothly:

  • The slide control consists of two panels: panel number 1 is blank, panel number 2 has the content you wish to reveal.
  • The color and stroke of both panels is set to none: it’s the object (rectangle) within panel number two that gets a fill color and a stroke.
  • The big downside here is that panels aren’t “blockers” so buttons etc behind the tab panel still work:  you can see this in the demo by clicking where the blur “new invoice” button was when the panel’s showing.
  • I didn’t address this in the “Slide Panel Demo” button, but the trick is to use Hide Object When to hide these objects as you reveal the tab panel: hide them explicitly by setting a $$Var and then refresh the objects after the panel is drawn for the best effect.
  • Some of that “after the panel is drawn” timing is best executed with OnTimerScripts =)  Click “Slide Panel Clean” to see this method of disabling “new invoice”.
  • You can’t really hide things that extend both under and outside the tab panel, like the portal rows on that invoice layout. The only solution there is to break that full-row button into two, one of which is the width outside the slide panel, and one of which is full-row-width. Put the full-row button on top and hide it like we do “new invoice” when the tab panel is drawn: I didn’t go to those lengths in this demo.

As you can see, animated panels can take some fiddling but you’ll be able to get some nice behaviors.


Featured Posts

Follow Along

Stay up to date with the latest news & examples from SeedCode

14 Comments

  • Yoo byeng han

    How can I apply a script to a square box in layout mode?

  • Mateusz Poradecki

    I use a button as background. The button has the same look in all states. The button has to do something, so I wrote simple script f.ex.: Get (LauoutName).

  • Ron Mittelman

    I was able to solve the continuous form problem by placing the slide panel in a popover. I have a hidden popover button right next to the dashboard button. It’s never clicked, but the action of the dashboard button is to go to object, specifying the name of the popover itself. Since the popover is always on top of everything, it nicely covers up the continuous form records below. Unfortunately, I can’t get the popover to exactly align with the left side of the layout, so it always appears about 1/10″ from the left. Any ideas on that?

    • Maarten

      I’m also looking for a workaround for the popover padding issue, anyone think of anything yet?

  • kass

    Hi

    I am trying to create a sliding panel but unfortunately I am not getting very far… would anyone be able/willing to help me? I made the panel, named the slides but then get stuck… not sure how to make it appear and disappear, is this a script or formula???

    any help would be amazing

    • seedcode

      Hey Kass, It’s a script. Check out the script “Slide Panel Demo” in our demo file; that’s what gets the action going. Just be sure to use *your* side panel name in the GoToObject script step.

  • Ron Mittelman

    Great article. Simple version works just fine if you use a button instead of a plain panel. Button must do something, however, or objects below will get the click. I just told the button to run my slider script to toggle the slide panel to the transparent one. This eliminates the need to make button below invisible.

    One problem, which may have no answer: I was envisioning copying the slide panel its activating button and paste onto other layouts, so I can have a consistent look. This works on single layouts, but not on continuous layouts, as when I paste to a continuous layout, FMP makes me expand the detail section to accommodate the slide panel. Is there anyway to make this work on a continuous layout? Thanks…

  • Jason Hawke

    In looking at the Side Panel Demo Clean script, you are essentially making the New Invoice button “invisible” and therefore not triggering. While it may be a bit more work, couldn’t you also just write an IF statement in the New Invoice script to not run if the Active Panel is showing (or if the variable is X)?

    • Ron Mittelman

      That seems like a lot of work, as you may need to do that for many controls on your own form. Better to handle it right in the slide panel, right? See my other comment.

  • Jason Hawke

    Great, John! I’m actually the one who asked about this a couple of months ago. I can see I peaked your interest enough that you came up with a solution. Very cool.

  • If you change the colored rectangle into a button that does exit script then it acts as a blocker and the buttons behind the slide panel won’t run.

    • paolo

      that’s cool

  • Michael Gaslowitz

    Web viewers are excellent blockers. Just use an empty one in place of your rectangle and you won’t be able to click anything behind it. Bonus points for copying over the styling.

Leave a Reply

Your email address will not be published. Required fields are marked *

Check out some of our other posts ...

Suggesting Appointment Slots

Show Available Slots that Match Multiple Criteria Schedulers often look for gaps in their schedules to find the open resources for each opportunity. But sometimes,

Introducing Draft Settings Mode

Following up on this idea that people stretch themselves when they feel a little safer, we’ve been very focused on the customization experience for DayBack

New Longer Timescales for DayBack

Resource Scheduling Swimlanes You can now extend the pivoted scheduling view in DayBack to show items by week instead of solely by day. This lets

FileMaker Summer Camp – Recap

Unconference Sessions If you missed Pause in October, here’s a look at the sessions that attendees hosted. All the sessions are listed in this post

COMPANY

FOLLOW ALONG

Stay up to date with the latest news & examples from SeedCode

© 2024 SeedCode, Inc.