Download - Creating Browser-Enabled InfoPath 2010 Forms

1

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.

2

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

3

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.

4

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:

5

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.

6

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.

http://server.sharepoint2010.com/

http://server/

7

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.

8

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

9

Last Name Text Box Data Tab

Field name: LastName

Display Tab



Address Text Box Data Tab

Field name: Address

Display Tab



Check Multi-line

Size

Height: 74 px

City Text Box Data Tab

Field name: City

Display Tab



State Text Box Data Tab

Field name: State

Display Tab



10

Zip Text Box Data Tab

Field name: Zip

Display Tab



Country Text Box Data Tab

Field name: Country

Display Tab



Phone Text Box Data Tab

Field name: Phone

Display Tab



Email Text Box Data Tab

Field name: Email

Display Tab



Web Text Box Data Tab

Field name: Web

Display Tab



11

Description Text Box Data Tab

Field name: Description

Display Tab



Check Multi-line

Size

Height: 90 px

Skills Text Box Data Tab

Field name: Skills

Display Tab



Check Multi-line

Size

Height: 90 px

Experience (Number of years) Text Box Data Tab

Field name: Experience

Display Tab



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.

12

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.

http://servername/libname

13

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.

14

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.

15

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.

16

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

17

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.

18

Figure 21: Test InfoPath form

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

19

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.

20

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:

21

http://walisystemsinc.com/sharepoint/art/ipforms/InfoPathFormCode.zip

This article was taken from the upcoming ebook “Installing 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 [email protected] or call +1 301 401 7291

http://walisystemsinc.com/sharepoint/art/ipforms/InfoPathFormCode.zip

http://blog.walisystemsinc.com/

http://feeds.feedburner.com/AllAboutSharepoint

mailto:[email protected]