Lab 11: Integrating InfoPath 2007 Forms in Web Sites Using Visual Studio

This content is outdated and is no longer being maintained. It is provided as a courtesy for individuals who are still using these technologies. This page may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.

Learn how to create Web pages in Visual Studio 2005 that include links that open InfoPath 2007 forms. Add query parameters to the URL to control how the form behaves, and create a custom page that displays InfoPath forms and ASP.NET controls together. (9 printed pages)

February 2007

**Applies to:**Microsoft Office InfoPath 2007

Contents

• Lab Objectives

• Lab Setup and Requirements

• Scenario

• Exercises

• Conclusion

• Additional Resources

Download: InfoPath 2007 Sample: Training Labs.

After completing this lab, you will know how to do the following tasks:

• Design a Web page that contains links that open a Microsoft Office InfoPath 2007 form in a Web browser.

• Use query parameters on the URL specified in the link to determine the page that the browser will go to after the form is submitted.

• Create an .aspx page that contains an InfoPath XmlFormView control and other ASP.NET controls.

• Use code to switch forms in the XmlFormView control based on a selection in a drop-down list.

To complete this lab, you must have the following:

• Microsoft Office InfoPath 2007 installed on a server running InfoPath Forms Services, as part of either Microsoft Office SharePoint Server 2007 or Microsoft Office Forms Server 2007

• Microsoft Visual Studio 2005

• The files survey.xsn, AddressUS.xsn, and AddressEurope.xsn, included in the download associated with this training lab

Contoso Corporation has decided to create a survey on its Web site for customers to provide feedback on Contoso services. Because external customers might not have Microsoft Office InfoPath 2007, the IT department decides to design the survey form in InfoPath 2007 and to use a server running InfoPath Forms Services to enable users to fill out the form in a browser. The department wants to integrate the form into pages by using the graphics and style of the existing Contoso Web page.

As encouragement, the department will provide a free gift to customers who complete the survey. An InfoPath form on the acknowledgment page enables customers to specify their mailing addresses for the gift.

The first step is to create a new Web page that contains a link to open an InfoPath form in InfoPath 2007. You then modify the link to open the form in the default Web browser. The Web page must reside on a Microsoft Office SharePoint Server site, so before you can create the page, you must find the local path to the SharePoint Server site and create a new folder to contain the Web page.

1. Start the Internet Information Services (IIS) Manager, under Administrative Tools on the Start menu.

2. Expand the local computer, and then expand Web Sites.

3. Right-click the SharePoint - 80 site, and then click Properties.

4. On the ASP.NET tab of the Web site properties, find the File location corresponding to the WSS site, or to your site under the WSS root site, for example: "C:\Inetpub\wwwroot\wss\VirtualDirectories\80."

5. Start Microsoft Visual Studio 2005.

6. On the File menu, click Open, and then click Web Site.

7. In the Open Web Site dialog box, click the File System icon, and then click the folder corresponding to the path found in step 4.

8. Click Open.

9. On the Website menu, click Start Options.

10. Select the Use custom server option.

11. Set the Base URL to the URL for your site, for example, http://<ServerName>, and then click OK.

12. On the View menu, click Solution Explorer.

13. In Solution Explorer, right-click the second item in the list under Solution '80', and then click New Folder.

14. Type a new name for the folder, such as MyFolder.

1. In Solution Explorer, right-click your new folder, and click Add New Item.

2. In the Visual Studio installed templates list, select the HTML Page template.

3. In the Name box, type SurveyInvitation.htm.

4. Click Add, as shown in Figure 1.

   Figure 1. Adding the Survey Invitation page to the site

   

5. In the Source view of the page, change the title property of the page as follows.

   <head>
       <title>Survey Invitation</title>
   </head>
   

1. Open the survey.xsn form template in design mode, located at C:\2007 Office System Developer Resources\Code Samples\InfoPath2007SampleTrainingLabs.

2. Publish the template to your SharePoint Server site to a Document library named "Survey."

   For more information about how to do this, see "To publish a form template to a library" in Lab 1: Publishing an InfoPath 2007 Form Template to a Server Running InfoPath Forms Services.

3. In the Source view of the page, modify the content to add an anchor tag with an href attribute.

   <body>
       <a href="/Survey/Forms/template.xsn">Invitation to complete a survey</a>
   </body>
   

4. Press CTRL+S to save the page.

5. Click Start, click Run, and then type cmd to open the Command Prompt window.

6. Type iisreset to restart the Web server.

