Even Cooler InLine Labels
By Daniel Wood, 15 December 2010
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.
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.
Something to say? Post a comment...
Comments
Alexander Hendorf 06/02/2013 3:26am (12 years ago)
Hi Dale,
thanks for this post. This was the last piece of the puzzle I was missing. Also increasing the font is genius ;), it always just made it as small as possible, often leaving an ugly pixel.
Dale Long 24/01/2013 7:30pm (12 years ago)
Thanks for the technique Mike. I find this still doesn't work on date fields, if you start typing the set selection starts trying to interpret the information as a date, and will just spit a question mark at you.
What I did in my solution to make this work with a date was to make an additional field called date_text, which is a text field. Then the actual date field becomes an auto-enter calculation, GetAsDate ( date_text ). Once there's a meaningful date in the text field, the auto-enter will grab it and auto-enter it. I use the date_text field on the data entry layout instead, which will allow you to type freely.
This is mostly so that I have the date stored as an actual date so I can use date search operators on a utility layout if needed. Perhaps you could attach another find mode script trigger and emulate the date functions on a text field that way, but I wasn't ambitious enough to pursue that at this juncture.
This seems like a ton of work just to get one stinking inline label on a date field. Hopefully FM gets with the times on the next release cycle and allows native inline labels. Being an Apple subsidiary, and Apple being the king of inline labels, one would think this would be a logical evolutionary step. We'll see I suppose.
Mike Richards 24/01/2013 6:14am (12 years ago)
Dale,
If you save the selection information before setting the field to itself, you can restore the cursor and selection after. This works for me with a drop down list.
<pre>
Set Variable [$start; Value: Get ( ActiveSelectionStart )]
Set Variable [$size; Value: Get ( ActiveSelectionSize )]
Set Field [Get ( ActiveFieldContents )]
If [ $size = 0 ]
Set Selection [Start Position: $start]
Else
Set Selection [Start Position: $start; End Position: $start + $size]
End If
</pre>
Dale Long 13/01/2013 10:20am (12 years ago)
Sorry to spam this thread, but I have to make a correction to my last 'fix'. I only tested it quickly and overlooked a limitation. Turns out that trick will work on a text field with a calendar drop down, but will not work on a date field with a calendar dropdown. So close yet so far way...
Dale Long 13/01/2013 8:44am (12 years ago)
I found a solution to the issue I just mentioned with drop-down lists or calendars. I thought if I could adjust the cursor location on each keystroke I could bypass whatever was causing the problem. I added this line to the script:
Set Selection [Start Position: Length ( Get ( ActiveFieldContents ) ) + 1 ]
This appears to work on normal edit boxes and typing into drop-down boxes or calendars. I don't know how efficient it is, but I can say that it seems to have no impact on my 65wpm over WAN, so it must be pretty okay!
Dale Long 12/01/2013 5:53pm (12 years ago)
I've come across some peculiar behaviors with this trick. It seems to work fine if the control style is set as Edit Box. However, If you format the field as a drop-down list, it will work if you choose from the list, but if you try manually typing a new entry you retain only the last keystroke you typed. Even more bizarre, if you select a dropdown item and try to modify it, you can add one character, but if you add a second character it wipes the entry and leaves you with your last keystroke. Weird! Dropdown calendars are also problematic. Anyone have ideas about what sorcery is behind this, or any possible workaround?
Daniel Wood 01/01/2013 10:45am (12 years ago)
Hi Catherine, thanks for brining this time one to my attention. The reason this is happening is that the script trigger is firing after key key press and the script is setting the field to itself. In a time field if you type for example a 2, then FM recognizes 2 a valid time of 2:00:00 and formats accordingly. Because the technique requires this set field to itself action, and it is this action that is updating the time field, I'm a bit stumped as to how it could be resolved nicely.
The only potential workaround I've found is to use a data entry text field to enter the time and use this as the field shown on screen. Your time field is not entered on screen, but you set it up with an auto-enter calculation so that it sets itself to the contents of your text data entry field. This lets you enter the time into the text field (though you will have to enter it as a correct time format) and the value will be entered into the time field via the auto-enter.
I'll keep trying for a better solution and keep you posted.
Catherine Dentino 29/12/2012 7:56pm (12 years ago)
Thanks for this, it's a great tip. One thing I noticed is that it doesn't seem to work right for time fields; with the set field to self trigger I was prevented from deleting in a time field, or entering two digit times (i.e. 12:00). If anyone has a work around idea, or if I'm missing something I'd love to hear it. Also I've noticed that the 500pt conditional font size trick doesn't work for all fonts, so I just included setting the font to verdana in my conditional formatting, in addition to the 500 pts. Daniel thanks for your consistently great posts, and enjoy your bike trip!
Matt Petrowsky 20/12/2012 2:12pm (12 years ago)
Much success with your ride Daniel. I always like the stuff you post!
Daniel Wood 18/12/2012 9:43am (12 years ago)
Cheers Damon and thanks again for the donation! Thanks Hunny O, I'll be back writing next year :)
Hunny O 17/12/2012 10:34pm (12 years ago)
Been waitin for atleast 1 article. I used to check this website daily.
This tip is very useful,thank you.
Anyways, all the best for your Trip of a Lifetime!
Thanking you again!
Damon Casey 16/12/2012 2:04am (12 years ago)
Thanks for another top article, Daniel. All the best and have a great trip!
Daniel Wood 15/12/2012 10:36am (12 years ago)
Thank you for the comments everyone, very much appreciated :) Micah cheers for that modification - I was thinking about how it could be optimized like that and you've given the perfect solution there, that will speed it up quite a bit, thanks!
Lee Lukehart 15/12/2012 9:08am (12 years ago)
Thanks for your many useful FM contributions, Daniel, and have a <b>fabulous</b> adventure! And please be safe (whatever that means for the environs you'll be traversing)!
Micah Woods 15/12/2012 8:35am (12 years ago)
Very nice Daniel.
One minor thing I noticed is that the field is continuously being spell checked and thus I get the red dotted line with every keystroke. Could be considered a "feature" but I'm not sure I'd buy that since it's not standard behavior for spell checking.
A quick fix is to wrap the set field in an if with this calc:
Length ( Get ( ActiveFieldContents ) ) < 2
This limits the field contents to being set only when the first character is typed or the last character is deleted, which I think is the only time when you actually need the conditional formatting to get triggered.
I look forward to following your trip!
Regards,
Micah
Joel Bowers 14/12/2012 6:42pm (12 years ago)
Have an awesome 6 month ride. Stay well. Don't drink (or brush teeth) with their water.
Josh Ormond 14/12/2012 4:35pm (12 years ago)
I may never have learned what I know about FM if it hadn't been for DW. So I'm glad to give back in small ways. lol
Phil Taylor 14/12/2012 4:33pm (12 years ago)
Fixed the Weetbicks Gone Wild link... thanks Josh.
Josh Ormond 14/12/2012 4:27pm (12 years ago)
Thanks for the article DW!! Always a great read. Be safe, see you when you get back.
FYI...the link to the WGW site is not working. Seems to have an extra "/home.php" on the end.
No one has commented on this page yet.
RSS feed for comments on this page | RSS feed for all comments