VIEW MORE SCREENCASTS   |   MISSINGMANUALS.COM HOME PAGE
 
PLAY SCREENCAST

FileMaker Pro 9: Building a Layout, Part I - Parts and Objects - 9 minutes, 53 seconds

File Downloads

TRANSCRIPT

Hi, I'm Geoff Coffey, co-author of FileMaker Pro 9: The Missing Manual; and this is the first in a three-part series of O'Reilly Screen Casts on using Layout Mode in FileMaker Pro.

In this first part, we're going to focus on parts and objects. More specifically, we're going to talk about editing layout parts like the header, the body, and the footer; formatting text objects; and inserting images on our layout.

Okay, let's get started. This is what a database looks like when FileMaker first creates it. We've defined some fields, which you can see right here; and FileMaker has created this layout for us. As you can see, it's not a very exciting layout. It's pretty plain and boring; and what we're gonna do now is we're gonna make it look a lot nicer and work a lot better.

Now, the first thing I'm gonna do is actually use the Zoom tool down here to zoom the window in to 150 percent, just so you can see things a little better on the screen cast.

Now, in order to modify this layout, we have to be in Layout Mode. So our next task is to switch to Layout Mode. We go to the View menu and slide down to Layout Mode.

As soon as we do, you can see that our entire screen has changed quite a bit. Our Status area has a lot more tools in it than it used to have, a lot more options available. We now see these dotted line separators between each of our layout parts, and our fields now have borders and baselines.

We can also see this dotted line over here on the right side which shows our page boundary. If we were to print, that's where the edge of the page would be.

Otherwise, though, our layout looks the way it did in Browse Mode. We can see the field labels and the individual fields.

Now, if you've read the book, then you know that a layout is divided into multiple parts. In this case, we have three parts: a header part up here, then a body part, and then a footer. The layout also consists of objects. In this case, we have field labels – these little text objects here; and we have field objects; although there are other kinds of objects you can add to a layout, as well.

So the first thing we're gonna focus on is the parts and the objects on this layout to get a basic structure that we want. And what we wanna do initially, is we want make the header a little bit bigger. We wanna give it some color. We wanna put maybe a graphic on it just to look nice. We wanna add a label of some sort, so that our users know what this database is for, so we're gonna start off by doing that.

To make a part bigger, it's very, very easy. We just drag the part label straight down and let go. Now, you don't have to be really precise here. We can always fill this part with the things we wanna put in it and then make it smaller later on. So just make it big enough that you have plenty of space to work in.

Now, we also said we wanna put some color on this part. Coloring a part works like coloring any other thing on a layout. We select the thing first, so I'll click the label. You have to click the actual label. Clicking in the part's not enough. Click the label; and you'll see that it darkens; and now I can use the Fill tool right down here. You can tell it's the Fill tool, because it has this paint bucket icon, like it's gonna pour some paint right into our layout part. And I'll click here and pick a color. I'll pick a yellow color.

Now my layout header part is filled with yellow. I said I wanted to put a label on here so that people know what this database is for. This database is for tracking information about the people that I know, so I'm going to the Text tool to add a text object to the layout to serve as a label.

A text object is like a piece of unchanging text – description, help information, labels, things like that. This is the Text tool here. It's got a big letter A on it. I'll click the tool; and then when I come out to my layout, my cursor, my mouse cursor, has changed to this I-beam, which means that when I click, FileMaker creates a text object for me. And you can see my flashing cursor. I'm ready to start typing.

I'll type a message; and when I'm finished typing, I click outside of that object; and FileMaker knows that I'm done editing; and now the object is selected. You can see the little handles on the corners.

Now I wanna modify this object. I wanna make it – I wanna change the font. I wanna make it a little bigger, and I wanna make it bold. I can do all of that from the Format menu.

With the object still selected, I go to Format, then Font, and pick the font that I want. I can then go to Format and Size, and I'll choose 18 point. And, finally, Format, Style, and I'll choose Bold. Now the object is formatted the way I want, and I'll drag it to about the right position, which is right there.

I wanna make a second text object that tells ‘em that this is not just the People database, but I'm looking at details about a person; because, of course, I might add other layouts to my database later for things like lists of people, envelopes, reports, and labels. So this is the Details Layout, so I'll add another piece of text explaining that.

