Connectable Web Parts In InfoPath 2010

 

Enjoy free articles about InfoPath 2010 and SharePoint 2010 - Visit walisystemsinc.com

Click here to download PDF version of this article.
Click here to download InfoPath 2010 Template used in this article.

Creating Connectable Web Parts In InfoPath 2010

This is a very exciting topic. Have you ever created or attempted to create connected web parts in older versions of SharePoint, for example, version 2003 or 2007? You needed to have very good .NET programming skills in order to do that and also required good understanding of SharePoint object model. In SharePoint 2010, creating connected web parts is considerably easy. You still need to do .NET programming if you want to create connectable web parts in .NET but SharePoint offers another new interesting way of creating these web parts and that is by using InfoPath. SharePoint 2010 has introduced a new kind of web part called InfoPath Form Web Part. This web part allows you to load InfoPath form. Therefore, you don’t have to do any programming as far as web part is concerned. You just load the InfoPath form and form functionality can then be accessed through the web part. InfoPath form allows  you to promote fields to be used in connectable web parts. Just like you promote fields to be viewable in the SharePoint library view, you can now promote fields to be used in web parts.  Below we will create a browser-enabled InfoPath form and promote its fields to be used in connectable web parts. Later will see how this form can be used in InfoPath Form Web Part and how we can connect one web part to the other.

So the first goal is to create an InfoPath form that will be used as a connectable web part later. Please note that if you have already created InfoPath form and just want to see how it works as a connectable web part, please skip the sections below that show how to setup the environment and create InfoPath form. You can directly jump to the section that shows how to use InfoPath Form Web Part to show the InfoPath form. Important step that you should not miss is InfoPath publishing because this is where you  add fields you want to be exposed in the connectable web part.

Create Form Library

1.       First we will setup a form library in SharePoint. We will publish our form to this library. Open SharePoint site. Click Site Actions and select View All Site Content.

2.       Click Create.

3.       Select Library from the Filter By and select Form Library from the templates.

Figure 1: Create form library

4.       Enter UserRegistrationLib in the Name box and click Create.

5.       Click Library Settings in the ribbon.

6.       Click Advanced settings (under General Settings).

7.       In Content Types, select Yes in Allow management of content types.

Figure 2: Content Types

8.       In Folders, select No in Make “New Folder” command available?.

9.       Click Ok. The library has been created. Now we will create the form. We will return to this library for some more settings after the form has been created and deployed.

Create Form

10.   To create the form, open InfoPath designer (All Programs > Microsoft Office > Microsoft InfoPath Designer 2010)

11.   Our template will be stored in a SharePoint Form Library but first we need to check if everything is in place and InfoPath is able to connect to the SharePoint site. To check this, in a non-technical way, click SharePoint List from the available templates.

Figure 3: SharePoint List Template

12.   Enter the location of the SharePoint site and click Next.


 
Figure 4SharePoint Site Path

13.   You will be prompted for username and password. Please provide the credentials and click OK.

If  you have just setup your environment, there is a great chance that you will see your first hurdle in this step. You may see following error:


 
Figure 5: The operation could not be completed

If you don’t get an error, please continue with the next steps. To fix the issue, click Show Details button in the error message. Most probably, it will show you “Unable to connect to the SharePoint site.”. Now I am sure that there is nothing wrong with the site and you can access it in the browser. Here are some tips that will help you find the cause:

TIP 1

Check that you have created a site collection and the site you are trying to access is part of this site collection. It’s a bug that I have discussed in one of my blog entries. If you don’t create a site collection and try to access SharePoint through SharePoint designer or InfoPath, you get an error.

TIP 2

Check if you have enabled SharePoint enterprise feature in your site collection.

a.       Open Site Actions (in your SharePoint site) and select Site Settings.

Figure 6: Site Settings

b.      Click Site collection features under Site Collection Administration.

Figure 7: Site collection features

c.       Make sure feature SharePoint Server Enterprise Site Collection features is activated.

Figure 8 SharePoint Server Enterprise Site Collection Features

TIP 3

Tip 3 is to check your URL. How are you accessing your site? If you have setup a domain name, then accessing the site using FQDN will work in browser. Using same URL in InfoPath to connect to the site may throw error. Therefore, if your full site URL is like http://server.sharepoint2010.com then just use http://server in InfoPath and see if you can connect. In this URL, sharepoint2010.com is the domain name and server is your server name. Just using the server name will resolve your problem.

