In this follow-up to her video introducing the new Card Window feature in FileMaker 16, Martha shows how to use Card Windows for navigation.
Video Transcript:
Hey, my name is Martha Zink, and I’m with Soliant Consulting.
In this video, I’m going to talk about the card window for navigation. So, let me jump right in.
I’ll click on this button up here in the right-hand corner, and you’ll see that it gives me a card window with a bunch of buttons on it. Now, navigation has been a pretty big pain point for me in the past. As my clients’ solutions grow, the more navigation options I need for them. I can usually accomplish something like this in another window, but it just never felt quite right or quite polished enough.
Well, with this version of FileMaker, I have something very powerful, which is really a window within a window. This means I have a second layout that I can go to, but it’s still very focused. It keeps the user’s eye in the right place.
As the user clicks on these different buttons, they go to different parts of the database. If I click on contacts, it takes me to a contact detail screen. As I click on company, it takes me back to the company details.
What’s cool is that you can even leverage the card window a little bit more and use the card window to show more stuff. When I click on “About Us,” it actually shows me information about Soliant Consulting. When I hit “Close”, it throws me right back to navigation. I didn’t actually leave the card window there, I just continued showing the card window and changed the layout within it.
Let’s take a look at the pieces here. I’m going to open up the script first. This is the show navigation script that is attached to the button on the layout. One script step, how awesome is that?
If I click on the script, you’ll see that the window style is a card style and it goes to a layout called navigation. From there I didn’t actually have to set anything else.
The size is dynamic based on the size of the navigation layout, and the position is centered. So I didn’t have to change anything there. I left the close button on and I have the dim parent window so that the user’s attention is drawn to the right place.
As for the buttons on the layout, they all are run by one script. You’ll see in the script, I have a huge “If” statement. It could get huge depending on how many buttons I have, and each part of the “if” or “else/if” tells each button what to do. In most cases, it’s going to close the window, because I need it to close the card window. Then it’ll go to a specific layout.
The exception to that is something like the “About Us” where it doesn’t actually close the window, it stays within the card window and goes to a different layout. Once you open up the card window, by default you’re going to make it go to some layout. You can actually still use that card window to go somewhere else.
Let’s take a quick look at the navigation layout that I have. We’re going to jump over to navigation, and you’ll see it has a very simple layout. It has eight buttons on it. As my client’s functionality increases and they need to add more things to their navigation layout, I can just add more buttons.
This “FAQ” button, I can drag into place. I could add functionality to that button, and then whenever I’m on a layout, I can now click on this button up in the right-hand corner, and there’s that new “FAQ” button.
This is going to grow with your solution very well. It’s clean, and it’s easy to set up. I really think it’s a game-changer when it comes to showing off what FileMaker can do and how easy it can be for a developer to build something that’s very useful for the users.
Keep watching Soliant TV to see more videos about card windows and other features of FileMaker 16. Thank you for watching.
Great Idea for navigation – Your videos a top notch!
It is sad though that the card window can’t be used in web direct. For a new app, I design it for all the platforms from the beginning. This way when the client later wants to go with Web Direct or IOS, I only have to duplicate layouts and resize them. Using the Card windows i would have to have two entirely different navigations system designs in one app. I love card windows but can’t use them until they can be used in web direct. No cost effective for professional app design.
Thank you, CJ! I’m hopeful that Card Windows will become available for FileMaker WebDirect in the next version. And I’m hoping the whole platform can benefit from the animations in the next version, too! It’s not just flash – it’s all about the user experience. I’m guessing you could create a single script to decide whether or not to use a card window or something for WebDirect, but I agree – that would add some tedium and it wouldn’t be as clean. Fingers crossed it’s coming up soon!