Organize the form design

- [Instructor] Combining the Form Wizard and the Layout view are easy ways to get started creating your databases forms. But the real power and flexibility lies in utilizing the full design environment for creating your forms from scratch, instead. Once you understand what's going on under the hood, creating your own forms that meet your exact specifications and needs will become second nature. It's often easier just to create a form from scratch rather than trying to clean up what the Wizard gave you. Let's start by creating an employee directory for Red30 Tech. To do this, we'll go up to the Create ribbon, and in the Forms group, I'll choose the option to create a new form using the Design view. This starts up a blank form in Design view, and you can see what that interface looks like. It gives you three contextual tabs across the top of the screen. Form Design, that has all of the controls that we can add into our form, as well as a bunch of additional tools. We have an Arrange tab that'll allow us to move things around, just like we saw with Layout view. And we also have a similar Format tab that has fonts, number formatting, and colors. Let's switch back to the Form Design tab. The main portion of the screen has this dot and grid background. This will help you precisely align your different elements on the form. However, this background pattern doesn't appear on the final form when you're working with it in Form view. Right now, the size of my form is represented by this line right over here on the right hand edge. And if I scroll down to the bottom, you'll see the bottom of the form right there. Now I like to be able to see everything on the screen at one time without having to scroll around. So I'm going to grab the bottom right hand corner. And when I see the forehead arrow, I'm just going to drag it up a bit, so I can scroll up and see the entire form at once. Keep in mind, though, that your forms will auto-resize to fill the end user's screen. So this right hand margin is going to expand all the way over here to the right on my screen. And this bottom margin is going to expand all the way to the bottom when I view it in Form view. We'll take a look at some ways that we can control that behavior later on in the course. So the first thing we need to do on our form is to start adding in the fields from our table. To do that, on the Form Design tab, I'll turn on the Add Existing Fields panel. That'll open up the Field List over here on the right, and I can click Show all tables to explore the tables in the database. I'll open up the Employees table, and we can see all the fields inside of the table. Now we just need to drag and drop the fields from this table list and drop them into the form. I'm going to click the FirstName field and drag and drop it into the Forms Design. And you'll see that we actually get two different elements. They both say FirstName, but the one on the left is a label control, and the one on the right is a text box control. The label is going to be a static bit of text. It's not going to change as we page through different records. The text box on the right is where the actual data will appear when we page through the records. So if we take our form and switch into Form view using the View button on the upper left hand corner of the ribbon, you can see that the left one still says FirstName, but now the right box says Darrel. That's the first name of my first employee. As I scroll through the different pages in the form, you'll see that that data updates. Okay, let's switch back into Design view. Now, if we take a look at this view button real quick, though, we'll see that the top portion of the button will toggle back and forth between Layout view and Form view. In order to get back into Design view, we need to click the bottom portion of the View button, and click the Design View option here in the list. Now, we can start working with the elements again. Around each of these elements, when you have them selected, you'll see these little grabbing handles. These will allow you to resize the elements. So I can click here and drag to the right to make the text box wider, or I can make it narrower. I can make it taller, or I can make it shorter. If you click anywhere else on this edge, you'll see a forehead arrow that'll allow you to drag and reposition it on the form. Notice when I do, though, that the positional relationship between the text box and the label is maintained. You can see the label came right along for the ride. In order to move these two elements independently, you need to use the large gray handle in the upper left hand corner. So I can click this handle here and drag and move it above the text box that it relates to. If you like keyboard shortcuts, you can also use the arrow keys on your keyboard to move things around. And if you hold down these Shift key and use your arrow keys, you can resize elements. So pressing Shift + Right, will make things wider, pressing Shift + Up will make them narrower, and so on. So that's how you move things around on your Forms Design. Let's go ahead and add in the additional fields from the Employees table. Instead of just dragging elements from the field list into your form, you can just double click on them to add them automatically. I'll double click on EmployeeID, and that adds a new label and a text box control related to that data. I'll do the same thing for our LastName, Title, Department, Email, HireDate. I'm going to skip the Extension, which is the phone number extension, but I'll double click on ProfilePhoto. At this point, we've added in all of the fields from the table, and I can close the Field List. Now we can move things around on the screen to put them in better position. I'm going to drag a box around all of these elements to select all of them at once. And then I'll drag them down into the right to get them out the way. Next, I want to delete some of these redundant labels. For instance, the ProfilePhoto will appear here in this text box, but I don't necessarily need a label to tell me that this is a picture. I'll go ahead and select the ProfilePhoto label, and press Delete on my keyboard to get rid of it. Next, I'll click on the photo box and drag and drop it in the upper left hand corner. I'm also going to make it quite a bit bigger. So let's drag it out to about two inches by two inches. And I'm taking a look at the rulers that appear on the left hand and the upper portion of the Form Design view. Now I'll take the FirstName box and move that up here to the left, just to the right of the ProfilePhoto. We'll do the same thing with the LastName. I'll click it and drag and drop it right over here, just to the right of the FirstName field. And I'll take the LastName label and move that above the LastName data. Let's also make that wider, just so everything fits. For the EmployeeID, I want that to appear in the bottom right hand corner of the form. So I'll go ahead and click that, and drag it into position down over here. I'll move the label above the text box. And then I'll move Title, Department, Email, and HireDate up on the screen. Let's just highlight all of these by dragging a box around all of them, and I'll move them into their new positions. Finally, I want to make sure that all these text boxes are the same width. In order to do that, I could go to the Arrange tab. And in the Size and Space menu, I have an option to make them to the same width with To Widest. That'll make the Title, Email, and HireDate fields all match the width of the email field. Now I'm getting a little bit of a collision here with that label, with the EmployeeID. So let me go ahead and select these, and just nudge 'em down a little bit. That'll give myself some more breathing room between those two fields. All right, let's go ahead and take a look at this now populated with data. I'll switch back to the Form Design tab, and we'll switch into Form view. So we're starting to get things in an organized position. I've got my FirstName and LastName, some important information about each of my employees, their profile photo, as well as their EmployeeID. At this point, we should probably save our work. I'll press Control + S on my keyboard, or you can use the disc icon in the quick access toolbar. And I'll call this form Employee Directory. That'll save it into the navigation pane, and we can continue working on it throughout this chapter. We'll continue to finesse these positions as we develop our form. And truth be told, Form Design will require a lot of back and forth as the final layout gets further refined. Now that we have our form field elements, in roughly the position that we want them, we can turn our attention to some of the formatting options that are available.