Better WebDirect Checkboxes

Here’s a quick guide to creating visually pleasing FileMaker checkboxes and radio buttons in a format that translates to WebDirect (and even includes emojis)!

Accessing FileMaker solutions via WebDirect is convenient, but has unfortunate limitations, especially when it comes to design. A common frustration among developers is that checkbox formatting in FileMaker doesn’t translate to WebDirect. This occurs because checkboxes (and radio buttons) are controlled by the browser, and therefore render as standard HTML elements. Here’s our guide to creating visually better WebDirect checkboxes in FileMaker.

One solution to this problem is to avoid checkboxes and radio buttons altogether, and use button bars instead! We love button bars at AppWorks; we have a podcast, multiple videos (1, 2, 3), and a three-part blog series dedicated to the versatility of button bars. 

The technique outlined below can be applied to radio button sets with more than two options, and you can even add emojis! This method is perfect for boolean options, like marking something as a favorite, indicating whether or not an invoice has been paid, or for any situation where you would use a radio button set.

Using Boolean Fields in FileMaker

When using boolean fields, make sure your table contains a number field that corresponds to whatever it is you wish to keep track of. For example, I’m marking something as a favorite, so my field is called “isFavorite”. That number field will use a custom value list containing only the number 1. 1 corresponds to true, and 0 is false. 

Next, grab a button bar, give it two segments, and style it however you’d like. I removed the border and made it show an icon only. 

WebDirect checkbox example

Each button will have only one step, which will be the same for both buttons: use the “Set Field” script step, specify the field to your boolean field, and set the calculation to “not [field]”

Interface when setting a Boolean field

This should be enough to put in basic functionality.

Gif that shows checkbox functionality

Don’t stop here though, because right now both buttons can actually be used to toggle the field, and we want one to toggle on and one to toggle off. We’ll do this with conditional visibility.

In the Data tab of the inspector pane (layout mode), select the “on” button and scroll down to “Hide object when”. Click the pencil and enter “not [field]” because we want to hide the on button when the field is set to 0. Select the off button, click the pencil and enter “[field]” because we want to hide the off button when the field is set to 1. 

Interface shown when in data tab of layout mode

By default, this will stack the button segments on top of each other. 

WebDirect checkbox in progress

From here you can also add visibility styles or conditional formatting to the buttons to extend their customization.

When Using WebDirect

This method doesn’t produce exactly the same results when it translates to WebDirect, but there’s an easy fix. Instead of a single button bar, use two stacked buttons with the same visibility settings as the button bar segments. 

Checkbox showing two stacked buttons in WebDirect

Using Radio Buttons in FileMaker

A similar technique can be applied to replace radio buttons. With a little bit of conditional formatting, you can make radio buttons much more interesting. I made a simple color selector using a vertical button bar styled without a border and with icons only, and rounded the corners of each segment. Each button sets the field “Color” to its corresponding color, and each button is conditioned to change the fill and icon color when the field is set to that color. 

Standard-option checkbox in WebDirect
Revamped checkbox in WebDirect

FileMaker and Emojis

Did you know that FileMaker supports emojis? If you’re on MacOS, you can use emojis throughout your solution, even in calculations. Click on the Symbols and Keyboards menu from the top left and select “Show Emojis and Symbols.” Once you’ve completed this step, you can insert emojis just like text. 

Image showing how to turn on emojis

From here, instead of your button bar using icons only, set it to text only, and insert emojis as you would text. Now you can create all kinds of fun buttons. 

Checkbox using emojis
Checkbox alternative showing emojis

If you’ve had great success in formatting radio buttons and checkboxes in WebDirect, we’d love to hear your tips and tricks for creating a sophisticated, fun and intuitive user interface.