Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The Tabbed User Interface is a popular design feature with many applications. FileMaker Pro offers you a Layout tool that allows you to create the tabbed interface in your layouts. And then when selected, each one of these tabs can display a unique set of objects and/or data, thereby allowing you to use the same section of layout real estate for multiple purposes. The term Tab Control refers to the entire Layout object. Each Tab Control in FileMaker can contain one or even more individual tabs called Tab panels. It's really not a navigation tool; rather, it's a layout organization tool used to selectively display different sets of fields.
I am going to show you how to create a tabbed interface. If you open up your 10_05 Exercise File and navigate to the Customer Detail layout, you see what we have on this screen is a pretty classic situation of a cluttered screen, and way too much information all on one screen at a time. Now, if you could talk to your users and say, can I put these things into different sections on the layout? A lot of people might say that, yes, I could group these fields together. For example, we've already grouped some of the Address or Contact Information fields together. But you will see that these fall into different groups. If we look at, some might be Discount and Tax Rate, could be determined financial, for example.
But let's say you do go back to your users and say, help me group these fields together, and let's say you come up with several groups; for example, you could have Contact fields, which could be your Address, maybe the Company Name, Web Site, Phone Number, those types of things, and then financial fields, Discount, Tax Rate. How about Notes? Maybe give the Notes its own Tab panel, so you can make it a lot larger, and it could take up more screen real estate. And the same thing with this logo, that seems to be occupying a great deal of space in the middle of our screen. Once you and your users have determined a plausible set of groups that your fields can fit into, what you'll want to do now is go into Layout mode, and you'll notice in our Layout toolbar, we've got something here called the Tab Control tool.
Now, if we want to draw the Tab Control tool in the space that's currently occupied by the Fields, we'll need to make a little bit of room for it. So what I am going to do is I am going to suggest that we Drag+Select by holding down our Pointer tool, and when we Drag+ Select, we're going to grab all of the fields in the layout, and to put them into our Clipboard for a moment, we're going to hit Cut, which now gives us a clean slate to work with. We're then going to choose our Tab Control, which turns our Pointer tool to a crosshair, much like some of these other Tab Controls do.
What we're going to do here is we're going to draw this Tab Control, and have it occupy the full space inside of our Customer Detail layout. Now what you see onscreen is something called the Tab Control Setup dialog. This is where it allows you to determine what number of tabs will appear in your Tab Control, and what you will name those Tab panels as well. And since we've determined that we've got four different groups of fields, let's create a Tab panel for each one of them. First, we will start with Contact, and hit Create. Let's see. We just type right into the Tab Name field.
Financial, hit Create. Notes, and then Logo. Now, we've created all our Tab panels, but before we leave this window, there are some other settings to look at, as well. For example, which one of these tabs is going to always be in front whenever we land on this layout or navigate to the layout? Let's keep that at Contact for now, since Contact is where some of the main details are going to be located. You can also determine whether or not you're going to fully Justify to the Left all of your tabs, or they could be Center, Right, or Full; we'll just keep it as a standard Left, which will leave all the Tab panels drawing from left to right.
The Appearance of the tab can either be Rounded or Square. We'll also leave that at Rounded, since these are all pretty common. And then finally we choose between the Tab Widths, and whether or not they can match the maximum Width of any of the label words. You see here that all our words are pretty much the same Width. So what we can choose to do here is give it a Label Width, Label Width plus an Additional Margin, Width of the Widest Label or the Longest Word, and give it a Minimum or a Fixed Width, which we can put in number of pixels or choose inches or centimeters, if we want to.
But we'll just choose Width of Widest Label. Now when we hit OK, we see that we've got all four of our Tab panels appearing, and now we want to place the Fields onto our Tab panel. I am going to click inside the Tab panel with my Pointer tool, and we're going to go and hit Paste, and we see our fields come back onscreen. Some of them aren't going to fit, but we will make this work. So first, while we're working with this, why don't we grab the CompanyLogo label, hold down the Shift key, grab the CompanyLogo field, hit Cut, go into the Logo tab, and hit Paste.
Move those inside the center. Go back to the Contacts. Let's do the same with Notes. Shift+Select Notes, hit Cut, go into the Notes Pane, click inside, and hit Paste. And let's give Notes a little bit more room. As a matter of fact, we probably don't need the field label anymore, since the tab can work as a field label. So let's hit Delete to get rid of that, and with our Pointer tool, we will move Motes up into the corner, grab the bottom right-hand corner, and let Notes occupy the entire area.
Now, back in Contact, we've got two more fields down here. Discount Rate, Shift+Selecting these two field labels and fields, we will cut again, click inside the Tab panel, and hit Paste, position them right about here. Now, back in Contact, we've got a series of different fields that we can reposition inside the Contact Detail layout. One thing that might not be a bad idea is to take DateCreated, move that down into our Footer, RecordCreatedBy, move that into the Footer, DateModified.
Maybe grab all of these by Drag+ Selecting, and if you recall, we've got a Inspector option under the Position tab and Arrange & Align. We can choose the Align on horizontal centers, and we see that those automatically sync up. So now we can take these other fields, just using our Pointer tool, Shift+Selecting where necessary, then we can move everything into position using some of the tools that we've already discussed.
And finally, just the Address field. So here, we can put those right here, let's say. So now you see, when you go into Browse mode, you'll be asked to save your changes, which we will do. But now we've got the same layout, but much more room. We've got all of our contact information here is in the default Tab panel, and when we go into our Financial Tab, now notice that the First and Last Name field labels are showing up, even though those are placed over here. Well, this is an important part about fitting objects inside of your Tab panel.
If you go back into Layout mode, you'll notice that these field labels actually extend off the edge of the tab. So if something extends off the edge of the tab, it's not going to be contained within the tab. So this is a very important note. So we will Shift+Select these options and then just drag their size smaller. So now when we go back into Browse mode, you'll see that the same thing is happening for Web Sites, so we will do that. So there's a little bit of finessing that's necessary, and you see everything else seems to be okay. So we go back into Browse mode, hit Save, and everything has got its own spot.
You can also modify the appearance of Tab Control in several ways. For example, in Layout mode, if you double-click on one of the Tab panel names, you can reorder these in any way you want, by moving the handles around, if you would like. You can also nest a Tab Control within another Tab Control, which we will do in a later exercise. Just like any other layout object, you can change the Color or Appearance by using Fill options, Embossed, or Drop Shadow, change the line Widths, different things like that.
A couple of things to keep in mind when moving and resizing controls. When a Tab Control is moved, for example, if we wanted to move this around, it's going to move all of its containing objects with it. But if you make a Tab Control smaller and the fields within it become exposed, they will need to be resized in order to still be contained within the Tab Control. So if an object no longer fits within a Resize Tab panel, much like we saw with our First, Last, and Web Site Field Labels, then it's going to pop out of the Tab Control and become part of the layout, thus appearing on every one of the Tab panels.
I will be making some of these same changes on the other layouts in this database, and if you would like to get some extra practice, you can use the 10_05 file and apply some of the Tab Controls to the other layouts yourself. The Tabbed User Interface is a popular design feature in many applications outside of FileMaker. So if you choose to use Tab Features in your own designs, your users should be pretty familiar with how they should operate. The Tab Control feature helps you easily create tabs to organize your fields, without having to ever create new layouts.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 64741 Viewers
80 Video lessons · 124337 Viewers
52 Video lessons · 60269 Viewers
59 Video lessons · 46100 Viewers