14.   Now that we are sure that we can connect to the SharePoint, cancel this operation. Click File tab and this time select (double-click) SharePoint Form Library. InfoPath designer will show a new form.

Figure 9: Default InfoPath Form Design

15.   To edit this form, click Click to add title and enter User Registration Form.

16.   Click first heading Click to add heading and enter Personal Information.

17.   To change field name, click it and enter a new name. Enter following field names/labels in the first section:

a.       First Name

b.      Last Name

c.       Address

d.      City

e.      State

f.        Zip

g.       Country

h.      Phone

i.         Email

j.        Web

18.   Click second heading Click to add heading and enter Professional Skills.

19.   Add following field names/labels in this second section:

a.       Description

b.      Skills

c.       Experience (Number of years)

20.   Now, it’s time to add controls. Add following controls from Controls section of the ribbon.

Figure 10: InfoPath controls

 

Figure 11: Control Propertie s

Field Name

Control

Properties

First Name

Text Box

Data Tab

Field name: FirstName

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Last Name

Text Box

Data Tab

Field name: LastName

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Address

Text Box

Data Tab

Field name: Address

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Check Multi-line

Size

Height: 74 px

City

Text Box

Data Tab

Field name: City

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

State

Text Box

Data Tab

Field name: State

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Zip

Text Box

Data Tab

Field name: Zip

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Country

Text Box

Data Tab

Field name: Country

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Phone

Text Box

Data Tab

Field name: Phone

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Email

Text Box

Data Tab

Field name: Email

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Web

Text Box

Data Tab

Field name: Web

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Description

Text Box

Data Tab

Field name: Description

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Check Multi-line

Size

Height: 90 px

Skills

Text Box

Data Tab

Field name: Skills

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Check Multi-line

Size

Height: 90 px

Experience (Number of years)

Text Box

Data Tab

Field name: Experience

Display Tab

Uncheck Enable spelling checker

Uncheck Enable AutoComplete

Check Multi-line

Size

Height: 90 px

21.   Add a button control at the bottom. Open button properties. In Action, select Submit. In Label, enter Submit and then click Submit Options. On Submit Options dialog box, check Allow users to submit this form.  Select Send form data to a single destination and select SharePoint document library from the drop down. Click Add button.



Figure 12
: Submit Options

22.   Enter Form library path name in Document Library. We created form library in the steps above and named it UserRegistrationLib. The path will be something like this http://servername/libname.

23.   Click File name button.

 Figure 13: File Name

24.   Click Insert Function button. Select concat from the functions and click Ok. Concat function will have three parameters. Delete first parameter and add “Form-“ in its place. Click on 2nd parameter and then select Insert Function button. Select now from the functions. Click OK. Click Verify Formula button to verify it. Click OK. This will  give a unique name to the form every time you submit the form.

Figure 14: Insert Formula

25.   Click Next and click Finish.

26.   Click OK twice to close the dialog boxes.

Publish the Form

27.   Click on Developer tab and then click Language button in the ribbon. This will open Form Options. Select Programming from the Category. Select C# in Form template code language. You can change the project location if you want.



Figure 15: Form Options

28.   Click Security and Trust in Category. Uncheck Automatically determine security level. Select Full Trust. Administrator –approved form cannot be published unless they have full trust. Check Sign this form template and click Create Certificate button. You will be shown a prompt. Click OK. This will create a self-signed certificate for you. This certificate will be valid for 30 days.



Figure 16: Form should have full trust and should be signed

29.   Click OK to close the options.

30.   Now it’s time to publish the form. Select File > Publish. Click SharePoint Server.

31.   Enter form library path and click Next.

32.   Make sure Enable this form to be filled out by using a browser is checked. Select Administrator- approved form template and click Next.

33.   Click Browse button and select a path on your drive to store the template file. It can be any folder on your drive. Enter File name for your form, for example, UserRegistrationForm and click Save. Later you will upload this form to the server. Click Next.

34.   There will be two sections. The top one allows you to add fields to be promoted. The bottom one allows you to add fields you want to be available as SharePoint Web Part connection parameters. First add two promoted fields. Click Add to add promoted fields. Select FirstName and click OK.

