Use guides, arrange, align, group, and lock layout objects

- [Voiceover] When you're designing your layouts for your users, you want to make sure that you're not distracting them in any way. And that sometimes requires an obsessive level of attention to detail, but the good news is FileMaker has all sorts of tools to allow you to be able to do precision design when you're in layout mode. Now, layout objects are the building blocks of layouts. Everything you place on a layout, like a field, or a button, or a label, or a portal, any of these things are considered objects and all objects have particular attributes that you can manipulate. Now you must be in layout mode be able to do anything to a layout.

So why don't we start there first? And in layout mode you can do things like group any combination of objects together so that you can edit or move them, you can change the stack in order of objects and get different effects when objects overlap. All of these tools are going to be found in your Inspector. You'll notice that we have four different tabs on the Inspector. The very first one which is called the Position tab, is the one that we're going to be concentrating on in this movie. You'll notice in our exercise file that we've got a bunch of fields on a layout, and just kind of loosely put together, but there are some issues with the way things look.

Now some of you are probably staring right at it the whole time I was talking, but what we're going to do is use some of these tools to fix what we're seeing on screen here and make this look a lot cleaner. So if you don't see the Inspector, you could either go under the View menu to choose Inspector. You could use the quick key for command + i or control + i, or just hit this little i button right here next to the double a and to the right of your stencil. Go to the Position tab, which is the far left one, and we're going to focus on some of the items down here in the Arrange and Align section.

You can collapse some of these if you want to. Now the first thing I'm going to show you how to do is group items. Grouping tools can be found in the Inspector, right here under the Group section. There's really two buttons, group and ungroup. So in order to group items you must first select them. You can do so by holding down the shift key while you select and drag selecting multiple items. So for example down here, I've got this set of fields and I want to keep them grouped together. That way I can move them around as one, I can keep them all in relation to each other without moving one of them inadvertently.

And it's really simple to do that. You simply drag + select, and I did that by holding down the mouse as I drag. I can also select one on the top, hold down the shift key, and keep selecting until finally I have multiples of them selected. So should you want to group something together, and that could include your fields with the labels or maybe you've got like a box that you've drawn around them or something like that. You can group the entire thing together by simply selecting the items you want to group and hitting the group button. One thing you'll note now is that the group now acts as one object so you can see I can resize all of them at one time if I'd like to, and I can move them around if I want to just based on the fact that they're all grouped together.

Now if I want to ungroup something, I just hit this button here, Ungroup, and everything is back to individual items that can be moved around on screen. You'll find that grouping things together becomes a useful tool when you're in the design process and you've got something just perfect and you really don't want them to move in relation to each other. Now one of the things you might notice as you're moving things around on screen, are these little blue lines. If you're not seeing the blue lines, if you go under View, make sure that you've got Dynamic Guides checked.

This happens to be one of my favorite tools when I'm in layout mode in FileMaker. It allows me to eyeball the relation of different objects as I'm moving them around on screen with my mouse, and sometimes you can really get the precision of it perfectly without having to use some of the other tools. So make sure you've got Dynamic Guides on, that's going to be one of the things that helps you out the most. Now if you want a precise view of some of the invisible edges of objects on layouts, you can also use Guides that you see right here. So if you say Show Guides for example, you'll notice that we've got these kind of t-bars that show up here.

So, for example, I could line one of them up here so that I could visually move all of my objects right to the line, so this way I could visually use it to give me north and south and east and west tools to be able to line up against. Now you'll notice here that my guides are showing pink lines and this will only be in layout mode because if I go back to browse mode, you'll notice that the guides are only there in layout mode, which is only useful in layout mode. And as I move from layout to layout, you see that they're there. So, I could right click on these and say Share with all layouts, I could uncheck that.

So now you notice that it turned to a blue. So just the pink one is still available, or I could say Lock this Guide, meaning I don't want to inadvertently move it, this is going to be what I'm going to use to line everything up on screen. Or I could simply hit Remove Guide, that way I only have one of them, I can right click on that and that has the same options available. You can also add more than one guide by showing rulers. So for example if you go View, and then Rulers, you're going to see the ruler edges along the left side and along the top. You'll see in the corner here this is our unit of measure.

It's best practice to use points because that's the smallest unit of measure, and you'll see that FileMaker also reflects whatever unit of measure you pick over here in your Position tab. So if you have points, you can visually line things up but you can also drag guides down. So for example you say, I don't want anything above 100, or anything to the right of 100 or 200, or whatever it is. You can pull additional guides out if you want to. So you can have tons of different guides and you can have them all on this one layout or on various different layouts if you want.

