Sweet Scrolling in FileMaker Go 12

Introduction

Portal scrolling has always been a bit of a struggle in FileMaker Go up until the release of version 12. This article outlines some of the changes to portal scrolling in FileMaker Go 12 and we give a couple of examples how it can be set-up to give a very nice native-application look and feel. We also cover field scrolling.

Getting that Native-App look

If you look at any regular application on the iPhone or iPad you'll notice they all have very similar looking scrolling. This is typified by a thin grey bar to give a visual cue as to where the scroll position is - yet there is no actual scrollbar present.

In these applications the scroll indicator is close up to the right edge of the screen. You'll notice it can even slightly overlay some of the contents, as if the scroll is floating on top of everything else. This is what we are going to try and replicate for our FileMaker Go layout for iPhone.

Our iPhone layout design

So below we have a layout that we have designed to be used on an iPhone running FileMaker Go 12. This layout mostly contains a portal and as you can see in the image, we too have a little grey scroll indicator up to the right edge of screen.

You may be asking yourself why we didn't just use a list-view layout as opposed to a portal - surely that would have been easier. There are a couple of reasons why we chose not to:

• We do not wish for our context to be that of the portal (or a list-view layout).
• Portals have a tendency to render much faster than records in list-view. This means they feel much more like a faster native application, and we don't see so much blocky rendering happening.
• Portals in FileMaker Go 12 no longer require to be clicked into before you can begin scrolling which was the case in FileMaker Go 11. This means they are actually usable now!
• With a portal you get a nice left-edge of the screen without the list-view thin bar you get to indicate current record.

If we look at the layout in layout mode, you can see how this effect has been achieved.

What we have done is to simply place the visible scroll-bar portion of the portal off the right edge of the layout. This means the visual scroll bar never appears on-screen but the grey scroll indicator does given that it is appearing to the left of the scroll bar - the area of which is still on screen.

It is a very strange thing that portals in FileMaker Go 12 should even render with a scrollbar at all - they are completely useless and do not actually serve any functional purpose as we shall see later. Good thing we can now hide things off the edge of the screen!

What about scrolling within a layout?

Scrolling when the portal extends to the edge of the layout is fine because we can simply hide the scroll bar off the edge of the layout. But what if we have a portal we want to scroll that is contained within the layout too far from the edge to be hidden?

Let's consider the screen above. In this case we have a portal that is not touching the edge of the layout. Never fear! We can still achieve the same desired effect with a little jiggery pokery.

But first...

Before we show how this effect can be achieved let's investigate why a regular portal is a bad idea to be used on-screen in FileMaker Go 12 for scrolling.

Here we have a typical portal displayed within the layout shown in both browse mode and layout mode. We have some rounded corners on the portal because the desired effect is to show a rounded white box on the screen with the records within. The scrollbar is clearly visible for all to see.

Now, what do you suppose would happen if the user began to run their finger up the portal to scroll? Well, it's a scrollbar so you may expect it to look how it might in FileMaker Pro, surely.

As soon as the user begins to scroll, the scroll bar disappears entirely! This leaves no right edge to the portal which means it no longer has rounded right edges. The grey scroll indicator you can see is still present aligned to the left of where the scroll bar used to be.

In this above picture, the user has stopped scrolling, but the scroll bar is still nowhere to be seen. In fact, the only time the scroll bar appears is when the user is not in the portal. It can be made to reappear when the user clicks elsewhere on the layout - but when it appears it is simply a scrollbar with no actual use. We should just get rid of it entirely!

Hide the scrollbar by covering it up

We've all done this in FileMaker development at some point or another - cover up layout objects with other objects. Fortunately in FileMaker Go 12, if you cover just the scroll bar part of a portal with another object, the scroll bar will never appear, or jump in front of it's overlaying object, so it is quite simple to hide them.

