Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Layout Objects are the building blocks of layouts. Everything you place on a layout, be it a field or an image or a portal or a label, is considered an object. All objects have particular attributes that you can manipulate. However, you must be in Layout mode to be able to edit any layouts. So let's start there first. We'll go View > Layout mode. Once in Layout mode, you can group any combination of objects so that you can edit or move them together, or change the stacking order of objects to get the different effects when objects overlap. These are all done through Grouping tools.
The Grouping tools can be found in your new Inspector. In order to invoke the Inspector, you can hit the i button, or what you'll probably get accustomed to doing is also hitting Command+I or Ctrl+I, while in Layout mode only. You'll see the Grouping tools can be found under the Position tab. We're going to be exploring all three of these tabs, but right now we're going to focus on the Position tab, and more specifically, the Arrange & Align set of tools. You see we can collapse all the other tools away, and just leave the Arrange & Align ones available to us.
You'll notice there are several different things that we can do. We can Group, Arrange, Lock, Resize, Align or Space different groups of objects. For example, if you look in our Customer Detail layout, you can see that there is a series of fields that are not aligned properly. If we select all of these objects, we can use the Align tool to straighten them out. First, the best way to select a large group of objects is to click down on your mouse with your Pointer tool, and then drag-select all the objects that you want to work with. Here you can see that I'm fully containing all of the fields, so I'll release my mouse, and now I've successfully been able to select all the fields that I want to align.
Now I could do this manually by using the arrows on my keyboard, and doing one at a time. But instead, I'm going to use one of the tools that I've got over here in my Inspector. In this case, we're going to use the Align tools. You see here by rolling over each one, you get a description of what each tool does. But I'm going to use the first one here, called Align left edges. By simply clicking that button, you see now that I've been able to exactly line up all of the fields that I just selected. Now we can do the same thing to the field labels. Since the field labels are not connected to the fields, let's drag-select those.
Now you'll notice that we've got one that's overlapping the fields, but you can see that it still selected, because of the handles that appear. Now let's go into Align, but this time, let's choose Align right edges. Now you see that all of the fields have lined up to the right edges. However, they're not in the right position, because they still overlap the fields. This one is easy. We can just simply click the left arrow on our keyboard, and even hold it down until we get it all the fields to the desired position. This is the kind of thing that could have really taken a long time if we did them one after another.
Now you'll also notice in the Company Name field, you'll see that the field labels are a lot higher than the field. Now this is something we could easily fix by just selecting the field label and using our arrow tools, or we could use one of our Align tools. I'm going to select both the Company Name field label, and I'm going to then select the field by holding down the Shift key. That's the same for either Mac or Windows. Once I have those two field objects selected, I'm going to choose the Align horizontal centers.
Now you'll see those lines up. I'll do the same thing down here for Zip, holding the Shift key, horizontal centers. Of course, you can still finesse some of these arrangements by selecting a single object or objects, and just simply using your arrow keys. Another thing you may notice is that the CompanyWebsite field is a lot wider than the rest of the fields. This is probably more desirable, since the standard field size that we've been using probably doesn't fit a lot of the text that's going to be inside the field, like in Company Name, for example, or maybe some of the name fields, as well.
There is a series of tools in the Arrange & Align section that will allow us to resize fields and groups the fields that are selected. So let's go ahead and select all of these fields again by clicking down, and drag-selecting, and then releasing. We see we've got all the fields selected now. You'll notice in the Resize, we've got a couple of different options. Resize to the smallest width, and Resize to the largest width. As you can see from the icons, depending on which one of these we choose, the field objects that we have selected will either constrain to the smallest size, which would mean the CompanyWebsite would be as small as the rest of them, or the rest of these would expand to the largest width, which is what we're going to do by selecting this button here.
Now you see we've got much more manageable field sizes, all in the click of just one button. We might also want to use the arrow keys to select the CompanyLogo field label, and move it to more desired position. Now I'm going to demonstrate a Layout design technique that uses a lot of the Arrange & Align tools, but it's also going to use the Position tool that you see here. A lot of developers like to use the Shape tools that you see above, to be able to add a little bit of design to their layouts. For example, I can choose the Rounded Rectangle tool. You see my cursor becomes a crosshair.
I can draw a border edge around all of the field objects that I currently have onscreen, just to sort of organize them all in the same place. Now one thing I want you to notice, now that we've expanded the Position section. You'll notice when we have an object selected or even a group of objects, we see several numbers show up. These numbers are actually giving us the measurement, or the size, of the selected field object or objects. In this case, you see that we've got a rectangle object that's 637 pixels wide and 427 pixels high.
Now if in your copy of FileMaker you don't see px right here, which stands for pixels, and maybe you see something like inches, then just click on it like I just have, and it will toggle to the proper increments. But from my experience, I would suggest that you always use pixels since they are the smallest unit of measure. In most cases, on FileMaker layouts, you're really only moving Layout objects very short distances anyways. So toggle over to pixels, and then you can take a measurement as to how wide your Layout Object might be. You can move it around as well by hitting the arrow keys, and watch as these values change when I move this down just a tad.
What this is giving us an indication is how far from the Left our Layout Object is. You see we're flushed to the Left, so it's 0. How far from the Top we are, 22 pixels from the very Top edge of our window. How far from the very furthest right edge we are, as well as the distance from the Bottom of the selection to the Top of the layout. So this gives us a distance from here all the way to the Top. Now we might want to give a little bit of relief over on the left-hand side. So we can just click in here, and put a value in ,like let's say 5 or something, and hit Enter.
You'll see it adjusts just a tad. We notice that one of our field labels is a bit off, so maybe we'll select this field label. Use our arrow keys to move it inside our new rectangle. Now we can see that once we no longer have an item selected, that we don't see any figures here inside the Position section. Now let's grab this oval. I'm going to show you another way to format a layout object. We're going to change its Color.
Notice here in your Layout toolbar, we've got a section that says Fill. Once selected, you'll see that you get a Color palette. In addition to these standard colors, you can also click Other Colors. Now keep in mind that this is what the Other Colors window looks like on a Mac; on Windows it's slightly different. But I'm going to choose all the different options that I've got, until I find one that fits. Here we go. I'm going to use the Crayon one that's available to me in Mac, and I'm going to choose this color, and hit OK. Now you see my entire Layout object has changed color.
Keep in mind that you can select several Layout objects, and apply color to them all at the same time. Now we're going to grab the Rectangle tool. We're going to draw a rectangle in the middle area. Now we see we have that selected. If we look, we see we've got the Width at 637, but let's select our Rounded Rectangle again. We see that we have the same Width there, but we notice that the Height is a little bit different. We've got 415 and 427.
Let's say we make this one 410, and we'll type and hit Enter. We see that it just adjusted. Now let's align these lines up a little bit better by using our arrow keys. Make sure we've got square selected. Nudge it over. We see down here we can overlap just a tad. Let's move them down, so they're flushed with the bottom. We can also see that the 449 for the Square we drew matches the 449 for the Rounded Rectangle.
Now we've got two layout objects. But what I'm going to do here is I'm going to select the Square, and I'm going to give that a different Fill Color. At this point, your Layout looks something like this. Now if I select both of the objects, and if you remember you can select multiple objects by holding down the Shift key, I'm going to use the Group tool to make them all one single object. You see that they've become one single object, because I've now only got four corners, even though I had all eight handles showing when both objects were selected. But the problem is that we can't see any of our field objects here.
So we're going to use another one of the tool sets, called the Arrange, which allows us to move this layout object back or forward within what's called the stacking order on our Layout. At any given time, a Layout Object is either above or below other Layout Objects, with the original blank canvas background always being the furthest back item. So what we're going to do in this case is take our selected layout object, and select this option here called Send to back. Now that we hit Send to back, we see that all of the other field layout objects are presented forward, and now the users can see them and interact with them, as well.
Finally, we can use the Lock objects, as you see here, to be able to lock this object, so that we can't inadvertently move it. This is customarily used for Layout design objects that you're done working with, that you don't want to mess up inadvertently while clicking on other Layout objects. You'll notice the difference between a locked object and an unlocked object. You can see when I select this field object here, I have the black handles, and here we've got gray handles, indicating that it's locked. Of course, you can simply unlock one of the objects by toggling the Lock icons within your Inspector.
I'll be making the same changes to other layouts in the exercise file in upcoming Exercise Files. But if you want some additional practice, go ahead and do the same thing we've done here to your Customer Detail, Product Detail and Invoice Detail Layouts. Getting familiar with some of these tools is going to help you when you want to fine-tune the layouts that you've created inside of your FileMaker database.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.