Jan's Working with Databases

Step-by-Step: Tab Control

---

What you will learn:

to create a tab control to rename tabs to format tab text to add and configure tab pages, including multiple row tabs to move controls to tab pages to verify tab page content to edit Property Sheet to resize form to verify tab order to set Scroll Bars property

---

Start with:  , resource files, worldtravel-Lastname-Firstname.accdb from folder databases project4 as updated in the previous lesson

Create Tab Control

You have so many controls on the Staff form that even with a logical arrangement it is rather hard to read the data. It's worth revising!

1. Open the form Staff-formatted from the previous lesson in Form Design View.
   This form has so many controls that it may not fit well on some monitors.
   
   How could you group these controls onto several tab pages? Are there natural groupings? There are many "right" answers to this question!
    
   Because there are already controls on the form, it will be a bit messy to change to a tab control.
   
2. Save the form with a new name, Staff-tabcontrol.
   
3. Click on the Tab Control button on the ribbon tab
   Form Design Tools: Design.
   The mouse pointer changes shape.
    

4. Click in the blank area below the Hobbies control.
   A tab control appears with the default properties. The page numbers on your tabs may be different from the illustration.

   The form automatically widened to hold the new control at its default size. That will be something to fix later.
   

---

Rename Tabs

Like many other controls, tab pages have both a Name property and a Caption property. These are not the same! Captions can be duplicated on a form, but a value for a Name property cannot.

For example, if a form contains controls for a mailing address and a physical address, you might have two labels that show "City". But the controls must be named differently, like MCity and PCity.

It is always a bad idea to use the name of a property (any property!) as the value for a property (any property!). When writing expressions or programming code, it is too easy to confuse the computer, and the programmer, about what you are talking about - a value or a property.

1. Click on the tab control and then click on the first tab to select it.
   (Handles must show inside the control.)
   
2. In the Property Sheet, change the Caption property to Name.
   (Be sure that the dialog the Selection type: Page, and not the tab control itself.)
   We did not changethe Name property to 'Name' because it is confusing to use a property's name as the value of the property. It is even hard to say clearly!
   
3.  Similarly, change the second tab to read Mailing Address by changing the Caption property.
   We are not going to be doing any fancy programming, but good habits are worth starting early.
   

---

Format Tab Text

You can change the font for the tabs to something you like better.

1. Click on the edge of the tab control to select the whole control.
    (Handles are on the edge of the control.)
   
2. In the Property Sheet, change the following properties:
      Font Name = Tahoma
      Font Size = 10
    

---

Add and Configure Tab Pages

1. Right click on the tab control and select  Insert Page  from the menu that appears.
   A new tab appears with a boring default caption.
   
2. Change the text to read Phone #'s.
   

3. Similarly, create tabs that have the following text:
     Company Info
     Personal Info
     Emergency
     Notes
   
   

   Problem: Error!
   The name Notes is already used by a control on the form.
   You changed the Name property instead of the Caption property.
   Solution: Undo your last change and edit the Caption property instead.
   

   Access 2007: A pair of navigation arrows appears at the top right of the tabs when they won't fit across the width of the tab control.
   

   Access 2010, 2013, 2016:
   The tab control automatically widens to hold the new tabs. That may not be the best arrangement.
   

4. Multi Row:
   • Select the whole tab control.
     
   • In the Property Sheet, change the property Multi Row to Yes.
   • Access 2010, 2013, 2016: Change the property Use Theme to No.
     Otherwise, the tab stubbornly stay in a single row.
   • Resize the tab control to about 3" x 3".
     The tabs arrange themselves onto as many rows as needed to show the caption text.
     
5. Reorder tabs:
   • Right click on the tab control.
   • From the menu that appears, select Page Order...
      The Page Order dialog appears.
   • Click on Phone #'s to select it.
   • Click on the button Move Up.
     The Phone #'s entry shifts up one line.
     
   • Click on OK.
     The dialog closes and the design shows the new order for the tab pages.
6. Switch to Form View.
7. Experiment: Tabs
   Click on the various tabs while in Form View. The current row moves to the bottom. Did you expect that?
    

---

Move Controls to Tab Pages

Now comes the trickiest part. To move the existing controls onto tab pages, you must use Copy and Paste. You cannot drag the existing controls and drop them onto a tab page. They would drop onto the form underneath the tab control instead.

First you will try drag and drop anyway, just to see what it looks like. It's quite confusing when this happens to you unexpectedly!

Drag-and-Drop fails:

1. Switch to Design View.
2. If necessary, click on the Name tab to make it the active tab.
3. Drag on the form to select the controls for the staff member's name, from Prefix down the column through Nickname.
   
   
4. Drag the selection to the tab control
   Outlines show the controls that you are dragging so you can see where they will drop.
    
    
