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.