Text-based conditional checkmark

On a layout, a client wanted a checkmark to indicate when a required field is filled in. Trying to come up with the leanest solution possible, I knew I had the following options:

  1. Have a calculation field that fills in a FileMaker checkbox when the condition is true.
  2. Have a calculation field that grabs an icon from a one-record table (or global field) when the condition is true.
  3. The invisible portal trick.
  4. An invisible tab that holds the check mark graphic, and script triggers that make sure the tab is only visible when it is supposed to be.

Numbers 1 and 2 require that I add more fields to my tables — and possibly new relationships to the files as well.

Number 3 requires a new relationship.

Number 4 requires extra scripting that I would have to plan from every angle, to make sure that the checkmark is only showing when it is supposed to.

While none of that is really bad, it’s just more work than should be required for something so simple. We need a number 5, my friends.

Let’s talk about conditional formatting.

Conditional formatting is a feature introduced back in FileMaker 9, that allows you to change the formatting of a text-based layout object, depending on a calculation of your choice.

Okay, now let’s talk about  text-based layout objects. What does that mean? FileMaker 11 Help can probably say it better than I can:

You can set conditional formatting on the following layout objects: text, fields (including fields from external ODBC data sources), merge fields, layout symbols (date, time, page number, record number, and so on), text-based buttons, and web viewers. Conditional formatting is not available for non-textual objects (such as a rectangular layout object).

Easy enough … so if it’s a layout object that you can natively add text to, it can be conditionally formatted. Moving right along, Fozzie. (No Muppet Movie fans in the crowd?)

All right then, let’s use one of these things to build a checkmark. The easiest to use is, of course, text. There are fonts that you can find with actual checkmarks in them.

However, then you have to make sure every one of your users actually has that font installed.

So let’s make a checkmark. I have a layout here, that has a white background, and some fields and field labels (both in Verdana 10pt).

On the layout, type a capital V. We’ll make it 11pt, bold and italicized. Let’s also turn it green. You can do all that stuff in the Text area of the Appearance tab of the Inspector.

So here’s what we have so far:

I also like to go up to the Format menu and select Style > Extend. We’re making this V as wide as possible, to make it a little less V-like, and a little more checkmark-like.

Now, with the V selected in Layout Mode, let’s zoom in to 400%, by clicking the little zoom “mountain range” at the bottom of the screen

Now that this is nice and large, we can see what we’re doing a little better. Let’s draw a pink square that is 6 pixels by 6 pixels in size, and move it over the top left half of the V.

Now turn the square white.

And what have we here, young Jedi? Looks like a checkmark to me.

Now while we still know where that white box is, let’s select it and the V together. Group them by clicking the Group button on the Position tab of your Inspector. That makes sure that when you move your V, the box goes with it — ensuring that it always looks like a checkmark.

Okay, we can go back to a regular zoom now. When we’re not looking at it all zoomed in, it looks even more like a checkmark, in my opinion. We’ve done all that to just get our checkmark. The conditional thing is the easiest part.

Let’s say we want a checkmark to show beside the email field whenever there is a value in it — because it is a required field. Move your new checkmark close to the right edge of the email field. Now select the checkmark. Go up to your Format menu and select Conditional.

When you click the Add button, a condition will be created. Since we are not operating on a field, “Formula is” is automatically selected in the Condition area.

Enter this formula:

IsEmpty ( Client::email )

In the Format area, select a Text Color of white. Now click OK.

That’s all. Go back into Browse Mode and give it a try.

When the field is empty:

When there is something in the field:

Notice the checkmark. All we’ve done is add a little overhead to this layout: No new fields or relationships.

Notes:

  1. Do the first four options that we discarded at the beginning sound familiar? Have no fear if they don’t; we’ll talk about them in a future post.
  2. I chose Verdana for the checkmark’s font because it is wider than a lot of other fonts. Since V is a tall letter, and we made it as wide as possible, we are trying to distort it’s V-ness.
  3. If we were wanting this same effect done on the same field across many layouts, a calc field would be the most economical option. Since that is unlikely in this case, I like this option.
  4. As I said, if we had used a font that has a checkmark as one of its characters, we have to make sure all users have the font installed. If they don’t, you can’t be sure of what font — and what character — will be substituted. One time a friend sent me a proposal to proofread. She had used an odd character for her bullets, which wasn’t on my computer. As a result, every one of those bullets looked like a dollar sign. So before each bullet item on her proposal, I read a little “cha-ching”. Probably not what you want your clients to read into your proposals!

Paul Spafford
FMLayoutMode.com
Spafford Data Solutions

Leave a comment

6 Comments.

  1. If you use the unicode check mark (glyph 2713: ?) it won’t matter what fonts are installed – any modern OS should have at least one font installed with that glyph in its set: Arial Unicode MS on Windows and Lucida Grande on OS X. If you specify a font that isn’t installed on the target system, it should be rendered using a font that contains the checkmark glyph. (at least it does on my Mac when I manually remove the Arial font–the system replaces it with Lucida)

  2. See now … I’m learning.

    Thanks, David!

  3. Nice trick, Paul.

    I mostly use icons for this, because I’m normally using them elsewhere.

    I know you don’t like icons, but I sometimes use just a tiny 20px square webviewer with all options switched off (interaction etc) and use this calc to switch a html checkbox on/off with a styled background:


    If( IsEmpty( Table::Field ) ; "" ;

    "data:text/html,

    *{margin:0; padding:0; }
    body { background: rgb( 0, 255, 0); border:none; }

    "

    )//end if

    The calc doesn’t check the checkbox, it’s already checked, the calc shows either the whole thing or nothing at all, and you can style it however you want without conditional formats.

    It’s not always a first choice method, but it’s a “useful to know” option.

    (p.s. might need some minor adjustment for mac :) )

  4. Huh! I guess you’ve got code tags switched off.. sorry Paul.

    mmm.. I’ll email you and you can post it if you want to, I don’t wanna screw your comments up anymore.

    Darren.

  5. Okay, Darren was trying to show a really cool technique for doing the same type of thing by using a Web viewer — instead of conditional formatting.

    You can check a video of his technique here:
    http://screenr.com/KwX

Leave a Reply


[ Ctrl + Enter ]

Trackbacks and Pingbacks: