Sorting Repeating Tables in Order Forms Programmatically with InfoPath 2010

  • Article

Summary:  Learn how to add managed code to sort the table in an InfoPath browser form, and then publish it back to SharePoint Server 2010 as a sandboxed solution.

Applies to: InfoPath 2010 | Office 2010 | SharePoint Server 2010 | Visual Studio Tools for Microsoft Office

In this article
Introduction
Part 1 ─ Setting up the InfoPath Code Lab Site
Part 2 ─ Opening the Form in InfoPath and Adding Buttons for Sorting
Part 3 ─ Adding Code to the Form to Sort the Table When the Buttons Are Clicked
Part 4 ─ Publishing the Form and Using It in the Browser
Conclusion
Additional Resources

Contents

Click to grab code  Download code

Introduction

Microsoft InfoPath 2010 makes designing and publishing electronic forms easier than ever. In InfoPath 2010, you can publish forms with code directly to SharePoint as sandboxed solutions. In addition, you can publish without requiring the farm administrator to approve and upload your form. These forms run in a sandboxed environment which protects other resources on the SharePoint Server from malicious code.

The following technologies are highlighted in this lab:

  • InfoPath 2010

  • SharePoint Server 2010

  • Sandboxed Solutions

Lab Objectives

After completing this lab, you will know how to:

  • Add managed code to your form by using Visual Studio Tools for Applications.

  • Add code to a button clicked event handler that sorts the data in a repeating table.

  • Publish the form as a sandboxed solution to SharePoint.

Scenario

You currently own an InfoPath browser form through which a user can create large orders. Users have been commenting that they have difficulty managing the data because they cannot sort the table. You will add managed code to the form to sort the repeating table, and then publish the form back to SharePoint as a sandboxed solution.

Part 1 ─ Setting up the InfoPath Code Lab Site

Before you can start the lab, you must set up the InfoPath Code Lab site that contains the lists and other resources you need to complete the lab exercises. To set up the lab, download the InfoPath_Code_Lab.wsp solution package that contains the InfoPath Code Lab site template solution. Then, upload the WSP file to your SharePoint Server 2010 server. Finally, create a new site based on the solution as described in the following steps.

To upload and activate the WSP file to a site collection

  1. On the top-level site of the site collection, on the Site Actions menu, click Site Settings.

  2. On the Site Settings page, in the Galleries section, click Solutions.

  3. On the Solutions tab of the ribbon, in the New group, click Upload Solution.

  4. In the Upload Document dialog box, click Browse.

  5. In the Choose File to Upload dialog box, locate the InfoPath_Code_Lab.wsp file that you downloaded, select the file, and then click Open.

  6. In the Upload Document dialog box, click OK.

    The Solution Gallery – Activate Solution dialog box appears.

  7. In the Solution Gallery – Activate Solution dialog box, click Activate.

    Activating the solution makes the site template solution available to create sites in this site collection. The name of the WSP file that you uploaded now appears in the Solutions Gallery with Status set to Activated.

In the next procedure, you will create a new site based on the InfoPath Code Lab site template solution.

To create a new site based on the site template solution

  1. Open the top-level site in your site collection, and on the Site Actions menu, click New Site.

  2. In the Create dialog box, under Filter By, click Blank & Custom.

  3. Click the InfoPath List Lab site.

  4. In the Title box, type InfoPath Code Lab.

  5. In the URL name box, type InfoPath Code Lab, and then click Create.

    This will create a new site populated with the items required to perform the lab. The URL for the site will be http://<site collection>/InfoPath%20Code%20Lab/.

Part 2 ─ Opening the Form in InfoPath and Adding Buttons for Sorting

In this part of the lab, you will open the form in the InfoPath Designer and add buttons to each heading in the repeating table. The user will be able to click the buttons you add to sort the table. In the next part of this lab, you will add the code behind the buttons to enable the sorting.

First, familiarize yourself with the form you will modify.

To familiarize yourself with the form

  1. Navigate to http://<site collection>/InfoPath%20Code%20Lab/ in Internet Explorer.

  2. Select Orders in the Libraries list.

  3. Open the demo form by clicking the name of the document in the library.

    The form is fairly simple. It contains basic information about the order and a table with sizing information. Each row in the table represents one uniform that will be ordered for one person.

After you have familiarized yourself with the form, you can open the template the form is based on.

To open the Orders form template in the InfoPath Designer 2010

  1. Navigate to http://<site collection>/InfoPath%20Code%20Lab/ in Internet Explorer.

  2. In the Libraries list, click Lab Resources.

  3. In the Lab Resources library, click the check box next to the Orders form, click Download a Copy on the Documents tab of the ribbon, and then save a local copy of the Orders.xsn form template file.

  4. Repeat Step 3 to download local copies of the button-hover.png, button-regular.png, and sortingCode.txt files from the Lab Resources library.

  5. Start the InfoPath Designer from the Start menu, click Open on the File tab, and then open the copy of the Orders.xsn file that you saved in Step 3.

Now that you have a copy of the form, you can add the buttons. Once you have added the buttons, you can begin coding.

To add picture buttons for sorting the table

  1. In the heading row of the Sizing Information table, place your cursor in the cell to the right of the Person heading.

  2. On the Home tab, add a Picture Button control from the Controls group.

  3. With the picture button selected, click the Control Tools Properties tab in the ribbon, click Picture, and then specify the local copy of the button-regular.png file that you saved previously.

  4. Set the hover picture for the button by clicking Hover Picture in the ribbon, and then specify the local copy of button-hover.png that you saved previously.

  5. Copy and paste the picture button into the cells to the right of the Gender and Size headings.