35.   Again click Add (in top section) to add second promoted field and select LastName and click OK.

36.   Now click Add in the bottom section to add web part parameters.



Figure 17: SharePoint Web Part Connection Parameters

37.   Select FirstName from fields. Select Input and output as parameter type. There are three types of parameters that you can select: Input, Output and Input and output.  We will use the third one (Input and output) because it will demonstrate the use of both input and output parameters. By selecting Input and output type for FirstName parameter, we will make this field available as both input and output parameter.



Figure 18: Parameter Type - Input and Output

38.   Click OK.

39.   Click Next and then click Publish.

40.   Click Close.

Upload Approved Form to Server

41.   Open central administration site. Click General Application Settings. Click Manage form templates under InfoPath Forms Services.



Figure 19: Manage Form Templates

42.   Click Upload form template.

43.   Click Browse and select the form that you published (saved on your disk).

44.   Click Upload.

45.   Click OK.

46.   Right-click published form and select Activate to a Site Collection.




Figure 20: Activate form to a site collection

47.   Make sure correct site collection is selected . You will have to worry about it if you have multiple site collections otherwise the default site collection will be selected automatically. Click OK.

Form Library Settings

48.   Now we will return to the form library and make some more changes in the settings. Open the library settings page. In Content Types, click Add from existing site content types.



Figure 21:
Add from existing site content types

49.   Select the published template from the list of available content types and click Add. Click OK.



Figure 22: Add Content Type

50.   In Content Types, click Form and in Settings, click Delete this content type. Click OK.

Testing the Form

51.   Open library. To open click library name in Libraries. Click Add document.



Figure 23: Test InfoPath Form

52.   The form will open in browser. Enter some data and click Submit  button in the form.



Figure 24: Form in action!

53.   Now next step is to try out this form in the web part. Open SharePoint site.  Click Site Actions and select View All Site Content.

54.   Click Create. Select Page from Filter types and then select Web Part Page from the type. Click Create. Enter InfoPathWebParts in Name box and click Create. Note: keep Site Assets selected in Document Library drop down.

55.   Click Add a Web Part in the Header zone.

56.   Select Forms in Categories. Select InfoPath Form Web Part in Web Parts. Click Add.

57.   Click Click here to open the tool pane.

58.   Select UserRegistrationLib or any other library that you want to use and has InfoPath form deployed to. If that library has an InfoPath content type, that will automatically show up in the Content Type drop down. Uncheck Show InfoPath Ribbon or toolbar.  Keep Send data to connected Web Parts when page loads checked. Click Ok.

59.   We will use the same web part twice, one as a provider and the other as a consumer. Remember we get data from any other provider web part. Similarly we can send data to any other consumer web part. Click Add a Web Part in Footer zone.

60.   Select Forms in Categories. Select InfoPath Form Web Part in Web Parts. Click Add.

61.   Click Click here to open the tool pane.

62.   Select UserRegistrationLib or any other library that you want to use and has InfoPath form deployed to. If that library has an InfoPath content type, that will automatically show up in the Content Type drop down. Uncheck Show InfoPath Ribbon or toolbar.  Keep Send data to connected Web Parts when page loads checked. Click Ok.

63.   Now you have two web parts on this page. To test it, enter a value in First Name (in the top web part, the provider).

64.   Scroll down. There is a small arrow at the right corner in the row that has the web part name. Click this small arrow. It will open a menu. Select Connections. Select Get Data From. Select the provider web part.

 



Figure 25: Configure Web Part

65.   Configure Connection dialog box will appear. Temporarily allow pop-ups if they are blocked otherwise dialog box will not open. Dialog box will allow you to select provider field name and consumer field name. We promoted just one field First Name therefore this will be the only option in the drop down  but had we promoted more fields, drop downs would have shown all fields.



Figure 26: Provider and Consumer Fields

66.   First Name field in the consumer web part will get its value from the First Name field of the provider web part. The other way is to open same menu in the provider web part and select Connections > Send Data To > Consumer Web Part. This will send the data from First Name to the First Name field in the consumer web part.

So, you saw that creating connectable web parts has become a breeze with InfoPath 2010.