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.
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
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
10
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
11
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.
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.
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