Create a Custom Task Pane to Switch Views - Matt Faus

InfoPath Dev

Matt Faus

Create a Custom Task Pane to Switch Views

Custom task panes, and their ability to interface with objects and functions in InfoPath, can be very useful. One such example of utilizing this functionality is creating a custom task pane using some simple JavaScript code that dynamically generates links to the different views in a form. The main difference between changing views in the task pane and changing views in InfoPath is that the task pane requires code to change views, whereas you can use rules or simply the View menu items in InfoPath.

In this task we will create a custom task pane HTML file in a text editor and add it to an InfoPath sample form.

Create a custom task pane:

Copy the following code into a text editor, and then save the file as SwitchViewsTaskPane.htm.


<script language="JavaScript">

var XDocument;
var View;

function PrintLinks()
    // Get a reference to the XDocument object for the InfoPath Form.
    XDocument = window.external.Window.XDocument;

    // Set the reference to the View object.
    View = XDocument.View; 

    // Get the ViewInfos object.
    var oViewInfos = XDocument.ViewInfos;

    var sInnerHtml = "";

    // Loop through the views, generate the HTML, and store it in sInnerHtml.
    for(i = 0; i < oViewInfos.Count; i++)
        sInnerHtml = sInnerHtml
            + "<a href='#' OnClick=\"View.SwitchView('" + oViewInfos(i).Name + "');\">"
            + (i+1) + ". &nbsp;" + oViewInfos(i).Name + "</a><br />" ;   

    // Display the HTML that was just generated.
    ViewLinks.innerHTML = sInnerHtml; 


<body onload="PrintLinks()">

 <div id="ViewLinks"></div>


Customize the Project Plan sample form:

  1. Open InfoPath, click Design A Form in the Fill Out A Form dialog box, and then click Customize A Sample in the Design A Form task pane.
  2. Select Project Plan from the Samples tab, and then click OK.
  3. Choose Form Options from the Tools menu.
  4. Switch to the Advanced Tab, select Enable Custom Task Pane, and then click Resource Files.
  5. Click Add, locate the SwitchViewsTaskPane.htm file that was created above, and then click OK.
  6. Name the task pane Switch Views (as shown in Figure 1), and then click OK to close the Form Options dialog box.

Figure 1. Adding the custom task pane.

Preview the form and notice that the task pane automatically generates links to all of the available views within the form, as shown in Figure 2.

Figure 2. The completed task pane applied to the Project Plan sample form.

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



GLazkano said:


That is something I needed!

Well done!

PS: Do you think is possible to include a search bar on that new task pane?

August 27, 2007 3:28 AM

DarrylGould said:


This piece of code is fantastic.  I have a form that contains 15 views, and this is a great way of displaying them. Thank you

I just have one question: Is there anyway to re-order the views in the list?  They appear in the order that they were added to the system.  Alphabetical order would be better for me.

Thanks again


September 11, 2008 5:33 AM

DarrylGould said:

I wasn't able to sort the views in alpha order, so deleted the views and recreated them in alpha order.  Not as slick as the function above, but it worked for me.  I still used the above function to display the views.  It's still a great piece of code.

October 19, 2008 2:17 PM

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.