Slide a Block for FileMaker Go…

Few years ago I wrote a « how-to » post – FileMaker GO’s layouts, Slide a block method – about designing layouts for FileMaker Go with in mind a real iOS look and feel and how to deal with the rotation issue.

FileMaker 13 have introduced a new script trigger OnRotation of the device.

So you can use 2 differents layouts to display the portrait and landscape view, but it’s twice the job….

I still prefer to work on one layout only.

This tutorial explains how to deal with the device rotation in this case…
Since FileMaker Go 12, few things have changed, and first of all was the new behaviour of the portal on iOS. With FileMaker Go 12 & 13 a portal can’t be hidden behind another object as long as is scrollbar is active. But with some tricks we found a simple methodology to design common iOS patterns with ease.

Many common iOS patterns can be designed for FileMaker Go.

For any FileMaker solutions, I have to deal with content and navigation (between layouts or for actions).
For iOS I use differents patterns to design my layouts : Single View (all the content is in one body – or column) the content just stretch on the rotation. This pattern is used on iPhone mostly.

For iPad I use 2 other patterns : the Split View (in landscape mode an additional area is displayed) and the 3 Panes View(additional content are displayed in portrait and landscape mode)

For navigation and the « navbar » in particular, my favorite choice is the bottom horizontal navbar for accessibility purpose. I also have solutions for left and right vertical navbar. I had never experimented a top horizontal navbar, because I don’t want on touch device my hand to cover my layout and the content when I want to clic on something…

If I list all my choices, I found 15 different templates, and I present in this post only the main ones.

In this tutorial, I present layouts for iPad with the following settings :

iOS menu bar is off (FileMaker Go settings – manually) FileMaker toolbar is off (with a start up script) – if you need the toolbar remove 44pt to all heights.

anatomy of an iPad layout

patterns I recommend :

I design the both views (portrait & landscape) on the same layout

very first rule : ‘body’ content must be the same in both views second rule : bottom navbar is better for accessibility

2 different patterns follow these rules under most conditions :

one in split view

one in 3 panes view

split view :

in landscape mode, the screen is split in a ‘body’ and an ‘additional’ content. in this view, I use the extra space to display various contents : menu (portal) or additional content (charts, web viewer, …)

extra area on the right doesn’t follow Apple iOS guidelines, this choice is about performance, the body doesn’t have to redraw after the rotation

with this pattern, to keep content the same in the body after rotation and to avoid blank space you need an object in the body that resizes vertically like : a portal, a text field as note, a container field, or a web viewer

3 panes view

with this pattern the screen is divided into 3 different panes : a body + an extra content in landscape + another extra content in portrait

I recommend this scenario when you have to display the same content in both views with object displacement after rotation. it can be fields, charts, containers, web viewers…

the second usage to respect iOS look & feel is a menu in landscape and an additional content in portrait when objects in the body can’t be vertically resized

objects, tools and issues

to design layout, use tab panels as ‘layers’ : this is a great way to automatically group and move objects dragged inside

the primary tool is the Position Inspector (position & autosizing)

the only possible issue is when you have a portal with the option ‘Show vertical scroll bar’ activated in one of the extra content area since FileMaker Go 12, a portal with scroll bar is always displayed on top of any other object even if it’s in the background behind a bigger object. to hide a portal you have to resize it to 1pt width and/or drag it into a tab panel and resize the same tab panel to 1pt vertically or horizontally (various cases are explained in the tutorial)

first tutorial :

scenario 1 – split view :

Bottom Horizontal Navigation bar & Right extra content in landscape / basic resizing

I follow these steps :

1 I start with a 768 x 737 canvas

2 I add a 1024 x 687 tab panel

3 I add a 256 x 687 extra content into the tab panel, I put the content I need inside the area (can be a portal)

4 I resize the tab panel to 768 x 687, extra content tab panel is now hidden inside I put the content I need inside the area

5 I add a 768 x 50 navbar under the tab panel

from portrait to landscape : body expands to the right and extra content is displayed, navbar expands and stays at the bottom of the screen

from landscape to portrait : body reduces horizontally (extra content is hidden) and expands vertically, navbar is pushed to the bottom of the screen

second tutorial

scenario 2 – split view

Bottom Horizontal Navigation bar & Left extra content in landscape 

‘portal issue’ fixed when included in an extra content tab panel with horizontal resizing

I follow these steps :

1 I start with a 768 x 737 canvas

2 I add a 256 x 687 tab panel as extra content and I put the content you need inside the area

// if the extra content is a portal with the option ‘Show vertical scroll bar’ activated

3 I add a portal inside the extra content tab panel (I need to increase temporarily the extra content tab panel width)

4 I resize portal to a width of 1 pt

5 I resize extra content tab panel to 1 x 687

6 I add a 768 x 687 tab panel as body, I put the content I need inside the area

7 I add a 768 x 50 navbar under the tab panel

from portrait to landscape : extra content expands horizontally on the left and body moves to the right, navbar expands and stays at the bottom of the screen

from landscape to portrait : extra content reduces horizontally, body moves to the right and expands vertically, the navbar is pushed to the bottom of the screen

third tutorial

scenario 3 – 3 panes view

Bottom Horizontal Navigation bar & Right extra content in landscape & Bottom extra content in portrait

‘portal issue’ fixed when included in an extra content tab panel with vertical resizing

I follow these steps :

1 I start with a 768 x 737 canvas

2 I add a 1024 x 687 tab panel

3 I add a 256 x 687 extra content into the tab panel, Iput the content I need inside the area (can be a portal)

4 I resize the tab panel to 768 x 687, extra content is now hidden inside, I put the content I need inside the area

5 I add a 768 x 256 tab panel for a bottom extra content, I put the content you need inside the area

// if the extra content is a portal with the option ‘Show vertical scroll bar’ activated

6 I add a portal inside the extra content tab panel, I enter the number of rows I have to display in the area, the portal position start vertically 50 pt (nav height) from extra content tab panel top

7 I resize the extra content tab panel to 768 x 1 and position 0 – 686, be sure this panel is in the background and not inside the body tab panel

8 I add a 768 x 50 navbar under the tab panel

from portrait to landscape : body expands to the right and first extra content is displayed, second extra content reduces vertically, navbar expands and stays at the bottom of the screen

from landscape to portrait : body reduces horizontally (first extra content is hidden), second extra content expands vertically, navbar is pushed to the bottom of the screen

demo FileMaker 13 solution (the layouts are designed for FileMaker Go for iPad)

Many thanks to Brian Schick from Beezwax for his feedback.