Creating Simple Web Part Mashups with InfoPath 2010

  • Article

Summary:  Learn how to create a simple Web Part mashup on SharePoint Server 2010 with InfoPath 2010 and the InfoPath Form Web Part.

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 Mashup Lab Site
Part 2 ─ Creating the Web Part Page
Part 3 ─ Connecting the Web Parts using Part-to-Part Connections
Conclusion
Additional Resources

Contents

Click to grab code  Download code

Introduction

Microsoft InfoPath 2010 makes designing and publishing electronic forms easier than ever. InfoPath enables you to create powerful, interactive forms without writing any code. By using only a few clicks, an Office user can customize SharePoint list forms, add custom layout elements, add business rules to validate the data.

InfoPath also has better integration with SharePoint than even before. Specifically, you can host forms in a Web Part inside any Web Part page. The form can then use the connections between the Web Parts to interact with other components on the page.

The following technologies are highlighted in this lab:

  • InfoPath 2010

  • SharePoint Server 2010

  • SharePoint Workspace 2010

Lab Objectives

After completing this lab, you will know how to:

  • Create a new SharePoint Web Part Page in the browser

  • Add list view and InfoPath Form Web Parts to the page

  • Create connections between the Web Parts

Scenario

A recruiting team at Contoso manages interview candidates in a SharePoint list with a custom InfoPath form. The team wants to create a portal to review candidates. Specifically, the team wants to have a page to view all of the open positions as well as view the candidates that have applied for the open positions. This lab will show how to create a SharePoint portal that contains both views.

This lab builds on the form described in the lab Customizing SharePoint List Forms in InfoPath 2010.

Part 1 ─ Setting up the InfoPath Mashup Lab Site

Before you start the lab, set up the InfoPath Mashup Lab site that contains the lists and other resources required to complete the lab exercises. To do that, download the InfoPath_Mashup_Lab.wsp solution package that contains the InfoPath Mashup 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_Mashup_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 will appear).

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

Activating a 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 Mashup 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 Mashup Lab site.

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

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

This will create a new site populated with the lists and items required to perform the lab. The URL for the site will be http://<site collection>/InfoPath%20Mashup%20Lab/. You can now move on to part 2 of this tutorial, where you create the Web Part page.

Part 2 ─ Creating the Web Part Page

In this part of the lab, you will create a Web Part page and add Web Parts to the page. The first step is to create the new Web Part page.

To navigate to the lab site and create a new Web Part page

  1. In Internet Explorer, navigate to http://<site collection>/InfoPath%20Mashup%20Lab/.

  2. On the Site Actions menu, click More Options.

  3. In the Filter By list, click Page, and then select Web Part Page.

  4. Click Create.

  5. Name the page Candidate Portal, and in the Choose a Layout Template list, select the Header, Left Column, Body layout.

  6. Click Create.

You now have a Web Part page to use to create your portal. Now, add the list view.

To add the list view Web Parts to the page

  1. In the Left Column section of the page, click Add a Web Part.

  2. In the Categories list, click List and Libraries, select Positions in the Web Parts list, and then click Add.

  3. Repeat Steps 1 and 2 for the Interview Candidates list to display both the positions and candidates list in the left column.

  4. Drag and drop the Interview Candidates Web Part under the Positions Web Part.

Now that you have added the Web Parts for the lists, you can simplify the views by removing columns that are not needed in the portal.

To remove columns from the view

  1. Scroll to the far right of the page. On the Positions Web Part, click the arrow that appears when you rest the mouse pointer on the heading, and then click Edit Web Part as shown in Figure 1.

    Figure 1. Editing the Positions Web Part

    Edit Web Part feature

  2. In the Web Part Properties task pane that appears on the right side of the page, click Edit the current view.

  3. Clear the check boxes for all the columns except:

    • Title

    • Location

    • Required Date

  4. At the bottom of the page, click OK.

  5. Repeat Steps 5 through 8 for the Interview Candidates Web Part and keep the following columns:

    • First Name

    • Last Name

    • Offer

    • Total Score

Now that you have added the list view to the page and removed the unnecessary columns, add the InfoPath form Web Part.

To add the InfoPath Form Web Part to the page

  1. On the Page tab, click Edit Page.

  2. In the Body section of the page, click Add a Web Part.

  3. In the Categories list, click Forms, select InfoPath Form Web Part in the Web Parts list, and then click Add.

  4. In the newly-added Web Part, click Click here to open the tool pane next to the InfoPath form icon.

  5. Select Interview Candidates from the List or Library list.

  6. Expand the Appearance section of the Web Part task pane and change the title to Candidate Details.

  7. Click OK.

  8. On the Page tab, click Stop Editing.

At this point, your page should resemble Figure 2.

Figure 2. The Candidate Portal Web Part Page

Candidate portal Web Part page

Part 3 ─ Connecting the Web Parts using Part-to-Part Connections

In this part of the lab, you will add a connection to filter the candidates list based on the selected position. You will also add a connection to show the selected candidate in the InfoPath Form Web Part.

To filter the Interview Candidates list based on the selected position

  1. On the Page tab, click Edit Page.

  2. On the Interview Candidates Web Part, click the arrow that appears when you rest the mouse pointer over the heading, point to Connections, point to Get Filter Values From, and then click Positions as shown in Figure 3.

    Figure 3. Setting the filter for the Interview Candidates Web Part

    Filter for the Candidates list

  3. In the Configure Connection dialog box, set the Provider Field Name to Title, and set the Consumer Field Name to Position.

  4. Click Finish.

  5. On the Page tab, click Stop editing.

When you click the Select icon icon next to the title of a position in the Positions list, the Interview Candidates list is filtered to show only candidates for that position. Now, you can add a connection that shows the form for the selected candidate.

To show the form for the selected candidate

  1. On the Page tab, click Edit Page.

  2. On the Candidate Details Web Part, click the arrow that appears when you rest the mouse pointer over the heading, point to Connections, point to Get Form From, and then click Interview Candidates as shown in Figure 4.

    Figure 4. Setting the form to display in the Candidate Details Web Part

    Form for the Candidate Details Web Part

  3. On the Page tab, click Stop Editing.

Now, when you click the Select icon icon next to the name of a candidate in the Interview Candidates list, the details for that candidate appear in the InfoPath Form Web Part.

Conclusion

In this lab, you learned how to create a simple mashup on SharePoint Server 2010 with InfoPath 2010 and the InfoPath Form Web Part.

Additional Resources