And if you want to turn them all off at the same time you could just go into Guides and turn them off. But for me, I really like the Dynamic Guides. They really kind of intelligently move around so that I can see where I am in proportion to other objects, and the best part is you can tell when you're lining up objects. So this is my favorite part right here, so you can see that blue line that's cutting through all these fields tells me that we're right in the middle. And sometimes if you're trying to put something in the middle of a layout, you can even see the middle of the layout lines pop up, so like right there that tells me that I'm in the center of the layout. I love those tools.

Dynamic guides appear when an edge aligns with the edge of another object, or when the edge aligns with the guide that you might have on screen, or when a text baseline, that's this little dotted line that you see inside of a field, lines up with another text base line like that right there. And that's going to let you see how the text will actually line up when you are reading these things across the page. Now, if you don't like the finesse approach, you can use the brute force approach and align these things up automatically. Sometimes that's a preferred way to do it anyways. So for example, if you select a bunch of objects, and I'm going to do a lot of drag selecting in this chapter so you'll see that I'm holding down my mouse as I drag over these field objects.

Now, as I drag over the field objects, you'll see that all I have to do is touch a portion of them and they're selected. And I know they're selected because not only do I have this highlighter, this blue hue around them, but you'll also see that I've got my eight selection handles, the three on the top, three on the bottom, and two on the side. So I can move these around like that if I want to, but what I'm going to do now is move over to the Inspector and look at the arrange and align options, and you see I've got all these align options here, so the one on the far left aligns left edges.

Vertical centers, right edges, top edges, horizontal centers, and bottom edges. So in this case I'm going to align the left edges and now you can see that they perfectly line up to the left side of the fields, and you'll notice that I've got a couple of fields in here that I'm going to have to manipulate. So first of all I've got to move these back up and move my phone number back up. We'll fix that in a second. You'll notice that I've a field label here, why don't we line up these field labels for starters? Let's get those cleaned up. So we'll do select all of them by drag + select, and this time I'm going to go with the right edges.

so now I've got all the field labels lined up and so that's going to allow me to pick all the fields themselves, line them up to the left edges. But you'll notice that we've got a lot of clutter going on here, so one of the other things you can do is line things up with their field labels. So for example, I could just kind of eyeball like I was telling you before where I get the text base lines lined up, or if you really want to lock them into position, you can for example, select one of these items, hold down the shift key, select the title, that's where the align to horizontal centers comes in play.

So I can see that I've got a couple here and you see those moving around and I can line these things up the way that I'd like. Now you'll notice that we've got some spacing issues here. So one of the things that we can do that I find to be very helpful is grab all of these items and you see that we've got a couple of options over here in this space section. This is the one that I'm going to use here. Distribute Vertically, and what it's going to do is evenly space out all the fields within this space that I've defined between the top of the top item and the bottom of the bottom-most item.

So now you see that we've got them evenly spaced out, the look very nice, and another thing that I can do is I can temporarily lock them into position. So you'll notice that the handles have turned into locks, and the reason I do that is because, now what I can do is I can select some of the items like the fields and labels, and I can align them up perfectly. You'll notice here date created and its label, line those up vertically. You can see how this process works. Now one of the ways that might make this a little bit easier is if I do the same thing I did with the labels that I did with the fields.

So I'm going to select all those, I'm going to move Customer ID into position, and frankly I'm going to move Title into position. And then I'll grab the rest of them like this, hold down my shift key, and I'm going to do the Distribute Vertically thing there too. And you'll look, they actually kind of line up perfectly. So I'm going to do right edges here. I can grab the locked items and unlock them and I'll do left edges on those and it looks like everything's in a nice, clean spot. Now you might also notice that we've got one of the fields wider than the rest of them, and one of the tools that's available to us to be able to fix that is if we, for example, take this field, now granted, I could eyeball this out and make sure it lines up just like that, or one of the other tools available to us is the ability to select two items and you'll notice that we've got these resize options here.

So this one, Resize to the smallest width, that would actually take both of these objects and make it the smallest width or height, and you see I've got these different options here. I'm just going to hit that button and now you see that the Company Website field was updated. I can also select anything on screen, remove it if I want to make more space, so I'm going to drag these and now I can drag them as a whole and resize the entire width if I'd like to. Now if I make a mistake, the nice thing about FileMaker's that I can do a undo resize. We can maybe take these address fields down here, align those vertical spaces, do the same thing with those labels.

You can see that this process can go rather quickly once you get used to your tools. And if I want I can grab all of these and group them together, so now that I can move them around as just one object. So getting familiar with some of these tools is going to help you when you want to fine tune in the layouts that you've created in your FileMaker custom app.