14 for 14: What is a Navigation Part?

Why add a new part now... and for navigation?

Good question, to answer that we first need to understand the properties of the navigation layout part and once those are clear the reasons for having it become quite obvious.

The setup of a layout part couldn't be easier, in fact there are no additional options for a part, it's either top or bottom navigation.

We have identified 4 key features of the navigation part that make it a really great UI enhancement for your solutions.

Navigation Parts remain fixed to the top/bottom of screen

This is the most important aspect of a navigation part, and what makes it truly feel like navigation (if used for that purpose).

Take a look at the above picture of a layout. Notice anything? There is something about this layout that was never before possible. I'll give you a second......... got it? Yes? No?

There are a few clues here:

• The layout is in form view
• The layout is in browse mode
• The layout is scrolled
• yet the header and footer remain visible

Well, the last point basically answered it.  When in form view (or any view for that matter) navigation parts remain fixed to the top and bottom of the screen.  Headers and Footers on the other hand do not remain fixed. They remain fixed in list and table views but scroll in form view.

So why does this matter? Well, it opens the doors for us to build sweet layouts that are scrollable, whilst not losing our top/bottom navigation.  FileMaker developers have always been sticklers for putting everything on screen and avoiding scrolling anything that isn't a list layout.

This is quite a paradigm shift, but it draws parallels with websites. Most websites are scrollable and retain their navigation at the top visible to the user. Data-entry forms online also benefit from scrolling by allowing you to build long single data entry forms instead of relying on tabs or multiple screens. This is all now really easy in FileMaker 14. With the rise of FileMaker WebDirect this will be more important than ever as users will be expecting an experience similar to their normal web experience.

Last note on this - if you wish to use top/bottom navigation parts in table view, make sure you mark them as visible via the table view setup:

Navigation Parts do not zoom

Look at the below picture:

That is 10pt text with the layout zoomed to 400%. The navigation part however remains unchanged. Indeed both the top and bottom navigation parts are will not zoom with the layout zoom.

On some level we can understand why this is the case - it's for navigation not actual data so is there any real reason to zoom it? We think not but we can understand if people are a bit confused by this one. Hopefully FileMaker will give us an official reason ;)

Navigation Parts do not print

Now this feature makes perfect sense! The part is to be used for navigation, not printing - nuff said! If you use it for its intended purpose, and place inside it navigation such as links or a button bar then why on earth would you want to print that? You should use a header and footer for printing!

The beauty of this is it allows you to build a layout that might also print quite nicely such as a list view. You can easily print it without all the UI navigation stuff.

(Perhaps) unfortunately you cannot have both a top navigation and a header on your layout and choose to use the header for preview mode, and navigation part for browse mode - you must choose one or the other so if you want a proper printed list with header and footer you will still need another layout.

Navigation Parts have nice animation effects and are stylable

This last one is not functionally necessary but so damn cool (and fun) we included it. Navigation parts have a nice animation effect associated with them when using a trackpad or iPad device and are scrolling a layout.  When you scroll to the top or bottom, the navigation part header/footer "bounces".  It's a little difficult to illustrate but you will have seen this effect on iOS for a couple of years now. You can scroll past the top of the layout essentially.

While we have not yet figured out how to alter the underlying fill colour you see (we'd love to know how) it is a nice little animation that ties it in nicely with the feel of iOS.

Navigation parts can also be styled in the same way as headers and footers. You can define a background fill for the navigation part system-wide by turning it into a style of the theme you use.

Example File

To go along with this article we've done a sweet demo file you can download below. This shows you the setup of a navigation part and an example of a scrollable form-view layout that uses navigation parts so you can get a feel for the usage and benefit.  Note because this uses a FileMaker 14 feature it obviously will only work nicely in 14, but you can try opening in 13 at your own risk :)

Click here to download the demo file.

Update!

Reader LaRetta pointed out that the colour you see when doing the "bounce" effect for the navigation parts is actually the layout background, of course!  You can change this by clicking off the edge of the layout to set the inspector to layout background and then alter the colour from there, thanks LaRetta for the tip!   LaRetta also kindly attached a modified example file to illustrate this which you can download below.

Click here to download the modified demo file.