Here we have placed a graphic over top of the scrollbar. It should be noted here that because the portal scrollbar constitutes the right-edge of the portal, then with it disappearing we no longer have a rounded right edge to display. To remedy this, we have made the portal transparent, and placed a rounded rectangle beneath the portal instead.

It does not matter where the portal scroll bar is positioned so long as it can be overlaid. In this case we wanted to get the scroll indicator positioned in such a place that means the scroll bar is part-on and part-off the layout. This is no problem however.

Scrolling of text fields

The next challenge we encountered with scrolling in FileMaker Go 12 came when we tried to scroll a text field on the layout. In FileMaker Pro 12 if you want to scroll a text field you put a scrollbar on it, click into the field, and then begin scrolling. Unfortunately it's not so easy in FileMaker Go 12.

Here we have a field on the layout. Note we have no scrollbar. The reason is that once the user is clicked in the field, they can scroll whether there is a scrollbar or not, so it is again kind of a redundant artifact to be showing on a field.

So, here is the field in browse mode showing lots of text, too much to see on screen at once, so we really want to be able to scroll. Let's try clicking into the field ala FileMaker Pro 12.

Problem! in FileMaker Go 12 when you click into a field, it automatically reveals the keyboard in anticipation for input. It does not know that we merely want to view and scroll the information in the field, not edit it! We don't want to show the keyboard every time we want to scroll, nor do we want to have to click into the field to begin scrolling. It would be nice if it performs like portals do.

Web viewers to the rescue

One solution to this issue we found was to use web viewers instead. In FileMaker Go 12, the web viewers exhibit a nice scrolling experience much the same as portals. Also they do not reveal the keyboard because there is no field to click into.

The one difference between web viewers and portals however is that a web viewer must be clicked into and given focus before it will scroll, it does not register scrolling automatically. We can overcome this however through using some script triggers, more on this below.

In order to display the fields contents we are using a Data URL. This allows us to render text in the field directly via the web viewer without the need for plugins - which are not compatible with FileMaker Go anyway.

The end result is quite nice. To overcome the fact the web viewer has to be in focus to be scrolled, we are ensuring that when we go to the above particular screen, we go directly to the web viewer through a Go to Object script step. By arriving at this screen directly in the web viewer, the user can begin scrolling right away.

In the picture above we have used data:text/plain as our data URL scheme which gives the font in courier. This lets the text automatically wrap itself to the edge of the web viewer so we have no side-scrolling required to view all of the text. We are sure there are always to alter the font and retain this behavior but have not investigated this further.

Because in this solution nothing is editable, the user has no reason to leave the web viewer unless they choose to via one of the navigation buttons. To keep the scroll alive, we put a simple little script trigger on the web viewer for the onObjectExit condition.

Whenever the user attempts to leave the web viewer, they will only succeed in doing so if the parameter to the script is non-empty. Because we are passing the current script name as a parameter - it means the user will only be able to exit the web viewer if navigating away from it via script. If they manually attempt to click outside of the web viewer - e.g. on the layout - then this will fail and they will be kept in the web viewer. Because all of our navigation is from scripts, this ensures that when a script tries to navigate the user away from this screen it will succeed in doing so.

Just a note about web viewers in FileMaker Go 12

In building the database on which this article is based we encountered a number of rendering issues with the web viewers in FileMaker Go 12. Often the web viewers simply fail to render anything, and are displayed as a black box. Other times they part-render insomuch as they display as a blank white box instead of black! It is only about 1/2 the time that they actually work properly and render the contents of the data URL.

We have also noticed other issues with web viewers in FileMaker Pro 12 Advanced which are bugs, and we have been submitting these to FileMaker in the hopes they will be resolved in an upcoming patch. So fingers crossed the reliability of the web viewer improves in future releases so that this technique becomes 100% reliable :)

Example File

Please find attached an example file. This file is provided to help you fully understand what is going on in this article, and to let you experiment with this solution in both FileMaker Pro and FileMaker Go.

Download Example File