FileMaker 14: Field Placeholder Text

FileMaker Pro 14 includes a new feature to add placeholder text to fields on a layout. What is placeholder text? Simply put, it is a way to put text inside a field when it is empty. This feature is useful for mobile, web and desktop users alike.

fieldplaceholdertext-1
A layout with fields using placeholder text. *(How I made the magnifying glass appear is detailed below)

 

Getting Started

There are two ways to access the placeholder text feature. The first way is via the Field Picker dialog box. There is a now a fourth button for label placement: inside the field bounds. By default, the field name is the placeholder text when adding a field to the layout.

fieldplaceholdertext-2
The placeholder text Field Picker label option.

The second way to access the placeholder text feature is via the Inspector Palette > Data tab when in Layout Mode. It is under the field selector in the Field grouping at the top of the tab. When accessing the placeholder text feature via the inspector we now have access to the full calculation engine to create dynamic text if needed.

fieldplaceholdertext-3
The placeholder text feature in the Inspector Palette.

Why is this a big deal?

No more workarounds!

Placeholder text has been a feature developers (myself included) have been requesting from FileMaker, Inc. for years. In order to build this type of interface element we had to resort to various workarounds and trickery. Here’s a list of some techniques that placeholder text can replace:

  • Field Auto-Enter calculations – e.g., “Enter your company name here”.
  • Labels with Conditional Formatting to show/hide based on field contents.
  • Value Lists that contain a “label” as the first option – e.g., “Sort By:”.
  • Calculation fields to show “label” text or contents of a container field.

Designed for mobile

Space is limited when designing highly usable interfaces for mobile clients, especially phones. Now we can use a common design pattern of placing the label inside the field to reclaim space and reduce clutter.

Helpful layout mode hints

When in layout mode, fields that have placeholder text have a new icon to tell us it is there. If you over over the icon a tooltip will appear showing the calculation for the placeholder text and if it’s applied in Find Mode.

fieldplaceholdertext-4
Helpful tooltip for the Search field placeholder text.

We can also customize the text formatting and alignment options. There is a new option in the Inspector > Appearance: object state menu for fields named “Placeholder Text”.

Customize the appearance of placeholder text in the Inspector.
Customize the appearance of placeholder text in the Inspector.

Think about your audience

Avoid the temptation to use placeholder text as a label replacement in desktop and web solutions. Labels and placeholder text serve two distinctly different purposes. One example of this is users who rely on screen readers or other accessibility features. In FileMaker we can associate a label to a field in the Accessibility Inspector, but we cannot do the same thing with the placeholder text. By implementing a field label as placeholder text we have removed key functionality in our solution.

A friendly reminder: placeholder text only shows up when the field is empty. When there is data in a field any helpful information you provided via placeholder text is gone. Depending on the situation it might be important to provide helpful information to the user when data is in the field. Standard labels are an important interface element on layouts when working with new, empty records and existing records alike.

Leveraging Field Comments – an alternate approach

When I was exploring the placeholder text feature I wondered to myself – “Is there an even easier way to implement them across large solutions?”. The same field could be in place across multiple layouts. It would be fantastic if I only had to go to one place to change the placeholder text everywhere.

Well, it turns out there is a way – by using the Comment field in Define Database and a generic formula in the placeholder text calculation.

First, add a comment to a field:

An example of placeholder text in a field comment.
An example of placeholder text in a field comment.

Now use the following formula in the field’s placeholder text calculation:

A calculation using FieldComment for placeholder text.
A calculation using FieldComment for placeholder text.

That’s all there is! The best part about this method is you can use the same generic formula across any fields you choose to comment. This works great for simple placeholders, but it’s not appropriate when a calculated result is needed.

Conclusion

Placeholder text is a great new feature in FileMaker 14. It is simple and lightweight, yet can be used in very creative and advanced ways. It gives developers a popular interface design pattern for use across mobile, web and desktop clients that is customizable to the specific needs of each. It helps reduce the overhead of additional schema elements in the database previously required to achieve a similar result.

I look forward to seeing how others use it in their solutions in the months ahead!

PS – How I made the magnifying glass show up

This is a trick I learned when Mac OS X started to include emoji character support, starting around 10.7 I believe. With help from the OS X Character Viewer you can insert emoji text into any calculation dialog in FileMaker. They magically show up just fine! (In Mac OS and iOS, your mileage may vary in Windows. It didn’t work for me in Win 7.)

Leave a Reply