5.  Drop.
   Hmmm. No controls are showing on the tab page, Name.
   The selection border and handles that you do see show us that the controls are underneath the tab control.
    

Copy-and-Paste works:

1. Click on the edge of the tab control to select it.
    
2. Move it sideway until you can see where those controls went. Not onto the tab page, but onto the form itself.
   
3. Undo the move.
   
4. Undo the paste.
   
5. Select the controls again.
   
6. Copy.
   
7. Click on the Name tab to select that tab page.
   Be sure that the page area shows the selection border and Name is surrounded by a dashed border.
    
8. Paste.
   The controls are pasted starting at the top left. They keep their original size and spacing. The tab control automatically resizes to hold the pasted controls.
   
9. Delete the original controls from the form.
   

10. Similarly, copy and paste the following controls to specified tab page:
    Hint: Spacing between control and label and between controls will be preserved. If controls are not adjacent (next to each other), copy and paste them separately.

    Phone #'s: all 5 phone number controls but not the colored rectangle behind them.
    Mailing Address: 6 controls, from Address through Country
    Company Info: 5 controls - StaffID, Title, Division, Location, DateHired
    Personal Info: 5 controls - EmailName, EmailExtension, Birthdate, Nationality, Hobbies
    Emergency: EmrgcyContact, EmrgcyPhone, Health Issues
    Notes: Notes

11. Delete the rectangle that was behind the phone numbers and the horizontal line that was above the Memo/Long Text controls.
    
12. Save the form
    [Staff-tabcontrol]

---

Rearrange Form

Now that nearly all of the controls have been moved to the tab control, you need to clean up the form layout. You will wind up with a smaller form.

1. Drag the tab control to the upper left of the Detail section.
   
2. Delete the label for the Photograph control and move it over next to the tab control.
   
3. Move the Date Updated control up to be level with the bottom of the tab control.
4. Move the calculated field in the Form Header to be centered below the photograph control.
5. Select each tab in turn and position the controls as needed to be similar to the illustrations.

   

---

Edit Property Sheet

You will be making the following changes in the steps below.

• Form Caption: Should match the new form name
• Photograph border and background: The border and colored background of the Photo control will show around the edges if the photo is not exactly square. You can make those transparent.
• Default image: You can pick out a default image to use until a photo can be added.
• Border of calculated name: Border does not need to show. The value is centered under the photograph.

1. If necessary, open the Property Sheet.
2. Select the calculated name control.
   It's name is something like Text71, but the number part for yours may be different.
3. Change the Border Style to Transparent.
4. Select the Photograph control.
5. Change Back Style to Transparent.
6. Change Border Style to Transparent.
7. Click the ellipsis button for the property Default Picture.
   The Insert Picture dialog opens.
8. Navigate to the databases resource files that you downloaded.

9. Select the image photonotavailable.png and click on OK.
   The name of this picture appears in the Property Sheet but the image does not show in Design View. The photo is now part of the database. Nothing you do to the original will affect it in the database.

10. Save the form.
    [Staff-tabcontrol]
    
11. Switch to Form View.  
    

---

Resize Form and Inspect for Errors

Both scroll bars are showing in illustration of the Form View above. That means that the form itself is wider and taller than what shows in the window. We cannot tell if there are more controls that are out of sight. You need to resize the form.

You moved so many controls around that the tab order is probably out of sync.

1. Switch to Design View.

2. Resize the form by dragging the edges until it is just large enough for the controls.

   Problem: Form will not resize
   A control is in the way, probably the dividing line.
   Solution: Move or delete the control(s) that are blocking your resize.
   

3. Switch to Form View.  
4. Inspect the form as you navigate through the records and the tab pages using the TAB key.
   Remember that you need to use the key combo CTRL + TAB to switch tab pages, or else use the mouse to click on the page you want to see.

5. Switch to Design View.

6. Make any corrections needed, such as to alignments and control size and tab order.
   

---

Verify Tab Order

The controls you moved should have kept the same tab order that you set earlier. That's not entirely what you need now. Make corrections as needed.

1. Tab Control: The tab control should be first in the form's tab order. Then Photograph and then DateUpdated.
2. Calculated name: You should NOT be able to TAB to the calculated name below the photo but it will appear in the Tab Order list. Set its Tab Stop property to No.
3. Tab order on a tab page: Each tab page has its own tab order. Select the page and then click the Tab Order button. These should be all OK since they follow the order they were put on the original form. They all show boring names like Text81 or Combo 118.

---

Hide Vertical Scroll Bars

As you used TAB to move through the controls, some text boxes may show short vertical scroll bars that look like an up arrow and a down arrow. A drop list has only a down arrow. Scroll bars are needed for Memo fields like Hobbies and Notes but should not be needed for properly sized text boxes.

1. For text box controls that show scroll bars, set the property Scroll Bars to None.
   
2. Save the form.
   [Staff-tabcontrol]