Creating a Fundamental FileMaker Go Layout – Layout Sizing

This is the second blog post in a series about Creating a Fundamental Layout for use in FileMaker Go. The goal of this series is to offer practical advice and specific instructions for creating FileMaker Go layouts that look and act the way you, and your users, expect. Today we’ll be covering Layout Sizing. Sizing a FileMaker Go layout is based on the idea of being able to Scroll Lock your layout. I cover the explanation and importance of this concept in my previous post of this series, Understanding Scroll Lock. In short, scroll lock is when the objects in a layout are contained within vertical and/or horizontal size constraints, causing the layout to conform to the expected behavior of layouts on mobile devices. The expected behavior is:

• If all objects are shown on a layout, lock the layout so it can’t be moved.
• If not all of the objects on a layout are shown, allow the user to scroll horizontally and/or vertically in order to see the additional objects.

FileMaker Go : Layout Sizing

FileMaker Go can handle the same-sized layouts as FileMaker Pro. However, in order for a layout to be user-friendly on an iOS device, certain size constraints should be met. The official FileMaker sanctioned sizes are:

These constraints can be found in the FileMaker Go TechBrief. The constraints allow you to create layouts that can be viewed on iOS devices with minimal scrolling. The problem with using these exact measurements is that when viewing a layout in FileMaker Go, your user will be able to move your layout around instead of the layout being fit to the device’s screen. When viewing the layout in landscape, your users will be able to scroll the window down and see the objects meant for portrait view and vice versa. To alleviate this problem, you can create what I refer to as a common block and wings. This concept was touched on briefly in the FM Academy’s webinar on 5 Important Techniques to Build a Solution in FileMaker Go, but I’ll go into more detail here. The common block is the intersection of the portrait and landscape size constraints. This is the section of the layout that will always show, regardless of how your iOS device is oriented. Note: all measurements are in pixels (px)

Common block for iPad: 768 width, 673 height Common block for iPhone: 320 width, 255 height

The common block can be used by itself with autosizing anchors to create a layout that will fit exactly to the iOS device screen. Unfortunately using the common block alone means losing a sizable amount of useable space to the right and beneath. This is where the concept of wings comes in. The parts of the layout that extend past the common block and only show in landscape or portrait become what I refer to as wings.

Portrait wing for iPad: 768 width, 256 height Landscape wing for iPad: 256 width, 673 height Portrait wing for iPhone: 320 width, 131 height Landscape wing for iPhone: 161 width, 255 height

These measurements assume you are creating a layout with the toolbar ON. If you want to use the common block and wing concept on layouts that will not show the toolbar the measurements change a bit. The toolbar is 44 pixels tall on iOS devices. Layouts in Go are always fit to the screen so you have to account for the space that is no longer taken up by the toolbar. The measurements for the common block on iOS layouts without the toolbar are:

Common block for iPad: 768 width, 717 height Common block for iPhone: 320 width, 289 height

The measurements for wings on iOS layouts without the toolbar are:

Portrait wing for iPad: 768 width, 256 height Landscape wing for iPad: 256 width, 717 height Portrait wing for iPhone: 320 width, 140 height Landscape wing for iPhone: 161 width, 289 height

These wings can have other objects such as text fields or buttons placed on top of them. You can then group all of the objects together. Once grouped, you can apply the appropriate autosizing anchors (right, top, and bottom for the right wing; left, bottom, and right for the right wing) to them that will allow them to slide out depending on the iOS device’s orientation. Once you have your anchors set, move the wings under the common block until their outer edges meet up (the right wing’s right edge is aligned with the right edge of the common block and the bottom wing’s bottom edge is aligned with the bottom edge of the common block). The last thing to do is to adjust the body part size. When you resize the body part to fit against the bottom edge of the common block, zoom in to 400 percent. You’ll notice there is a 1 pixel white space line at the very bottom. This happens because the corner resizing tools are included in the object’s size but extend past the object’s actual edges. If you click on the body part icon, you can set the size of the part in the position inspector. Set the bottom position for the body part to one pixel less than your common block’s height. And you’re done. You can go view your layout on a a device with FileMaker Go. All of the items in your common block should show in either orientation. The objects on the right wing should show in landscape orientation only, and the objects in the bottom wing should show in portrait view only. You will also achieve scroll locking. Click here to download the example file used in this article: here.
Christopher Schmitz is a FileMaker Certified Developer at Skeleton Key. About Skeleton Key Skeleton Key is an accomplished team of technology consultants who solve business problems. We specialize in the rapid development of custom applications, integrating Macs and PCs in the professional workplace, and providing personalized FileMaker training and coaching. Despite our end-to-end technical skills, we are consultant first and technologist second. We know that you don’t just need technology. You need to know that the technology you choose to deploy will provide the results you desire. Skeleton Key is a Platinum Level FileMaker Business Alliance company, an Authorized FileMaker Trainer, a member of the Apple Consultants Network and a Microsoft Registered Partner. …