I am deep in the middle of developing an iPad FileMaker Go application for an entertainment labor management company. Thought this would be a great time to share some of what I have learned about designing a mobile database solution.
In designing my iPad layouts I wanted the user to never have to scroll a form view layout. In other words, the layout would fit perfectly both in landscape and portrait mode on the device. This was accomplished by setting the width of the layout to fit the device width while in portrait mode and height of the layout to fit the device height while in landscape mode.
So, I set the right margin to 768 and the total layout height (header + body + footer) to 686. In the case of this application, I am hiding and locking the status toolbar that shows at the bottom of the iPad screen, giving me a bit more room for screen display. (To force the Inspector to display the layout width and right margin location, click anywhere on blank layout space.)
In hindsight, I would not have designed this layout with a header and footer. They are not really serving a purpose with respect to functionality or design, other than that I can apply gradient fill independently in those layout parts.
My next goal was to provide additional data display and functionality while the user was in landscape mode. I originally learned about this technique at the 2012 DevCon. To accomplish this, I placed the additional elements in the right margin, with the left edge of these elements at 768. The width of these elements is 256, bringing the total width to 1024, a perfect fit in landscape. The effect of this on the iPad display is that the elements in the margin will hide in portrait and display in landscape. Here are a few things to keep in mind.
- Field in Right Margin – A field in the right margin will display in landscape mode, but cannot be interacted with unless it is touching the right margin. You can’t use the Go To Object or Go To Field script steps to get there either; it generates an error.
- Grouped Objects – If objects are grouped, and the grouped object is touching the right margin, only the objects in the group that are touching the margin will display. See the screen shot below. The upper right icons (search, create, view) were originally a grouping of native FileMaker objects. What I found was that only the rectangle object would display in landscape; the icons would not appear. The simple solution to this was to take a screen shot of grouped objects and use the resulting PNG graphic file instead.
- Tab Panels – The right margin area is made up of nested tab panels, allowing for additional data display and functionality. The main tab panel has 3 tabs, with the width of each tab set to 86. This puts the tab panels behind the icons in the graphic. I couldn’t use buttons here – remember they will not display unless they are touching the right margin. So I used a tab panel instead to simulate the buttons and provide the user with a visual indication (the small triangles) to indicate where they are. I also provided a second tab panel in the middle main tab panel that has 3 tabs, each providing a different kind of related record creation user interface.
And here is another hint to consider when overlaying objects on a tab panel, if you don’t want the object “stuck” to the panel: place the object first, then slide the panel to the object. This results in the object being independent of the panel. Don’t move that object though without first moving the tab panel to the side. Move the object, then the put the tab panel back. If you move the object first, it will get stuck to the panel.
So there you have it. With a bit of patience and trickery, you can create FileMaker Go mobile database applications that mimic some of the user interface behaviors that iOS users have come to expect. Stay tuned for Part 2 where I continue with some of my findings related to iPad field behavior, mobile database syncing, and more.