Live Formatting Technique

Claris FileMaker has long offered ways to parse the digits from a text string and intersperse formatting characters to provide a unified format for Phone, Social Security, and Federal ID numbers. The introduction of Custom Functions (CFs) made it possible to abstract the process by applying a “mask” template. A mask is a combination of static “formatting characters” and multiple instances of a temporary “placeholder” character (the # throughout this blog post) that identifies the expected locations of digits in the result. In 2006, I wrote and shared with the Claris FileMaker community a custom function called Mask that takes three parameters to produce its result.

Mask Formatting 

Mask formatting increases visual consistency in ways likely to reduce user data entry errors, and also improves find capabilities. For example, when applying the (###) ###-#### mask to a phone number, you can use the find criteria “(704)” to find all phone numbers that originated in Charlotte, NC. The find criteria “(704) 996-” would reveal phone numbers originally issued by Verizon Wireless in that market. That info may be less useful in this era of number portability, but still handy.

Visual Consistency with Live Formatting

Applying a consistent structure also allows disambiguation of SSN and Federal ID values when both number types may be entered in the same field. A find for @@@-* would find only records with SSN values in that field, while @@-* would find only those with Federal ID values. And in any of the fields using this technique, the find criteria “#” would return partially completed entries.

Those use cases aside, visual consistency is likely the biggest reason for implementing a masking technique. As mentioned, adding formatting when the user exited a field or committed a record was once the standard. When FileMaker 10 introduced Script Triggers in 2009, leveraging them to insert each digit within a defined format as it was typed (“live masking”) seemed like an interesting technical challenge.

When the technique shown above was first created, live masking was so uncommon that there were few examples of it and no apparent consensus for how it should respond to user input. Ten years later, more web sites have implemented some version of this technique but there’s still significant diversity in the User Interface/User Experience (UI/UX.)

The demo file’s structure is straightforward. Each field has four script trigger events enabled: OnObjectEnter, OnObjectKeystroke, OnObjectModify, and OnObjectExit. Each trigger event calls the script that matches its name. Each script identifies the relevant parameters in the context of the trigger event, then passes them to the Mask custom function when necessary.

Replicating Live Formatting Steps

You can easily replicate the live formatting in your own file and the technique is completely portable involving one custom function, a few scripts, and a small modification to your startup script.

1. Copy the Mask custom function and paste into your file
2. Copy and paste the 5 scripts to your file
3. Copy and paste one of the fields from the demo layout onto a layout in your file
4. Double-click this field in your file and select a phone number field from one of your tables
5. Copy the Set Variable script step from the “Startup” script into your own startup script and modify the Evaluate function within that script step, adapting it to your own file (see below)

One Last Step with Live Formatting

Arguably, the trickiest part of this implementation is step 5 above. You’ll need to adjust the Let function to reference the correct field name(s) and table occurrence name(s) in the Substitute functions, and then ensure that this script step runs when your solution opens. You can enable and update the $$areaCodeDefault and $$areaCodeDefaultFieldList lines if you want to insert a default area code when entering an empty version of the fields in $$areaCodeDefaultFieldList.

That’s it! One custom function, four script triggers, a little startup tweak, and you’ve got a really magical phone number formatting user experience.

Curious to take a deep dive under the hood to investigate how and why this works? Check out the Live Formatting Modus Operandi post.