7. After IIS is restarted, test that the survey form opens in InfoPath 2007 by doing the following:

   1. Right-click the HTML source, or click the SurveyInvitation.htm page in Solution Explorer, and then click View in Browser.

   2. Click Invitation to complete a survey.

      If InfoPath is installed on this computer, it will open and load the survey.xsn form template from this Web site.

   3. In the File Download dialog box, click Open if prompted.

   4. Click Submit, after which InfoPath closes.

   Expand table

   Note
   In this example, the Submit button in the survey form is configured to close the form.

1. In the Source view of the page, add a query parameter OpenIn=browser to the URL, for example, <a href="/Survey/Forms/template.xsn?OpenIn=browser">.

2. Press CTRL+S to save the page.

3. Close Internet Explorer, if it is open.

4. Right-click the source, or click SurveyInvitation.htm in Solution Explorer, and then click View in Browser.

5. Click Invitation to complete a survey.

   The browser goes to the following URL and displays the survey form in the browser.

   http://...<yoursite>/_layouts/FormServer.aspx?XsnLocation=~sitecollection/Survey/forms/template.xsn&OpenIn=browser
   

6. Click Submit.

   The browser returns to the SurveyInvitation.htm page.

Instead of sending users back to the SurveyInvitation.htm page, you probably want to redirect them to a new page, named "ThanksForSurvey" in this example.

1. In Solution Explorer, right-click MyFolder, and then click Add New Item.

2. In the Visual Studio installed templates list, select the HTML Page template.

3. In the Name box, type ThanksForSurvey.htm.

4. Click Add.

5. In the Source view of the page, change the title and body of the page as follows:

   <head>
       <title>Survey Thanks</title>
   </head>
   <body>
       Thank you for completing the survey!
   </body>
   

6. Save the page.

After you create the ThanksForSurvey.htm page, you want to modify the link so the browser goes to the new page when the user submits the form.

1. To return to the Source view of the SurveyInvitation.htm page, right-click SurveyInvitation.htm in Solution Explorer, and then click View Markup.

2. Add the query parameter Source=~sitecollection/MyFolder/ThanksForSurvey.htm to the URL for opening the survey form, so the anchor link looks like the following.

   <a href="/Survey/Forms/template.xsn?OpenIn=browser
   &Source=~sitecollection/MyFolder/ThanksForSurvey.htm">Invitation to complete a survey.</a>
   

3. Save the page.

4. Click Start, click Run, and then type cmd to open the Command Prompt window.

5. Type iisreset to restart the Web server.

6. After IIS is restarted, close the Command Prompt window and Internet Explorer.

7. Right-click the source, or click SurveyInvitation.htm in Solution Explorer, and then select View in Browser.

8. Click Invitation to complete a survey.

   The browser goes to the following URL and displays the survey form in the browser.

   http://...<yourSite>/_layouts/FormServer.aspx?XsnLocation=~sitecollection/Survey/forms/template.xsn&OpenIn=browser&Source=/MyFolder/ThanksForSurvey.htm
   

9. Click Submit.

   The browser closes the form and goes to the new ThanksForSurvey.htm page.

Next, you will create a dynamic Thank You page that contains an XmlFormView and an ASP.NET control. The ASP.NET control controls which form template is open in the XmlFormView control, enabling visitors from Europe and the United States to enter their addresses.

1. In Solution Explorer, right-click MyFolder, and then click Add New Item.

2. Click Web Form.

3. In the Name box, type ThanksForSurvey.aspx.

4. Clear the Place code in separate file check box.

5. Click Add, as shown in Figure 2.

   Figure 2. Adding the Thank You Web form to the site

   

6. In the Source view of the page, change the title property of the page as follows.

   <head runat="server">
       <title>Thanks for the survey</title>
   </head>
   

7. In the Design View of the ThanksForSurvey.aspx page, click DOCUMENT in the Properties task pane, and set the EnableSessionState property to True.

   If you do not see the Properties task pane, click the View menu, and then select Properties Window.

1. Ensure that the XmlFormView control is available in the Visual Studio Toolbox by following these steps:

   1. In Visual Studio, right-click a tab of the Toolbox, and then click Choose Items.

   2. In the .NET Components list, select the XmlFormView control checkbox

   3. If the XmlFormView control is not in the list, browse to the Microsoft.Office.InfoPath.Server.dll assembly, which is typically located at C:\Program Files\Microsoft Office Servers\12.0\Bin.

   Note

   If you receive an error that Microsoft.SharePoint.ApplicationPages.dll is not found, run 'Gacutil /I Microsoft.SharePoint.ApplicationPages.dll' to register the Microsoft.SharePoint.ApplicationPages.dll. This DLL is typically located at C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\CONFIG\BIN.

