Create an InfoPath form that switches views - Mel Balsamo
in

InfoPath Dev

This Blog

Syndication

Mel Balsamo

Create an InfoPath form that switches views

We’ve seen InfoPath forms that have tabs on top, lined up horizontally. These tabs are actually buttons that are meant for switching to different views within the form.

This blog post describes how this is done:

For a change, why don’t we have these tabs lined up vertically instead, like this:

Nice?

Follow the steps below to find out how this is done.

1. Design a new, blank InfoPath form template.

2. Insert a table with at least 6 columns and 1 row.

3. Merge the first 5 columns:

The left column will hold your form template’s fields and controls, while the right is where your vertical tabs will go.

4. Insert at least 4 buttons in the right column, labelling each as Tab 1, Tab 2, Tab 3 and Tab 4, and with IDs tabOne, tabTwo, tabThree and tabFour, respectively.

5. Right-click on the cell where the buttons are > Table Properties > Cell and make all paddings 0px:

6. Add three more views in your form template named View 2, View 3 and View 4:

7. Save your form template as source files:

8. Close InfoPath.

9. Modify the .xsl files

a. In the directory where you saved your source files, open all the .xsl files in any text editor such as Notepad.

b. In view1.xsl, search for “<body style

 

The section above represents the entire content of your first view which we will copy onto our other views so that they’d all look similar.

c. In view1.xsl, copy the entire section shown above and paste it onto the other three views replacing this part:

 

d. This section represents your vertical tabs/buttons:

 

Note that for each view, we will have a different style for the button corresponding to that view, i.e. the “active” view. For example, the first view (View 1) will have the first button (Tab 1) as the active view button, while the rest will have non-active view buttons.

For your active view, insert the following for the active button:

style="BORDER-RIGHT: #000000 1pt solid; PADDING-RIGHT: 10px; BORDER-TOP: #000000 1pt solid; FONT-WEIGHT: bold; PADDING-BOTTOM: 7px; MARGIN: 4px 0px 0px; BORDER-LEFT: #1e3c7b 2.25pt solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 7px; BORDER-BOTTOM: #000000 1pt solid; BACKGROUND-COLOR: #517dbf; TEXT-ALIGN: right"

And for the non-active ones, insert the following:

style="BORDER-RIGHT: #000000 1pt solid; BORDER-TOP: #000000 1pt solid; PADDING-LEFT: 7px; PADDING-BOTTOM: 3px; MARGIN: 4px 10px 0px 0px; BORDER-LEFT: #c0c0c0 2.25pt solid; WIDTH: 100%; COLOR: #517dbf; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1pt solid; BACKGROUND-COLOR: #ebf0f9; TEXT-ALIGN: left"

You will then have the following for view1.xsl:

 

e. Repeat the same process for the remaining views (.xsl files), inserting the active style tags for the corresponding view, and the non-active ones for the others.

f. When done, save all your .xsl files.

10. Right-click on manifest.xsf and click Design to see the results in InfoPath design mode.

11. In all the views, add rules to all the buttons (except for the button corresponding to the current view) that switches to the other views:

a. View 1:

i. Double-click on the Tab 2 button to open its properties, click Rules > Add > Add Action > Switch View > View 2.

ii. Double-click on the Tab 3 button to open its properties, click Rules > Add > Add Action > Switch View > View 3.

iii. Double-click on the Tab 4 button to open its properties, click Rules > Add > Add Action > Switch View > View 4.

b. View 2:

i. Double-click on the Tab 1 button to open its properties, click Rules > Add > Add Action > Switch View > View 1.

ii. Double-click on the Tab 3 button to open its properties, click Rules > Add > Add Action > Switch View > View 3.

iii. Double-click on the Tab 4 button to open its properties, click Rules > Add > Add Action > Switch View > View 4.

c. View 3:

i. Double-click on the Tab 1 button to open its properties, click Rules > Add > Add Action > Switch View > View 1.

ii. Double-click on the Tab 2 button to open its properties, click Rules > Add > Add Action > Switch View > View 2.

iii. Double-click on the Tab 4 button to open its properties, click Rules > Add > Add Action > Switch View > View 4.

d. View 4:

i. Double-click on the Tab 1 button to open its properties, click Rules > Add > Add Action > Switch View > View 1.

ii. Double-click on the Tab 2 button to open its properties, click Rules > Add > Add Action > Switch View > View 2.

iii. Double-click on the Tab 3 button to open its properties, click Rules > Add > Add Action > Switch View > View 3.

You can now design your views according to your needs. Add your titles, fields/controls, borders and shading, etc…

There’s your vertical tabbing!

When you’ve done all the steps in this blog and have successfully created your own InfoPath form with vertical tabs, you’ll probably use this technique when designing your forms going forward. It’ll be more cool to have a template part that’s readily available from your InfoPath Custom Controls so you can add vertical tabs in your forms in one click! Click here to learn more.

Comments

 

Qdabra Vertical Tabs Template Part - Mel Balsamo said:

Pingback from  Qdabra Vertical Tabs Template Part - Mel Balsamo

September 6, 2009 6:03 AM
 

Mel Balsamo said:

This blog post provides the steps on how to create an InfoPath form that switches views through vertical

March 3, 2010 9:02 AM
 

DC-jeff said:

Great article.  Flexible enough to port into existing forms as well.

September 21, 2010 7:30 AM
 

JHarrington said:

I'm just learning infopath but this is a very clean looking method for multiple views. Thanks.

October 1, 2011 6:58 AM
Copyright © 2003-2012 Qdabra Software. All rights reserved.
View our Terms of Use.