Weird Tales of WebDirect: Radio Buttons & Checkboxes

TL;DR: Radio Buttons and Checkboxes can look different from browser to browser in WebDirect. Use button bars with checkbox or radio button icons instead of native control styles for the most consistent UI.

The Problem

Have you ever ordered pizza with your favorite topping, but when you get it, they made a mistake? Like, you ordered pepperoni but got pineapple? It’s still pizza, it’s still delicious – but not quite what you wanted, or expected.

That’s what Radio Buttons and Checkboxes are like in FileMaker WebDirect.

Radio Buttons and Checkboxes are field control styles in the FileMaker platform. They control the way a user enters data into a field by making them pick from a particular list of values.

Typically, they look something like this:

Screenshot 1: FileMaker

In FileMaker Pro, you can specify the color, line weight, and size of Radio Buttons and Checkboxes to your heart’s content, but when you view those same controls in WebDirect, things can look a lot different. WebDirect relies on the browser to generate the controls, so not only can the styling look different from FileMaker Pro, it can also look different from one browser to another.

Here’s how it looks in Safari and Chrome:

Screenshot 2: Safari	Screenshot 3: Chrome

Small differences, sure, but they can have a big impact on your user interface (UI). For example, you’ll notice that the line weight of the controls appears differently in each browser and that in Chrome, the values for Ham and Broccoli are shifted almost entirely off the list and out of view. This latter issue has the most potential for courting disaster – if you don’t make your field large enough, it can either limit the visibility of a selected value or allow a user to select a value that they can’t even see!

The Solution

So, what’s the solution? The easiest solution is simple: perform thorough testing. Any time you use a Checkbox or Radio Button field control, open that layout in WebDirect and in all of the browsers in which it will be used and make sure your UI looks the way you expected.

But the easiest solution is not always the best.

A more reliable solution is to use a Button Bar with icons for each type of control style. This will give you the most consistent-looking UI and require the least amount of adjustment for each type of browser. You’ll need to add a hide condition for each of the segments of the button bar, and a script attached to each segment that either clears or sets the field with the appropriate value.  This isn’t particularly difficult but can be tedious if you have a long value list. You can see the implementation of the button bars in my unlocked sample file free for download. See the scripts ‘SetTopping’ and ‘SetCrust’.

Here’s what it looks like in FileMaker Pro:

Screenshot 4: FileMaker

… and now, here’s what it looks like in our sample browsers:

Screenshot 5: Safari	Screenshot 6: Chrome

You’ll note that all of the control style icons look EXACTLY the same, both in FileMaker Pro and in both of the browsers. The only variation is how each browser substitutes the font that I’m using, which is a nominal substitution and almost unnoticeable.

But Wait, There’s More

There’s another advantage to this solution as well – in some situations, generating a PDF from a FileMaker Server on Linux will fail if the layout that is being rendered uses native FileMaker Radio Buttons. Using a Button Bar with icons solves this problem as well.

Getting What You Ordered

If you want to make sure you get exactly what you order, and don’t end up with a substitute control style that you’re not happy with, use a button bar with icons that you choose, instead of the ones that the browser chooses. I’ve included a sample file ( WTWD - Radio Buttons & Checkboxes - Pizza.fmp12 ) to help you see how it looks when it’s all set up properly.

Otherwise, you might get pineapple on your pizza instead of pepperoni, and almost no one wants that (other than Mark Richman, who likes them both, on the same pizza, which is almost impossible to believe).