Even Cooler InLine Labels

Introduction

One of the cool things that conditional formatting has allowed us to do ever since its introduction in FileMaker 9 is to build inline field labels that become hidden when the field contains text. With the introduction of field state formatting in FileMaker 12, we can take these inline labels even further and make them even more awesome.

The Conventional Label

Below is an example of a typical setup of an inline label.

Here the label is 'Category'. The label is simply placed underneath a transparent field, and conditional formatting is applied to the field itself:

The conditional formatting is very simple, and tells the field to fill itself with a solid colour if its contents is not empty.

This method works great and can be very useful particular for data entry fields. One issue it has however is that as soon as the user clicks into the field, the label disappears. This is because the field has its own in-focus fill set which could not be modified prior to FileMaker 12.

Keeping the Label Visible

So how can we keep the label visible even if the user clicks in the field? The solution lies in a couple of technologies being used together to achieve the desired result.

First of all, we are going to keep the same field and and same label in the same spot, but we will remove the conditional formatting on the field, this will not be required. We will also keep the field with a transparent fill for its normal fill colour.

Next, we are going to change the fill colour for when the field is in its 'in focus' state. When in this state, it basically means the mouse cursor is clicked in the field. For us, we essentially want the field to have no fill at all, thus revealing the inline label.

Now, there are a couple of oddities here around selecting the fill colour. First, this technique won't work if you select "no fill" as the fill, nor will it work if you select a fill with 0% opacity (in other words transparent). I'm not sure why, but as soon as you select either of these as the fields in focus fill colour, it will treat the field as having a solid fill when clicked in. What I mean here is that the underlying/overlaying label will be hidden.

The workaround for this is to set the fill colour to a 1% opacity, so not quite transparent, but pretty damn close!

Now, when you click into the field you should see something like the below:

This is the type of effect we are trying to achieve - having the label remain visible even if the cursor is placed in the field. The in-focus formatting is applied, which is a 1% opacity fill, thus revealing contents behind or in front of the field.

Now, what happens if we type?

Well, the result is not very pretty!

As we type, there is no conditional formatting happening to make the label disappear. Also, we are unable to apply conditional formatting to a field state, so we cannot tell the field to fill itself if it is not empty while in the in focus state.

So how do we make the label disappear upon typing? The answer here is to use a combination of conditional formatting on the label and a very simple 1 line script that will trigger the conditional formatting with minimal interruption to the user.

First comes the conditional formatting. This is applied to the label directly. The formula will apply conditional formatting when the associated field is not empty.

The formatting itself is a change in the labels font size, we will increase its font size to 500pt, this should be sufficiently large enough that the font will not render within the bounds of the text label object, basically hiding it.

So, if the field is not empty, the label disappears. In order to make this happen we run an onObjectModify triggered script on the field

The script simply does a Set field step and sets whatever the active field is to its own contents. This simple action is enough to trigger conditional formatting on the layout without the need for a refresh window step (which is slower).

So in Summary...

• Set field to 1% opacity in focus fill
• Set label to font size 500pt if field not empty
• Set onObjectModify script trigger on field to conditionally format

Example File

Please find attached an example file. This file is provided to help you fully understand what is going on in this article, and to let you experiment with your own labels.

Download Example File

And Finally...

This will be my last article for the next 6 months. In January I am starting a cycling journey in Africa from Cairo Egypt all the way south to Cape Town South Africa. Suffice to say, internet connection will be sketchy and I won't have a copy of FileMaker with me :)

Thanks to all the readers of this site for your support this year. I apologise for not having written more than I did the previous year, but this trip has really taken over my life and occupied my every waking minute, but I didn't want to leave you without one final article for the year so I hope you enjoy it.

Please also remember that I am fundraising for the Heart Foundation as part of my adventure next year. These guys do amazing work in NZ and Australia for all ages and I would love it if you were able to make a small contribution toward the cause if you can.

You can make a donation via the website I have created for the trip by clicking the logo below. Thank you again.

Cheers,
Daniel