New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using the Tab Control feature

From: FileMaker Pro 11 Essential Training

Video: Using the Tab Control feature

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.

Using the Tab Control feature

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.

Show transcript

This video is part of

Image for FileMaker Pro 11 Essential Training
FileMaker Pro 11 Essential Training

94 video lessons · 14798 viewers

Cris Ippolite
Author

 
Expand all | Collapse all
  1. 7m 22s
    1. Welcome
      1m 8s
    2. Understanding the FileMaker family
      2m 15s
    3. Using the FileMaker Quick Start screen
      2m 52s
    4. Using the exercise files
      1m 7s
  2. 21m 9s
    1. What is a database?
      2m 26s
    2. Flat vs. relational databases
      2m 29s
    3. How FileMaker works
      4m 48s
    4. Understanding the essential preferences
      3m 13s
    5. Touring the interface
      8m 13s
  3. 11m 44s
    1. Creating databases from templates
      2m 29s
    2. Creating new databases in the spreadsheet-like format
      5m 35s
    3. Importing tables
      3m 40s
  4. 9m 9s
    1. Determining which tables you will need
      5m 10s
    2. Creating tables in the Managing Tables window
      3m 59s
  5. 34m 47s
    1. Understanding relationship types
      6m 58s
    2. Diagramming relationships (with ER diagrams)
      8m 50s
    3. Determining which key fields you need
      5m 18s
    4. Defining primary and foreign keys
      7m 56s
    5. Creating relationships using the relationships graph and table occurrences
      5m 45s
  6. 50m 34s
    1. Deciding what fields you will need
      5m 34s
    2. Understanding field types
      7m 54s
    3. Defining fields
      9m 56s
    4. Using Auto Enter options in fields
      9m 33s
    5. Reviewing field validation options
      8m 16s
    6. Building with container fields
      9m 21s
  7. 14m 8s
    1. Creating and duplicating records
      5m 40s
    2. Editing and locking records
      4m 42s
    3. Deleting records and backing up files
      3m 46s
  8. 21m 6s
    1. Importing data
      9m 57s
    2. Importing records to refresh data
      7m 2s
    3. Exporting data
      4m 7s
  9. 18m 30s
    1. Understanding layouts
      4m 15s
    2. Using the Layout Assistant to create List views
      7m 59s
    3. Using the Layout Assistant to create labels and envelopes
      6m 16s
  10. 27m 11s
    1. Using the Layout Setup dialog box
      4m 54s
    2. Understanding layout parts
      4m 40s
    3. Understanding the new Inspector
      2m 26s
    4. Exploring the Status Area in Layout mode
      6m 46s
    5. Managing layouts and layout folders
      8m 25s
  11. 41m 9s
    1. Arranging, aligning, grouping, and locking layout objects
      11m 5s
    2. Placing and formatting objects, parts, and graphics
      4m 10s
    3. Formatting fields and applying field attributes
      8m 26s
    4. Setting field behaviors
      4m 4s
    5. Using the Tab Control feature
      9m 8s
    6. Setting tab order
      4m 16s
  12. 36m 48s
    1. Using the basic find functions
      7m 31s
    2. Reviewing new requests in the Find mode
      5m 54s
    3. Establishing search operators
      6m 43s
    4. Constraining or extending found sets
      3m 24s
    5. Finding records using date, time, or timestamp criteria
      5m 18s
    6. Using Fast Match and Quick Find
      4m 41s
    7. Working with saved finds
      3m 17s
  13. 17m 28s
    1. Sorting with one criterion
      6m 4s
    2. Sorting with related fields
      2m 18s
    3. Sorting with multiple criteria
      1m 36s
    4. Sorting using custom values
      3m 14s
    5. Sorting using buttons
      4m 16s
  14. 17m 14s
    1. Reviewing Field/Control styles
      5m 43s
    2. Creating and applying static value lists
      5m 20s
    3. Creating and applying dynamic value lists
      6m 11s
  15. 23m 52s
    1. Previewing pages and print options
      6m 20s
    2. Printing in different views
      2m 54s
    3. Sliding objects
      3m 26s
    4. Printing merge letters
      4m 53s
    5. Saving as a PDF or Excel file
      6m 19s
  16. 15m 1s
    1. Building simple reports with summary fields
      4m 36s
    2. Creating subsummary reports
      6m 51s
    3. Creating subsummary reports in Table view
      3m 34s
  17. 52m 19s
    1. Defining calculations
      2m 31s
    2. Exploring the Calculation dialog box
      5m 8s
    3. Using number functions
      12m 41s
    4. Using date and time functions
      4m 58s
    5. Using text functions
      11m 43s
    6. Using get functions
      4m 0s
    7. Using logic functions
      11m 18s
  18. 46m 56s
    1. Understanding scripts and script steps
      2m 23s
    2. Assigning script steps to buttons
      3m 54s
    3. Understanding the ScriptMaker dialog box
      8m 28s
    4. Creating multi-line scripts
      6m 44s
    5. Adding find criteria to a script
      4m 58s
    6. Understanding the If script step
      8m 36s
    7. Using script parameters
      4m 42s
    8. Reviewing the Send Mail option
      7m 11s
  19. 28m 0s
    1. Understanding script triggers
      2m 41s
    2. Using object-based triggers
      11m 58s
    3. Using layout-based triggers
      7m 51s
    4. Using file-based triggers (Open and Close scripts)
      5m 30s
  20. 56m 42s
    1. Using related fields
      7m 18s
    2. Creating portals and using portal filtering
      10m 38s
    3. Using related fields in calculations
      7m 6s
    4. Understanding multi-predicate relationships
      11m 11s
    5. Using the Go to Related Record script step
      7m 26s
    6. Creating a chart
      13m 3s
  21. 30s
    1. Goodbye
      30s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.