Creating Browser-Enabled InfoPath 2010 Forms

InfoPath allows users to create complex forms with great ease. It increases productivity. Users can now create sophisticated forms that can be opened in the desktop client software or in the browser. InfoPath provides users the ability to create XML based electronic forms. InfoPath is an excellent data gathering tool. InfoPath 2010 comes with two flavors: InfoPath Designer and InfoPath Filler. As the name suggests, Filler is used to fill out the forms whereas Designer is the tool that you use to create forms.

Below you will see how you can create browser-enabled InfoPath forms and deploy them in SharePoint.  Purpose of this article is to show you how to overcome the hurdles that you find during the whole process. On the paper, it all seems very simple but is it really that simple? If you have done some development with the modern day tools and technologies, you will agree that things are not as simple as they seem. You don?t have to be a master of everything but you have to have some basic skills in all technologies that are inter-related. In this case, you need to have information about InfoPath, SharePoint development, SharePoint configuration, SharePoint Administration, setup of servers and services, etc etc. So, below I will show you how to resolve the most common problems that you face when you start developing InfoPath applications for the first time.

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 4: SharePoint 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 Properties

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.  Click Add to add promoted fields. Select FirstName and click OK.

35.  Again click Add and select LastName and click OK.

36.  Click Next and then click Publish.

37.  Click Close.

 

Upload Approved Form to Server

 

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



Figure 17: Manage form templates

39.  Click Upload form template.

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

41.  Click Upload.

42.  Click OK.

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

Figure 18: Activate form to a Site Collection

44.  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

 

45.  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 19: Add from existing site content types

 

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

Figure 20: Add content type

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

 

Testing the Form

 

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

 

Figure 21: Test InfoPath form

 

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

Figure 22: InfoPath form in action

 

50.  Form will be saved in the library. Form name will consist of "Form-" string and current time. This way form name will be unique every time  you submit the form.  This can be changed to have a different form name. For example, you may want to use a unique ID to append to the form name instead of using current time. This can be done using different techniques. Some people use a workflow to generate a unique ID. This can also be achieved by storing a seed number in a SharePoint list and using this unique number in the form name.

Figure 23: Form library showing submitted form

51.  You will notice that the form shows its own ribbon at the top. This can be disabled. If you use buttons in the form then its better to disable the buttons in the ribbon to save users from confusion. OR you can use the ribbon buttons instead of adding new buttons to the form. If you want buttons other than Submit, Save, Close, etc then you will have to add them to the form. To disable the ribbon buttons, in InfoPath designer,  click Developer tab and select Language  button.  This will open Form Options. Select Web Browser in Category. If you want to remove the ribbon, uncheck Show InfoPath commands in Ribbon or toolbar. You can choose where to show the ribbon: top, bottom or both. If you chose to show the ribbon, you can select which buttons to show in the ribbon. Check the ones you want to show and uncheck those that you don?t want to show. Click Ok and re-publish the form to see the changes.

Figure 24: Hide/Show ribbon commands

 Download InfoPath template and published form from the following link:
http://walisystemsinc.com/sharepoint/art/ipforms/InfoPathFormCode.zip

This article was taken from the upcoming ebook "sInstalling and Configuring SharePoint 2010 2nd Edition". The 2nd edition has updated information about installing and configuring SharePoint 2010 and has new bonus chapters. To download your free copy, visit our blog soon. You can subscribe to our blog to stay up-to-date.

Blog: http://blog.walisystemsinc.com

Subscribe via Feedburner: http://feeds.feedburner.com/AllAboutSharepoint

To hire a SharePoint/InfoPath developer, contact us at info@walisystemsinc.com or call +1 301 401 7291