FMLayoutMode.com

All right now, kids. Last time, we added some related data on those empty tabs, and used it to create more intuitive navigation. So what’s next?

Let’s spit-polish this thang with some finishing touches.

For easy reference, let’s remember what our layout looks like at the moment:

That’s a damn fine-looking layout, but how about those buttons? I know, we’ve been poking and prodding and moving them all over. Now let’s do some final massaging before giving them their final resting place.

The first button (“Go to client list”) is a navigational button. It takes you to a list view layout that will show all the clients who are in your current found set. So in other places on this layout, what have we done with navigational buttons?

You in the back row, speak up. That’s right! We have changed them to look like hyperlinks. Let’s do that now. Type “Go to client list” on the layout. Turn it blue and format it as underlined. Now in your button setup, you have that “hyperlink” run the script that takes you to the client list.

Once this is done, delete that original button.

Now for the Print and Find buttons. They’re kind of big and clunky. Let’s make them more manageable. Let’s delete that icon from the Print button. Now select each button separately and make them each 65 pixels wide by 16 pixels high.

Next we will turn them the same colour as the header: When I pick a colour, I really buy into it.

Also, double-click on each button and change it to a “rounded button”. When you have a huge pile of buttons on a layout, it’s nice to do them as squared buttons, and nudge them all together to give them almost a palette appearance. Since we now have our layout down to two buttons (well, two buttons that actually look like buttons), the rounded buttons — a single pixel apart — help to soften up our layout a little.

If we go back into Browse Mode, this is what we now have:

Definitely less obtrusive, but still hanging out there on their own. Let’s welcome them into the layout with the rest of the objects, shall we? Back into Layout Mode, please.

We need to make room. Although there is a lot of space on the Address tab, don’t you dare! If we had a button that only related to the address (a button that looks up the address on Google Maps, perhaps?), then we should put it on the Address tab panel.

But, we might want to click these buttons when we are viewing any of these tabs. If we only have the buttons on one tab, then we have just doubled the number of clicks our user needs to perform to click the button.

I know, it’s just one extra click, but you need to think like a user. Your user will notice that extra click, and it will slowly drive him into a blind rage. Do you want the ensuing violence on your conscience?

We’ll make some space. Select everything on the layout, except for the title that we have in the header. The bottom of the header is at pixel 72, so let’s move the top of the other objects to pixel 92 — giving a twenty pixel margin between the bottom of the header and the data.

A dialog will ask if you want to increase the body size to accommodate this move. Frankie says Yes (god, how I hated the 80’s!).

Now you want your “Go to client list” link to go in the top right corner. 5 pixels from the top, and ten pixels from the rightmost point of the tab panel. Since the tab panel has a right edge at pixel number 572, you want your link to have a right edge at 562.

Now the Print and Find buttons. Let’s put them up above the Status field — ten pixels below the bottom of the header — and flush with the right edge of that field, which will also give them a right edge at pixel 562.

Are you noticing a pattern? Why 5 and 10 pixels so often? I started doing that because it was easier to calculate in my head, but now I’ve just gotten used to that much space between objects, and really like it.

We just need to tackle one last thing today. That header has been bugging me since the start: It’s just too tall. Let’s grab the handle from the body part and drag it up until it touches the bottom of our title text.

Et voila! When we go back into Browse Mode, here is what our layout looks like:

That’s a little neater and trimmer now, isn’t it?

Tune in next time to talk about auto-resizing. It’ll be cool.

Notes

1. What is the fastest way to select everything on the layout, except for one or two items? First, do a Command-A (Control-A on Windows). That selects all the objects on the layout. Now, while holding down your shift key, click on the items that you don’t want selected. This is how FileMaker lets you deselect objects from a group.
2. I changed the Find button from all capitals to title case. That’s something I should have done a few lessons ago for Textual Healing.
3. In Part 2 of this series, I believe I mentioned my dislike and distrust of icons on buttons: If you don’t have accompanying text, the icon is probably vague; if you do have accompanying text, you may not need the icon. So I kicked that printer icon to the curb!
4. Why did I hate the 80’s so much? Synthesizers, saxophones, keytars, and Flock of Seagulls hairdos. There’s just no excuse for any of it.

Paul Spafford
FMLayoutMode.com
Spafford Data Solutions