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.


Tagged with →  

14 Responses to FileMaker 13 Animated Slide Panels

  1. Michael Gaslowitz says:

    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.

  2. Joel Shapiro says:

    This sliding is very cool, John, thanks.

    I imagine you’d thought of Web Viewers in the panel to prevent any bubble-up behaviors (hover-states and clickable buttons) from items behind the panel. I thought it could be another use case for the FMP URL so I put together a quick demo:
    http://blog.jsfmp.com/post/89937370141/filemaker-13-animated-slide-panels-with-web-viewers

    (“Great minds…”, Michael :-) )

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

  4. Jason Hawke says:

    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.

  5. Jason Hawke says:

    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 says:

      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.

  6. Ron Mittelman says:

    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…

  7. kass says:

    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 says:

      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.

  8. Ron Mittelman says:

    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?

  9. Mateusz Poradecki says:

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

  10. Yoo byeng han says:

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

Leave a Reply

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

Share →
Year-End Sale - up to 25% off on add-ons incl DayBack CalendarVisit the Sale
DOWNLOAD
DayBack Calendar
DayBack's 30-day trial is unlocked so you can customize it and integrate it with your files.
Download DayBack and we'll send you a couple short emails with tips on how to modify it and use some of the coolest features.
Thank you! Please download: DayBack Calendar
Need More?
SeedCode tips & example files in your inbox
Need More?
SeedCode tips & example files in your inbox
Want More?
Be the first to see articles and tips like these
DOWNLOAD
TimeZync
Download TimeZync and we'll send you a couple short emails with tips syncing your FileMaker Go files.
Thank you! Please download: TimeZync
Want More?
Be the first to see articles and tips like these