Tabs

In my last post I covered how to make Wizard-like forms. This time I want to talk about another common practice for organizing all the fields in a form: grouping each set of fields onto a "tab" so the user can switch between the sets in whichever order they wish. While wizards are useful in forms with a clear flow, tabs are useful when the same form will be updated multiple times in different places.

 

In Windows XP, tabs look like this (this screenshot's taken from InfoPath's View Properties dialog):

 

 

InfoPath doesn't have a built-in Tab Control, but it's easy enough to build one using tables, buttons, and views, so let's do it!

 

The basic idea

Here's what to build:

  • Views for the contents of each tab
  • Table with shading to give the visual effect of tabs
  • Buttons for each tab with a rule that switches the view

 

For example:

 

 

Then when the user clicks "Details" they switch views to see this:

 

 

How To, with tricks along the way

  1. Create all of your views (from the Views task pane)
    • Select the same color scheme for each view (use the Color Schemes task pane)
    • Use Background Color on the Format menu to make the background of each view the second color for the current color scheme (the second-darkest color at the top of the color picker)
  2. Insert a layout table (on the Insert menu, click Table)
    • Make it two rows high. The first row will be for the buttons, the second will be for the tab content.
    • Split the first row to make a cell for each view, plus one extra cell to take the remaining horizontal space.
  3. Insert a button into each cell (from the Controls task pane)
    • Add a rule to each button to switch to the corresponding view. Do this even for the current view's button.
    • Make the current "active" button Bold, so it stands out.
  4. Use borders and shading (on the Format menu)
    • Select all the buttons at once (hold down the Control key and click each one), then remove all borders and shading from the buttons (they're invisible except for their label!).
    • Select the entire table, then add borders inside and out using the first color in the color scheme (the darkest color).
    • Select the non-active cells and set their shading to the third lightest color of the color scheme.
    • Select the active cell and the content cell, and set their shading to white.
    • Select the active cell and remove the bottom border so it becomes connected to the content cell.
    • Select the right-most "extra" cell and remove the top and right border
  5. Copy the table to each view
    • Update the borders and shading to change the "active" cell for each view
    • Put all your fields for each tab in its content cell

 

Getting fancy

If the tabs above aren't pretty enough for your form, add some images inside a few more table cells around each button to provide rounded corners and other visual effects. It's more work, and requires some image editing, but with a little elbow grease you could get something as schmancy as this:

 

 

 

Enjoy,

Ned