The animations introduced in FM13 are great, but they still don’t let us animate the transition from one layout to another. This is something we’re looking for as it’s often used in iOS apps to move from list to detail and back again.
However, using full-layout slide panels, we can animate layout transitions as long as we’re careful to get the timings right. Our unlocked example file demonstrates how to do this in your own solutions and introduces using OnTimer triggers to queue animations that might otherwise be invisible within a single script.
Be sure to check out Part 1 of this article, showing how to make animated buttons, here.
FileMaker 13 – Go To Layout Animation
The video below demonstrates the animations and goes into how the scripts work. The whole thing is really pretty simple…
A couple notes for when you add this to your own files:
- The script decides to animate “left” or “right” based on the order of your layouts in the layout list. If you’re going to a layout “before” the one your on, we slide left. Heading to one “after” your layout, we slide right.
- This doesn’t work / apply in Web Direct since animations aren’t supported there.
- The animations don’t fire when you navigate using the layout menu, though I imagine they could. (Anyone want to mod that?)
- Objects placed on your “for-animation-only” panels don’t need to work. So while you’ll see we have navigation icons on these panels, that’s only because users see them during the animations. Users never interact with these panels.
- Finally, each layout also has an On Layout Enter script trigger: don’t forget those when you add this to your file.
Download the unlocked example file here: LayoutAnimations.fmp12
More Best-Of FileMaker 13 articles.
[ba-box background=”#778899″ border=”#708090″ textcolor=”#F7F7F7″][jetpack_subscription_form][/ba-box]
thanks for this cool example. is it possible to make the menu with buttons fixed? So when click between the buttons it doesn’t slide along with the body.
I imagine you could the menu buttons exist outside the slide panel, instead of being contained by them. Then the tabs would stay in place as the panels slid. While the tab would be redrawn on the new layout it might appear as if it never moved. Though I wonder if it would look as good when the panel moved to the right. If you build one like that I’d be interested to see it. Thanks for the suggestion!
I see . . . so panel one is a transition to ANY layout BEFORE the current layout. Panel 2 is transition to the home layout, so in order to work correctly, the home layout should always be the FIRST layout in the list. Panel 4 is always moving to the “next” layout, regardless of where it is as long as it’s not the “home” layout?
I’m a bit confused by this.
There are only 4 layouts, but each layout has 4 panels? Or do the 4 panels hold 3 similar layouts and the only one that is different is the data entry for each “named” layout? Meaning I could copy one completed set of panels and then just change the data entry portion? And how is it possible to have the data entry panel object name be the same for each layout? Don’t object names have to be unique?
You state the buttons don’t have to “do anything” but they do if you’re not moving in sequential layout order. I have a lot of buttons in my solutions that state “go to layout x” and they aren’t in order but I assume I can still use this technique.
Finally, is it possible to have the animation go UP and DOWN vs. Left and Right?
You’re on the right track, but panel #2 is the one we use when going home, #1 when going “left”, and #4 when going right. #3 is the one where folks actually enter data. HTH.
> Meaning I could copy one completed set of panels and then just change the data entry portion?
> And how is it possible to have the data entry panel object name be the same for each layout? Don’t object names have to be unique?
They only have to be unique on the same layout.
The buttons on the 3 “non-data-entry” layouts don’t do anything because users only see those during animations: users are never “on” those panels.
Finally, animations on slide panels only go left and right… though up and down would be cool. Thx for the comment.
Thank you . . . that helps some. I forgot that GoToObject still requires a layout specified so . . .
The first panel that always shows the “home” animation only then gets called if the script sends the user to the home panel? It’s really panels 2 and 4 that show the “sliding” action to arrive at panel 3?
Hi – looks very impressive and I love it. It seems to be a perfect solution to make an FM dbase on an iPad seem like a native app. So I copied the example file onto my iPad to try it out. Unfortunately the speed with which the animation occurs on the iPad (ten 4) is quite a bit slower than in FM Pro (mbp with ssd drive). I tried playing with the length of the delay on the on timer script which improves it a little bit, but the speed with which the iPad draws the new layout is still a bit slow to give a perfect result. Still, a great technique put to good use – great design sense. Thanks
that should say iPad (gen 4) not (ten 4)
Cool tips. And thank you for being so consistently succinct!
Very cool, indeed! Slide panels are turning out to be one of the most powerful and versatile UI enhancers that FileMaker has seen in a long time. Thanks for sharing this technique.
You have 4 panels and 4 layouts. If I have 100 layouts do I need 100 panels?
No (thankfully): each layout contains 4 panels no matter how many total layouts you have. One for going “left”, one for going “home”, one to actually enter data on, and one for going “right”.
Very Nicely Done.
Nice presentation, although it does not apply to Windows versions either, since the panels are not animated.
True, Steve. I’d hope FMI is working on that.
Would have appreciated this comment in the main text. I can imagine that it is not supported in web direct but it took me a while to figure out what was going wrong in windows.
Nice. Thank you for your time