You might have read my April Fools’ joke about Filemaker 11. Then you know that I do not like the new status toolbar. At the glance it looks nice and adds a modern look to FileMaker.

But after working with it for a while too many annoyances and problems emerged:

• It requires too much space. Usually monitors are more wide than tall. Having the toolbar on the left side of the screen was much more unobtrusive.
• The status toolbar comes always together with the layout toolbar (where you can select a layout and the view mode or switch to layout mode). You cannot hide them individually, wasting even more space.
• Toggle the status toolbar changes the size of the window. I would rather keep the same window size.
• You can not modify the icons of the toolbar by script or activate/deactivate them under controlled conditions.
• You cannot change the design (color, pattern, image) of the icons to create a new theme that might better fit the overall layout of your database.

Of course, most of these points are subjective opinions. Some FileMaker users might like the new status toolbar as it is. They do not consider it as to large and a waste of space because there layout is simple and displays only few fields at a time. But most of projects deal with more complex databases. The client likes to see as much information as possible without scrolling the window or switching to different layouts.

Therefore, I like to have a smaller version of the status toolbar. Instead of waiting for the next version of FileMaker I decided to build my own status toolbar. Perhaps something like this:

Feature wish list

There are some features I like to see in my status toolbar:

• The toolbar should not exceed a height of 30px. That would be the height of the align or arrange palette.
• It should include the default icons of the FileMaker status toolbar.
• The icons should reflect special conditions. For example, the icon Go to previous record should become inactive when the first record is selected.
• The toolbar should work in browse and find mode. The image of the icons should change accordingly.
• If possible it should add more functionality to the icons. For example, Ctrl-click on Go to next record should jump to the last found record.
• The self-made toolbar should be easy to implement into the layout of any existing database, keeping the required number of custom functions, new table fields, scripts, and external files (e. g. images) to a minimum.
• And because it is self-made, adding new icons with new functions not initially provided by FileMaker should be possible.

These are many feature requests, but I think, I can cover most of them with my self-made toolbar. The standard icons (previous/next record, …) are not a big problem. I can create them as images and display them when necessary. It will be harder to replicate the slider under the record number and pie chart with the found/total record count.

Displaying the Icons

First I need to decide, how to display the toolbar icons in the layout. I could insert them as plain images. But how should I deactivate them or change them in Find mode?

Perhaps a container field or a calculation field with calculation result as container) would help. I can define an expression, changing the icon in different window mode and perhaps active or deactivate them. But a regular container field would not show its content in find mode. Okay, changing the container field from regular to global storage will help. Its content is displayed in browse and find mode. Unfortunately it will not react to certain changes like selecting a different record. But this would be required to active/deactivate the icons under special conditions.

At the end I found a different solution. Instead of using data fields for my icons I can use a web viewer. The web viewer object provides an option to display its content in find mode. And it does not requires extra table fields, keeping the number of required elements to a minimum. It is also the perfect solution for the next problem.

Record Position Slider and Found Count Pie Chart

At first I thought, it would be very difficult to mimic the record position slider and the little pie chart that shows the number of found records against total records. Perhaps I could use 1px wide objects combined with conditional formatting. It would required many tiny objects with many different formatting calculations, and overall it would not look like the original thing.

But then I remembered an HTML5 element I have heard of. It is a a drawable region with height and width attributes. With JavaScript code you can apply a full set of drawing functions on it. It turned out to be the perfect element for both, the record position slider and the found/total record count pie chart. You can find a good canvas tutorial at developer.mozilla.org.

For the slider I use a fix background image and a small image of the slider button that is placed on a calculated position. The number of found records and the current record number are used for that (pseudo code):

If( Get( FoundCount ) < 1 Then
   Position = 0
Else
   64 * ( Get( RecordNumber ) - 1 ) / ( Get( FoundCount ) - 1 )
)

For the pie chart I cannot use images. I will draw a full circle filled green and a circle segment in a different green. A gray shadow at the bottom is added in the background. The formula for the segment is calculated with the found count/total record count ratio:

draw arc( x, y, r, -PI/2, 2*PI * Get( FoundCount ) / Get( TotalRecordCount ) - PI/2 )

The fourth parameter -PI/2 is used to start the segment on top (12 o’clock position) instead on the right side (3 o’clock).

Displaying images without images

For the other icons I can use images. Calculations can interpret the current condition (record number, window mode, …) and select the right image. But using images requires additional objects. Either the images are available as files in some directory, or they are stored in table container fields. I like to keep the required elements for my self-made toolbar to a minimum. Looking for a way to get rid of additional image files or table fields I found a solution that fits perfectly to the web viewer objects: data: url.

Data: urls allow you to include image data directly into your code. The image data has to be base64-encoded. The result looks something like

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB...

For large images it is an awful long string. Still, it has the advantage to avoid additional image files. Everything is included in the HTML code.

With data: url I can include all images for the icons into the web viewer code. Unfortunately, the total text for all base64-encoded images plus the code for the canvas and other HTML elements exceeds the allowed length for web viewer codes. But this is not a big problem. Splitting the toolbar into two web viewer elements is doing the trick.

To convert image files to base64 code search the Internet. There are many websites offering free online conversion. I am using a free OS X droplet from Shaun Inman.

Toolbar action

Of course, displaying the toolbar icons is not all. Each clicked icon should start its appropriate action. I combined all toolbar action into a single script: Toolbar( action ). Invisible buttons placed on the right position over the toolbar will call the script with a specific action parameter. The parameter might be different under specific conditions. For example, the button on top of the little pie chart will not create any action parameter in find mode. Accordingly, the toolbar does not show the pie chart in find mode.

For the slider the action is a little bit more complicated. I cannot add drag functionality (I could use a JavaScript library like jQuery to create a real slider, but currently I do not know a way to return the final slider value back to FileMaker). But adding many little, 1px wide buttons on top of the slider allows a clicking function. Each little button calls the toolbar action script with a different position parameter.

Putting it all together

Using web viewer objects with HTML code that includes canvas elements and base64-encoded images plus some invisible buttons and a single toolbar action script is my solution of a self-made toolbar for FileMaker. The autoresize option for the web viewer object on the right is set to extend it to the full layout width. Then all layout objects for the toolbar are grouped for easier handling in layout mode.

Because this solution does not uses any table fields, external images or custom functions, it is easily added to an existing database. Just add the script to the module, then copy the grouped layout element to every layout you like to have the small toolbar.

Additional icons can be added. It will require changes in the HTML code in the web viewer and a new invisible button with some new action code in the toolbar action script. Additional functionality, like multi-function icons (go to next record/last record, …) can be added.

Conclusion

This is my first version of a smaller FileMaker status toolbar. All features from my wish list are included (Yeah!). But there is still room for improvement:

• First, you cannot enter a record number into the field over the slider. To implement this, it would require a table with global field and some script trigger technique (either FM10 or a plugin for FM9).
• Additional functionality for the find icon. In FIleMaker, when you click the find icon and keep the mouse button pressed, a menu will pop up with more find options (create new find, saved finds, …). Some of it could be mimicked with a global field and value list. But some special find functions (e. g. recend finds) cannot be accessed with script commands.
• If I include a table for these global fields, I could add a system making the image assignment easier and more flexible. That would allow also a possible theme solution.

But this is something for the future. Now you may enjoy my current version of the toolbar. Download the toolbar and include it into your solution. Comments, where you have used the toolbar and what functions you have added are appreciated.

Supplement

Shortly after I wrote this post I realized, that my sample database does not work with Windows. As so often, Microsoft decided to do their own thing, not (yet) supporting the canvas element. There might be a way to do it differently. When I find some time I will investigate and post my findings here. I am sorry for the inconvenience.

Arnold Kegebein

Download: toolbar.fp7.zip (45 KB) Mac OS only

Links:
Canvas tutorial, developer.mozilla.org
Canvas (HTML element), wikipedia.org
data: url, wikipedia.org
Image to data droplet for OS X from Shaun Inman