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.
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.
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.
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.
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”.
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:
Now use the following formula in the field’s placeholder text calculation:
FieldComment ( "" ; GetFieldName ( Self ) )
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.)