Create a Tabbed Content Pane - Matt Faus
in

InfoPath Dev

Matt Faus

Create a Tabbed Content Pane

When filling out a form with several different sections it is very convenient to use tabs to separate these sections. Tabs quickly and easily let the user know what sections are available and have become a vital part of graphical user interfaces. Using advanced design techniques, InfoPath can be used to create a fantastic and appealing tabbed interface.

In this task we will use a layout table, buttons with code, and three views to create a tabbed content pane. Let's start by creating a new blank form.

Add the layout table and buttons:

  1. Open the Layout task pane and choose Custom Table to create a table with 3 columns and 2 rows.
  2. Highlight the entire second row, right-click and choose Merge Cells to create one big cell.
  3. Change the size of the one big cell by clicking and dragging its bottom border down the page.
  4. Click inside the first column of the first row to set the insertion point.
  5. Open the Controls task pane and select Button.
  6. Repeat steps 4 and 5 for the next two columns so that there is a button in each of the columns of the first row.

Format the buttons to look like tabs:

  1. Double-click the button in the first column, change the Label to Tab 1, change the ID to btnTab1, and then click OK.
  2. Right-click the Tab 1 button and choose Borders and Shading.
  3. Click None under the Presets section of the Borders tab to remove the borders of the button.
  4. Switch to the Shading tab of the Borders and Shading dialog box, select No Color, and then click OK.
  5. Resize the button so that it will almost fill the entire cell.
  6. Right-click inside the table cell that contains the button and choose Borders and Shading. If you have a hard time doing this try clicking on the button and then pressing the right arrow key to set the insertion point inside the table cell. After this right-click on the insertion point to access the menu.
  7. Switch to the Shading tab, choose a dark grey color from the drop-down list, and then click OK.
  8. Repeat steps 1 through 6 for the other two buttons naming them Tab 2 and Tab 3, respectively. Also, instead of a dark grey color for the shading of the table cells select a light grey color. Refer to Figure 1.


Figure 1. The completed default view.

Add the other views:

  1. Open the Views Task Pane, double-click View 1, rename it to Tab 1, and then click OK.
  2. Click Add A New View, name the view Tab 2, and then click OK.
  3. Add one more view named Tab 3.

Now that the form is starting to take shape, let's add some functionality via rules on each of the buttons. Please note that the following actions can also be achieved with code. For this example, we chose to use rules, but you may substitute code if you prefer. Also note that although rules will be carried along with a button after copying and pasting, adding rules later will require another copy and paste for the rules to propagate.

Add rules to the buttons:

  1. In the Views task pane select Tab 1 to switch to the view with the tabbed content pane.
  2. Double-click the Tab 1 button to open the Button Properties dialog box, click Rules, and then click Add.
  3. Name the rule Switch Views to Tab 1, and then click Add Action.
  4. Select Switch Views from the Action drop-down list, select Tab 1 from the View drop-down list, and then click OK four times to close the Button Properties dialog box and apply the rule.
  5. Follow steps 2 through 4 for the other two buttons, adding actions to switch to their respective views.

Copy the tabbed content pane to the other views:

  1. Copy all of the content of the Tab 1 view by choosing Select All from the Edit menu, and then choosing Copy from the Edit menu. This can also be done by pressing Ctrl+A then Ctrl+C.
  2. In the Views task pane select Tab 2 to switch to the Tab 2 view, and then choose Paste from the Edit menu. This can also be done by pressing Ctrl+V.
  3. Switch to the Tab 3 view and Paste again.
  4. Reformat the table cells on each view so that the dark grey cell on the view corresponds to which view it is.
  5. Type some identifying text into the one big cell of each view. Refer to Figures 2 and 3.


Figure 2. The Tab 2 view.


Figure 3. The Tab 3 view.

Try it:

  1. Preview the form by clicking the Preview Form button or pressing Alt+P.
  2. Observe how clicking the buttons switches views and changes the formatting of the buttons to display a tabbed content pane.

You will see that we have now achieved a very functional and easy-to-use tabbed content pane. With the help of images and careful adjustments, this simple tabbed content pane can be transformed into a very clean and professional looking interface.

Published Jan 11 2006, 12:39 PM by Matt Faus
Filed under: ,

Comments

No Comments

About Matt Faus

Matt holds a BS in Computer Science and Software Engineering from the University of Texas at Dallas. During his studies, he helped Qdabra Software develop DBXL and InfoPath solutions. During that time he lived in Dallas, Seattle, and Valencia, Spain. He now works at Microsoft, developing for Hotmail.
Copyright © 2003-2019 Qdabra Software. All rights reserved.
View our Terms of Use.