When you have completed these steps, your form should resemble Figure 1.

Figure 1. Adding picture buttons to the form

Picture buttons on the form

Part 3 ─ Adding Code to the Form to Sort the Table When the Buttons Are Clicked

In this part of the lab, you will add code to the form that can sort the table by any of the columns. You will then hook your code to the buttons you created in the previous step.

To open Visual Studio Tools for Applications

  1. On the Developer tab in the ribbon, click Language.

  2. Confirm that the programming language is set to C#, and then click OK.

  3. On the Developer tab, click Code Editor to start Visual Studio Tools for Applications. This is the integrated development environment (IDE) that you use to write code in your InfoPath form.

Use the following steps to add code to the form to sort the table.

To add the code to the form to sort the table

  1. Add the following using statement at the top of the code in the Code Editor.

    using System.Collections;

  2. Copy and paste the code from your local copy of the sortingCode.txt file into the Code Editor underneath the InternalStartup() method (after the closing curly brace of that method).

    Next, you will hook the buttons in the form up to the code.

  3. Back in the InfoPath Designer, select the button that will sort the Person column.

  4. On the Control Tools Properties tab in the ribbon, click Custom Code.

    The Code Editor will come back into focus and create an event handler function your form calls when the user clicks the button.

  5. Paste the following line of code into the event handler function.

    SortTable("/my:myFields/my:sizing", 2);

    The argument that is passed as the first parameter of the SortTable function (xpathToSort) is an XPath expression. The XPath expression returns the group that contains all three columns in the table. The argument that is passed as the second parameter (columnToSortBy) specifies the index of the column to sort by. Be aware that the form displays Person data in the first column. However, you must specify columnToSortBy as the third column (which is specified as 2 using a 0-based index.) You must specify the third column because the third column corresponds to the structure of the XML fragment the SortTable function returns from the underlying XML data source of the form.

  6. Repeat Steps 4 and 5 for the buttons next to the Gender and Size headings. Leave the value of the SortTablexpathToSort parameter as "/my:myFields/my:sizing" for both buttons. For the Gender button pass columnToSortBy as 0, and for the Size button pass columnToSortBy as 1.

    When you have completed these steps, the code for the buttons on the form should resemble Figure 2.

    Figure 2. Button code to call the SortTable function

    Button code to call the SortTable function

Tip

You can view the underlying data source XML structure of the form, which determines the index value to pass for the columnToSortBy parameter of the SortTable function. To do so, open the form in InfoPath Designer, and then click Show Fields on the Data tab of the ribbon. InfoPath displays the data structure in the Fields task pane on the right side of the screen. Expand the orderdetails group to see the three fields (columns) for each row of the sizing table. InfoPath displays the rows in the order that the rows are defined in the data source. Note that the orderfor group is the third field in the orderdetails group. The orderfor group defines the structure of the data in the Person column, and is bound to the Person/Group Picker control in that column.

Part 4 ─ Publishing the Form and Using It in the Browser

In this part of the lab, you will publish the form back to SharePoint as a sandboxed solution, and then open the form in Internet Explorer to test the functionality that you just added.

Note

To publish a form template that contains code as a sandboxed solution, you must meet the following requirements:

  • The Sandboxed code service must be enabled on the server or server farm.

  • You must be a site collection administrator on the site collection that you are publishing to.

  • The Security Level of your form template must be set to Domain.

  • Your form template must be created in InfoPath 2010 and saved to the InfoPath 2010 form template type.

  • If your form template was originally created in InfoPath 2007, you must open the form in InfoPath 2010. Then, you must upgrade the form code to use the InfoPath 2010 object model. To upgrade the code, on the Developer tab, click Language, and then click Upgrade OM.

To publish your form

  1. Click the File tab on the ribbon, and then click Publish.

  2. Click SharePoint Server.

  3. On the first page of the Publishing Wizard, enter the URL to Orders library as http://<site collection>/InfoPath Code Lab/Orders/, and then click Next.

  4. Confirm that the Enable this form to be filled out by using a browser check box and the Form Library option are both selected, and then click Next.

  5. Select Update the form template in an existing form library, select the Orders library, and then click Next.

  6. Click Next, and then click Publish on the last page of the wizard.

After you have published the form, you can fill out the form on SharePoint.

To fill out the form on SharePoint

  1. Navigate to http://<site collection>/InfoPath%20Code%20Lab/ in Internet Explorer.

  2. In the Libraries list, click Orders.

  3. Click Add document to add a new form.

  4. Be aware that the sorting buttons that you added now appear in the form. Add some items in the Sizing Information table, and then use the buttons to sort the data by name, gender, or size.

    Your completed form should resemble the one shown in Figure 3.

    Figure 3. Completed Orders form

    Completed Orders form

The following features make this solution a sandboxed solution:

  • Your code will be run in a sandboxed environment.

  • Any site collection administrator can publish sandboxed solutions if the service is enabled and there is available quota.

  • To monitor resource usage, go to the solution gallery. To do that, open the Home page of your site collection, click Site Settings on the Site Actions menu, and then click Solutions under the Galleries heading.

Conclusion

In this lab, you learned how to sort data in a repeating table, and were introduced to the new SharePoint sandboxed solution support in InfoPath 2010.

Additional Resources