One of the most exciting new features in FileMaker 9 is *Conditional Formatting*. I think this is awesome because now you can apply dynamic custom styles to layout elements without adding dozens of crufty unstored calcs to your table. When I first started playing with conditional formatting, though, I felt a little let down by one thing: There’s apparently no way to make something *disappear* using conditional formatting. I often have the need to show something to my user — an informational message, indicator icon, or even a button — only under certain conditions. It turns out that with some creative thinking, **you can show and hide layout elements with conditional formatting**. (Some restrictions apply.)
This is actually two techniques in one. The solution is simple if you’re only trying to hide some text. If you have a graphic, button, or collection of objects to hide, on the other hand, you’ll use a different method.
## Making Text Disappear
To make some text disappear — an informational label by a field, or a warning message that doesn’t apply, for example — simply change the *text color* to match the *background color*. For example, suppose you have a database that looks like this:
![FileMaker Pro layout with some fields labeled “[required]â€](http://sixfriedrice.com/wp/wp-content/uploads/2007/06/required_fields1.png)
You want the little “[required]” label next to a field to disappear when your user enters something in the field. This is a breeze:
1. **Select the text label and choose Format -> Conditional.**
The *Conditional Formatting for selected objects* dialog box appears.
2. **Click *Add*.**
FileMaker adds a new line to the Condition list. In other words, you’re establishing a condition under which you want special formatting applied to this object.
3. **Click *Specify* and enter this calculation: `not IsEmpty(Customers::First Name)` in the Specify Calculation window.**
In this case, you want to format the label when the First Name field is *not empty*. When the formula you entered evaluates to a `true` value, the formatting will be applied.
4. **Click *OK* to close the Specify Calculation dialog box.**
Now you need to tell FileMaker what kind of formatting to apply.
5. **Turn on the Text Color check box and pick an appropriate color from the rainbow-colored pop-up menu beside it.**
Choose a color that matches your background color exactly. In the picture above, the background is FileMaker’s lighest gray color, so I picked that color here.
When you’re finished with these steps, click OK in the Conditional Formatting window and switch to Browse mode. Now as you enter information in the fields on the layout, the “[required]” reminders will disappear like magic:
![FileMaker Pro layout showing the “[required]†label is not visible once text is entered.](http://sixfriedrice.com/wp/wp-content/uploads/2007/06/required_fields_formatted.png)
>Note: You could also make the text invisible on the layout, then use conditional formatting to make the object appear (by applying a visible color) when you want it to show. This might make the condition formula a little more obvious because it is expressed positively instead of negatively. But having invisible items on the layout is a nuisance. If you find it easier to write a formula saying when the text *should* appear, do that. Then put `not` in front of it. It’s that easy.
## Making Other Things Disappear
The technique above has a pretty serious limitation: it only works with a single text object. If you’re dealing with a graphic (perhaps it is an icon that marks each unpaid invoice) or some other object, you’re not going to make it disappear by turning it white. In fact, if you select most kinds of layout objects, the Format -> Conditional menu command dims: FileMaker can only apply conditional formatting to text objects, fields, buttons, and web viewers.
To work around this limitation, you have to get a little creative: Use an empty text object:
1. **Using the Text tool in Layout mode, create a new text object (by clicking somewhere on the layout) and type a single space. Then click outside it so it’s no longer expecting input.**
You now have a (mostly) empty text object that you can resize and position as you see fit. (You need the space because FileMaker will automatically delete the text object if you make it completely empty.)
2. **Position this text object over the element or elements you want to hide.**
You may need to resize it so it covers the item completely. Also, make sure it is *in front of* the item it is hiding (use Arrange -> Bring to Front if necessary).
3. **Choose Format -> Conditional and apply conditional formatting just like you did in the previous example.**
This time, though, turn on the Fill Color check box instead of Text Color. You should still choose a color that matches the background.
When you’re finished, switch to Browse mode and give it a try. When your formatting condition is met, everything under the text object will disappear.
## Dealing with Buttons
The first gotcha with this technique is that although you hide an item from view, you don’t hide it from the mouse. If the thing you’re covering up is a button, it will still be clickable even when hidden. Luckily, this is easy to fix: Just modify the button’s script so it does nothing when the button is hidden. Add a snippet of code like this to the top of your script:
If [ IsEmpty(Customer::Email Address) ]
Exit Script
End If
The formula in the `If` step should match the one you used in the Conditional Formatting dialog box exactly. Now, although the button is clickable, it won’t do anything. And since you can’t see it, you won’t be inclined to click it anyway. Problem solved.
## Other Limitations
Buttons aren’t the only layout objects that present a challenge. Fields can also be entered even when hidden. In fact, fields are even worse: You can tab into them without clicking at all. They show dotted field frame outlines when you click in a blank spot on the layout. And they sometimes show their information right over the top of your carefully placed coverup. In general, this technique is not suitable for hiding fields. Same goes for Tab controls and Web Viewers.
Finally, sometimes the color behind the thing you’re trying to hide is not consistent. The most typical example is a portal with alternating background colors. In a case like this, there’s no *straight forward* way to decide what color the empty text object should take on when it comes time to hide.
These limitations aside, this technique provides a simple way to add more dynamic behavior to your user interfaces without complicating the underlying data model. That’s almost always a win in my book.
You can also use the new ability to specify fixed width tabs to set your tab widths to zero, and then build n versions of your layout in n tabs. By using the go to object script step, you can create the illusion of objects (dis)appearing.
@jesse: Wow. Thanks for the tip. I never thought to try. If it works as advertised (and this is Jesse Barnum of TechNet fame folks…I’m sure he’s right 🙂 ) then this will be an awesome technique. I feel another article coming on.
Geoff
Wow, Jesse,
It’s coool! Thank you for your TIps.
@Shin: All this talk about Jesse doing right and I got excited for a second…… That sounds pretty awesome. I definitely think that’s worth investigating.
Jesse’s tip is great, but I can still change the tabs even if set to 0 pixels. (unless I missed something) By placing another tab panel however overlying the tabs only (however wide they are set) the user cannot accidentally change the underlying tabs. Then the go to object script step locks the user on that tab.
There was a small inaccuracy in this article. It said conditional formatting can only be applied to fields, text objects, and buttons. I added web viewers to that list.
I tried this today, and I could never get rid of the tabs completely. There was always a one or two pixel tab left.
I minimize the tab even more by setting the font size to 1 pt (the smallest allowed) but there is still a small hot spot on the screen. I tried using another tab panel to block the hot spot, it only works if you use the new tab itself to block the hotspot.
This test also taught me that I can create a tab with the space bar only or by eraseing the name after you create the tab.
@jeremy, @jack: I’m hoping to spend some time playing with it next week. If I make any progress I’ll post an article. Thanks for the insight.
Jeremy, Jack, et al: If you set the Tab Control line width to zero, I believe you’ll find those small hot spots disappear altogether. Cheers.
You need to set the border around the tabs to 0 and I think make sure they arent Justified full
Excellent comments and content. Also, as far as the alternating background color for a portal, you can still apply a conditional format to hide things, based on a nifty formula:
Mod ( Get ( RecordNumber ) ; 2 ) = X
where X is either 0 for even numbered records, or 1 for odd numbered records.
Then, you can account for the alternating rows by creating one condition where X=1 (handles odd rows) and another condition where X=0 (handles even rows).
For example, a portal could list all of the invoices for a customer. You could place a Text Box in the portal that is set up to display “Unpaid” in red (or whatever). Then, for each condition, you simply add a boolean expression to check if the invoice is paid or not, connected with an “and”:
Condition 1:
Invoices::Paid = “Yes” and Mod ( Get ( RecordNumber ) ; 2 ) = 1
Condition 2:
Invoices::Paid = “Yes” and Mod ( Get ( RecordNumber ) ; 2 ) = 0
Conditional formatting can also be put to good use on portals. Take for example, the last row in a portal – it leads a half-life between being a record and being a blank row. If your portal rows have text items in them (eg a field name) then the last row, despite being blank, will hold these text items. It can be a helpful facility in that it enables you to see where to type into the last row when creating a new portal record, but other than that, I find that it can be an eyesore.
You can remove these items with some judicious use of Conditional Formatting, for example you could have a conditional format statement that applies text and fill colours matching the portal background based upon the presence of a portal row record not having a value for a record ID field. A problem arises when your portal has alternating row colours. To get around this, you need to create a new field in the portal table that is an unstored calc field with Get ( RecordCount ). Then create a Conditional Formatting rule for the portal contents as follows:
PortalTable::RecordID = “” and Mod ( PortalTable::RecordGetFoundCount ; 2 ) = 0
The Text and Fill colours for this rule should match the primary portal row. You will now need to create a second rule that matches the first but instead of the condition being equal to 0 it will need to be NOT EQUAL to 0.
What we’re doing here is using the MOD statement to work out whether the total number of records in the portal is an ODD or EVEN value and applying format rules accordingly.
Of course, you will also need to provide a method of allowing users to find where to click into a portal row to create a new portal record….
It’s possible to make text invisible with conditional formatting REGARDLESS OF THE BACKGROUND COLOR: in the CF dialog, click the “More Formatting…” button, and set the Font size to some large number like 144. That’s it!
When your formula evaluates true, the text will grow, but it’s containing text block will not, so the text will be pushed outside the visible area.
I picked this one up from Mr. Seedcode, John Sindelar.
That’s very neat Tom and certainly neater than my way.
Jeremy, Jack, Andrew… Make sure your effects are set to “none” otherwise the effect will show an effect around the tab!
@Jeffrey –
Using Get ( Record Number ) will work with alternating background fills for body objects; however, not for alternating portal rows.
To portal rows, you want to define an unstored calc in the child table, resolving to Get ( Record Number ), which you then refer to in your conditional formatting calc. So…
In the child table:
recordNum__cn = Get ( Record Number )
Conditional formatting on portal object, two conditions:
Mod ( Get ( ChildTable::recordNum ) ; 2 ) = 1
Mod ( Get ( ChildTable::recordNum ) ; 2 ) = 0
Nice post Geoff.
I’m just getting my feet wet with FM. Coming from a mostly HTML/CSS background, this is a bit foreign to me. I’m digging in and trying to learn how to do layouts with FM effectively and intuitively.
Just wanted to affirm that this tab width zero thing is way cool! It’s solved several problems for me. The big advantage is that not only does the object/field disappear, but you can’t enter the field by clicking into it by accident. While in a given tab the “hidden” fields are not accessible at all. I repeat — way cool!
Thx.