Best-Of: FileMaker 13 Animations — Go To Layout

Overview

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…

[ba-youtubeflex videoid=”oXQKKNCJOhw”]

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.

Enjoy!

[ba-box background=”#778899″ border=”#708090″ textcolor=”#F7F7F7″][jetpack_subscription_form][/ba-box]

Featured Posts

Follow Along

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

21 Comments

  • Johnny

    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.

    • seedcode

      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!

  • Jason Hawke

    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?

    • seedcode

      Perfect! =)

  • Jason Hawke

    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?

    Thanks!

    • seedcode

      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.

    • seedcode

      > Meaning I could copy one completed set of panels and then just change the data entry portion?

      Right! =)

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

      • Jason Hawke

        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?

  • macwombat

    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

    • macwombat

      that should say iPad (gen 4) not (ten 4)

  • Cool tips. And thank you for being so consistently succinct!

  • Mark Scott

    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.

  • Oreste

    You have 4 panels and 4 layouts. If I have 100 layouts do I need 100 panels?

    • seedcode

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

  • Steve

    Nice presentation, although it does not apply to Windows versions either, since the panels are not animated.

    • seedcode

      True, Steve. I’d hope FMI is working on that.

      • Pieter

        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.

  • JP

    Excellent… thanks..

  • john

    nice presentation

  • Mauricio

    Nice. Thank you for your time

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.