Unleashing Mac OS X’s Color Picker in FileMaker

Color is one of the most important tools available to you when designing user interfaces. Using a little color can turn a drab wall of text into something attractive and readable.

The human eye is tuned to perceive color. This makes it a key tool for helping users quickly sort through complex information. This isn’t to say that your layout should be a tacky rainbow of hues. All it takes is a little deliberate and tasteful formatting here and there to increase usability for your users. This post presents a technique that allows users on Mac OS (sorry Windows users!) to harness the power of color by unleashing the Color Picker in their solution. It’s pretty simple really; all you need is a global field and one custom function!

 

Color to the rescue

Color helped with a recent FIleMaker system we built for a client to handle project management. The users were very visually-oriented, but they also had a good deal of complex data to sort through. They were viewing multiple projects, each of which were progressing through various stages. Our challenge was to reduce the apparent complexity of this data so that someone could find what they were looking for at a glance.

Color is a great way to help users identify groups and trends. Since configurations were going to be ever changing and growing in this database, we decided to let the users choose the colors. Herein lies the problem: In FileMaker, how do you allow users to dynamically select and view colors of layout elements?

Dynamic Color Assignment in FileMaker Pro

FileMaker is very limited in the area of dynamic color assignment. The only way to dynamically set a color, outside of the Web Viewer, is to color text via the TextColor() function; otherwise, you are stuck hard-coding the color. With layout objects, your closest option is to use conditional formatting. This is useful, but the only way to account for multiple possibilities is to code conditions for them upfront.

Allowing the user to set a color is also tricky. Who wants to type in a RGB value? You could alternatively paste in some colored text and extract a color from there (hint: use the GetAsCSS function), but that isn’t much easier.

The Mac OS X Color Picker

We were fortunate in that this client is exclusively using Mac OS X. One of the great things about working with Apple’s desktop OS is the availability of system resources for FileMaker to call via AppleScript. You can access these from FileMaker using the Perform AppleScript script step. In our case, the golden resource is AppleScript’s “Choose Color” command, which presents Mac OS X’s default Color Picker and returns the user’s selection. The Color Picker is plenty robust for our needs, so all we need to do is parse the results and send them back to FileMaker.

Some other features of the Mac OS X color picker worth noting:

• Multiple slider options (Grayscale, RGB, CMYK, HSB)
• Color wheel
• Eye dropper (looks like a magnifying glass)
• Configurable palettes (they can even be transferred as files)
• Extensible (you can download and install free plug-ins)

You can also find quick Color Picker guides, like this one.

Using Mac OS X’s Color Picker in FileMaker

The technique presented here will give you (on Mac OS X) a polished and robust Color Picker with no requirements other than a custom function and a global field. You can even set the default color displayed on the Color Picker. Here’s how:

First, create a script that does the following:

1. Generate AppleScript using a custom function
   • This function allows you to specify the default color and which global field will receive the result:AppleScriptChooseColor ( fullFieldName ; defaultColor )The following calculation will open a Color Picker defaulting to red and return the user’s selection in the field FOCUS::TEMP_TEXT_GT.AppleScriptChooseColor ( GetFieldName ( FOCUS::TEMP_TEXT_GT ) ; "RGB ( 255 ; 0 ; 0 )" )
2. Retrieve the resulting RGB() statement from the global field
3. Store RGB statement or value wherever it is appropriate
   • You can use a field in the database record being colored
4. Use the RGB value within a TextColor() statement

Pretty simple, right? What you do with the result is up to you.

In the attached demo, I used Webdings (available by default on Mac and Windows) to format a square text object with the color. Check it out and let me know what you think.

Download the demo:  Demo_ColorPicker_2011.11.15

Demo updated Nov 16, 2011. Enhanced error handling and AppleScript compatibility. Note, this demo may not be compatible with versions of FileMaker Pro prior to version 11.