• Please enter your DISQUS subdomain in order to use the 'Disqus Comments (for Joomla)' plugin. If you don't have a DISQUS account, register for one here

Core FileMaker Blog

Keep up to date with CoreSolutions

Steve Hearn Steve Hearn

Three Cool Interface Tricks

Back in the “day”, portals used to have one fill colour. Since FileMaker Pro 6 we’ve been able to alternate the colour of the portal rows making them easier to read. On a recent project I utilized the alternating colours of a portal with conditional formatting of a text field to produce buttons that set a field with the appropriate values. This combined a radio button’s exclusivity with a checkbox’s ability to easily clear a value. In other words, I was able to set a field to one of 4 states by clicking on 1 of the 4 buttons but I could also clear a value by clicking it again. The solution was being deployed using Terminal Services so a traditional radio button or checkbox was out of the question (this is a known problem with TS where it doesn’t always detect a change on the layout and causes long delays updating the screen). To get around TS limitations I fill the field with a solid black to indicate a selection.

Application of alternating colours & radio boxes

Portal with alternating colours and "radio boxes"

For a number of reasons, the object that is clicked on is the field that stores the value. That means there’s text inside that field that could appear in the box. To get around that, I added a conditional formatting rule that looked at the record number of the related record and determined if it was even or odd and coloured the text appropriately to match the fill colour of the portal row.

Formula for conditional formatting that hides a field

Conditional formatting that hides a field's text

I originally tried these calculations using the portal row and Get ( RecordNumber ) but neither worked. I found I had to use an unstored calc in the child table that uses Get ( RecordNumber ). That’s the first trick: conditionally formatting based on the portal row an object appears in.

The next trick is one that I used to replaced the one above. It may have been at DevCon or a webinar somewhere that I learned you can simply set the font size of a text field to something huge so it doesn’t appear in the field. In the case above, I set the font size to 200 pt using a formula of “1″ so it’s always that size. You might wonder if it’s always going to show at that size, why not just define the field’s font to be that size by default? The reason is that changing the field’s font size to something that large will create problems if you have to resize it. I found that if I changed the field’s font size to 200 from 10, it worked fine until I needed to adjust the field’s width. Then it snapped to 245 px high and couldn’t be changed back to it’s original height. By changing the font size using conditional formatting, it avoids those resizing issues that are enforced in layout mode.

Better way to hide text using conditional formatting formulae

An even better way to hide text using conditional formatting

The third trick is eye candy. You’ve probably seen objects on web sites that look glossy like a button in the shape of a little glass bubble or window title that appears like it might be glass cylinder lying on its side? Here’s a trick that you can use that doesn’t mean spending any time in PhotoShop but will fool the eye into thinking you’ve got one of those glossy objects.

Glossy title bar example

Glossy title bar

The blue bar above is a simple construction of native FileMaker objects with some custom colours. There is a rounded rectangle with a light blue fill on the bottom, a square-cornered rectangle with a slightly darker blue above that but is only half the height of the bottom object. Then there is a text object with the title name in white text and transparent fill on the top. Below is a standard tab panel. Here’s an exploded view:

Exploded view with a grey background image

Exploded view with grey background

In case you’re interested, the RGB values of the light blue are R: 80, G: 126, B: 186. The dark blue is R: 0, G: 86, B: 161.

Let us know if find these tricks helpful by leaving a comment below.

Leave a comment


  • Barney Lawn
    Barney Lawn 18 November 2011 Report

    That's a nifty glossy title bar trick Steve.

    Comment Link

  • Brian Crockett
    Brian Crockett 17 November 2011 Report

    For you Mac guys, Try OmniGrafflePro. I use OGP to do most of my buttons. Unlike Photoshop's raster drawing OGP is vector based so you can go back and easily move lines around and change font sizes etc. OGP has an advanced gradient tool that works wonders for making glossy interface elements.

    Comment Link

  • Rosa
    Rosa 13 November 2011 Report

    Man up Spafford. Photoshop is your friend. Or should be.

    Comment Link

  • Paul Spafford
    Paul Spafford 27 October 2011 Report

    If PhotoShop were my friend, it wouldn't mistreat me so!

    Comment Link

  • David Zakary
    David Zakary 26 October 2011 Report

    Man up Spafford. Photoshop is your friend. Or should be. :)

    Good techniques to know Steve.

    Comment Link

  • Paul Spafford
    Paul Spafford 26 October 2011 Report

    That's a pretty slick way of creating that glossy title bar. I'm all over anything that can keep me out of PhotoShop!

    Comment Link