2. Drag the XmlFormView control onto the ASPX page.

Next, you will add code to open a different form based on the value selected from the ASP.NET control.

1. Open the AddressUS.xsn form template and the AddressEurope.xsn form template, located at C:\2007 Office System Developer Resources\Code Samples\InfoPath2007SampleTrainingLabs, in design mode.

2. Publish the forms as site content types to the Form Templates folder.

   Hint: Use the same publishing steps that you used to publish the survey.xsn form template, except in the third step of the Publishing Wizard, click Site content type instead of Document library, and follow the screens to save the form templates in the Form Templates folder.

3. In the Properties pane, set the XsnLocation property of the XmlFormView to ~sitecollection/FormServerTemplates/AddressUS.xsn.

   Note

   When you set the XsnLocation and XmlLocation properties of the XmlFormView control, the location must correspond to the same site collection as the page. For the custom page created using these steps, it is the root site collection.

4. In the Properties pane, click Events.

5. Double-click the drop-down list box next to the Close event to create a new OnClose event handler named XmlFormView1_Close.

6. To switch back to the Design view, right-click ThanksForSurvey.aspx, and then click View Designer.

7. Drag a DropDownList control from the Standard section of the Toolbox onto the ASPX page.

8. Set the AutoPostBack property of the DropDownList to True.

9. Add an OnSelectedIndexChanged event handler to the DropDownList by double-clicking the control.

10. Set the items of the DropDownList by using the Design view or by adding the content to the Source view, as follows.

    <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
      <asp:ListItem 
        Value="~sitecollection/FormServerTemplates/addressUS.xsn">
        US
      </asp:ListItem>
      <asp:ListItem
        Value="~sitecollection/FormServerTemplates/addressEurope.xsn">
        Europe
      </asp:ListItem>
    </asp:DropDownList> 
    

11. Add code to the two script functions in the page to hide the DropDownList control when the XmlFormView1 control is closed, and to switch the XsnLocation property of the XmlFormView1 control when the DropDownList control is changed.

    Your code should be similar to the following example.

    <script runat="server">
    private void XmlFormView1_Close(object sender, EventArgs e)
    {
      DropDownList1.Visible = false;
    }
    
    protected void DropDownList1_SelectedIndexChanged(object
    sender, EventArgs e)
    {
      XmlFormView1.XsnLocation = DropDownList1.SelectedValue;
    }
    
    </script>
    

Next, you modify the link so the browser will navigate to a ThanksForSurvey.aspx page after the user submits a form.

1. Return to the Source view of the SurveyInvitation.htm page.

2. Modify the Source query parameter of the href to Source=/Myfolder/ThanksForSurvey.aspx, as follows.

   <a href="~sitecollection/Survey/Forms/template.xsn?OpenIn=browser&Source=/MyFolder/ThanksForSurvey.aspx">
   

   Expand table

   Note
   Be sure to use your own folder name if you did not use MyFolder.

3. Press CTRL+S to save the page.

1. Close Internet Explorer.

2. Right-click the source, or click SurveyInvitation.htm in Solution Explorer, and then select View in Browser.

3. Click Invitation to complete a survey.

   The browser will navigate to the following URL and display the survey form in the browser.

   http://...<yourSite>/_layouts/FormServer.aspx?XsnLocation=~sitecollection/Survey/forms/template.xsn&OpenIn=browser
   

4. Click Submit.

   The browser closes the form and opens the ThanksForSurvey.aspx page.

5. Click the US value or Europe value in the drop-down list. Corresponding versions of the address form are loaded in the XmlFormView control.

6. Click Submit to close the form.

   Expand table

   Note
   If you use F5 in Visual Studio to debug, and you receive a warning message that Web.config is not being set to debug, click OK. The debug flag is automatically switched on in the Web.config file.

In these exercises, you learned how to design a page that contains links that open an InfoPath form in InfoPath 2007 or in the browser. You learned how to add query parameters on the URL specified in the link to always open in the browser, even when InfoPath is available, and to move to a selected page after the form is submitted. You also learned how to create a custom ASPX page that hosts the XmlFormView control for loading InfoPath forms, and for interacting with other controls in the page.

In Lab 12: Using SharePoint Server Workflows with InfoPath 2007, you will learn how to start a workflow on an InfoPath 2007 form, and then complete tasks that are part of that workflow in InfoPath.

For more information about developing with InfoPath, see the following resources:

• InfoPath Developer Portal

• InfoPath Home page on Office Online

• InfoPath 2007 Resource Center

• Hosting the InfoPath 2007 Form Editing Environment in a Custom Web Form

• InfoPath Team Blog