I'll use my Text tool again, click, and give it a value. Click out of it when I'm done. And now this one is too big, so I'm gonna make it smaller. I'm gonna choose 11 point, which isn't in my menu; so I'll choose Custom, and then type 11 and push Okay. I also don't want this one to be bold, so I'll go to the Style menu, and I'll turn off bold. And then I'll drag this to where I think I roughly want it.

Again, you don't have to be precise. It's easy to make changes later.

I also wanna put a graphic over here just to make things look nice; and that's easy, too. I'll go to the Insert menu and choose Picture; and I have this person.png graphic on my desktop that I'll use. Now, you can use a PNG graphic or a TIFF or a JPEG or a GIF. It's very flexible with the graphic formats.

I push Open, and the graphic appears on my layout right here. Now I'll just drag it into the spot that I want it to live in; and with that in place, I can align my text objects a little better; and, finally, I can make my header a little bit smaller, so it holds the objects very neatly. And now I've created a nice-looking header for my database.

The next thing that I wanna look at is the text labels on my fields. These text labels don't have the right font, and so I wanna fix that first. Now I could select each object one by one and use the menus to change the fonts like we did before, but that would be time consuming. What I really wanna do is select each of these objects in turn, and then change them all at once, which you can do by holding down the shift key and clicking them one after the other.

Or an even faster way is to rubber band them. I'll click outside of the objects over here, down and to the right, and then drag; and as I drag, FileMaker draws a rectangle; and when I let go, it selects all of the objects that are completely surrounded by that rectangle. Now I have all my field labels selected; and I can say Format, Font, and I'll use Verdana.

Now that I think of it, I want my field objects themselves to be that font, as well; so I'll select them and do the same thing. Now I have the correct font for my objects.

The next thing that I wanna do is get rid of some of these extra-long field labels; because they show more information than I need to see; and I really wanna make my layout as efficient spacewise as possible so it doesn't take up too much space on the screen.

So, for instance, phone number is a long label; and I could just say phone instead. So I need to edit this label and remove some of the text. One way to do that is to use the Text tool again. I'll click the Text tool. I get my I-beam arrow again, and I'll just drag across the text I wanna change; and as you see, as soon as I did that, FileMaker selected that actual text.

This little dotted line shows me that I'm back inside that text object ready to make changes. I'll just press delete or backspace on my keyboard, and the word "Number" disappears. Now, my text is a lot smaller than the text object itself; so I can use the handle to make the text object smaller.

I'm gonna do the same thing with E-Mail. Now, this time I'm gonna use a shortcut, though. Instead of going all the way over here to get my Text tool, I can just double click the text object. When I do, FileMaker automatically switches me to the Text tool and takes me into that object for editing; and now I can remove the word Address, so it simply says E-Mail.

I'm gonna do the same thing with Street Address. Remove Street. I'm gonna change Goodness Rating to just Goodness. For Creation Timestamp, I'm gonna say just Created instead; and the same thing with Modification.

Now I still have to fix these objects, which are all a little bit larger than the data they contain; and it turns out there's an easier way to do that; although it's kind of a silly trick; but I'm gonna show you anyway; because it's super-useful.

You see that all of these objects are longer than the text inside them. If I change the format of those objects in any way – for instance, if I make them underlined – those objects shrink up to contain the text perfectly. Of course, now they're underlined, which I don't want; so I'm gonna go back to Format and change them to turn off the underlining; and they stay small like that.

So if you have an object that's too big for the text it contains and you wanna shrink it up, you can use the keyboard shortcut. On the Mac, it's Command Shift U. On the Windows machine, it's Control Shift U; and you just press it twice. So hold down Command and Shift and press U and then U again, and you see it fixes my objects.

Now I can move all of these objects over since their labels aren't so long. I'll select them all and drag them across. Oops, I see I missed my Goodness Rating. I'll fix it with my trick and then select them all and move them a little bit more.

And now I've done – I've dealt with my parts. I've added some visual enhancements to my layout. I've worked with text and basic formatting.

In the next screen cast, we're gonna look at how we handle our fields for different field styles and formats and visual attributes.