Introduction to InfoPath Forms

InfoPath 2007 is included as part of Office 2007 (trail / test drive) and forms generated by InfoPath 2007 are great for gathering information from end users. With Microsoft Office SharePoint Server 2007 Enterprise Edition, you can also use the InfoPath Forms Services capabilities to deliver forms as Microsoft Office Outlook e-mail messages, Web browser forms, or forms for mobile devices. This 2nd part of the Beginners Guide to SharePoint 2007 Workflow Development, we will be showing you, step-by-step, how to create an InfoPath 2007 Browser-Enabled Form (aka browser-based form) that will gather information from the user. The information gathered in the InfoPath form will help drive the workflow that we will build later in the series.

Workflow Series for Beginners

This series has 6 steps that will help you follow the workflow development process from start to finish.

1. Workflow Development Scenario
2. Create an InfoPath Web-Based Form
3. Preparing your Visual Studio 2008 Workflow Project
4. Creating Workflow approval tasks
5. Create and Integrate an InfoPath Web-Based workflow task forms
6. How to deploy a SharePoint workflow solution

Agenda for Creating an InfoPath Web-Based Form

Here is the step-by-step process we plan on taking in this article:

1. Enable InfoPath Forms Services on SharePoint Server
2. Create InfoPath browser-enabled form
3. Add the Contact Selector to InfoPath 2007
4. Design an InfoPath form to gather data from an end user
5. Configure Design Checker to check InfoPath 2007 browser-enabled form compatibility
6. Publish InfoPath 2007 browser-enabled form to SharePoint 2007 site
7. Configure the document library for browser-enabled forms

I hope this breaks down the InfoPath form creation process. Now lets move on to the process, step-by-step.

1. Enable InfoPath Forms Services on SharePoint Server

In order to deploy browser-enabled form templates, you must have enabled and configured InfoPath Forms Services. You do not need to separately install InfoPath Forms Services because it is installed as a core component of Office SharePoint Server 2007 Enterprise Edition. To configure InfoPath Forms Services, follow these steps:

1. Browse to your SharePoint server's Central Administration site
2. In the navigation bar, click on Application Management tab
3. Under the InfoPath Forms Services section, click Configure InfoPath Form Services
4. Within the User Browser-enabled Form Templates section, enable (select check box) the following:
   • Allow users to browser-enable form templates - allow users to deploy browser-enabled form templates.
   • Render form templates that are browser-enabled by users - allow browser-enabled form templates deployed by users to be rendered in a Web browser
   As shown in this screenshot:

Now that we have enabled Microsoft Office SharePoint Server 2007 Enterprise Edition to allow end users to open InfoPath browser-enabled forms within a browser, we move on to create and setup InfoPath for browser-enabled forms. back to top

2. Create InfoPath browser-enabled form

We are now going to create an InfoPath 2007 browser-enabled form that will capture information from a user.

1. Launch InfoPath 2007
2. Under Design a form section (left side), select (Design a Form Template)
3. In the Design a new template screen, select the following
   • Select Form Template
   • Select Blank template
   • Select Enable browser-compatible features only
   As shown in this screenshot:

This will launch a blank InfoPath 2007 form. One more thing that we have to do is add the Contact Selector control to InfoPath 2007. back to top

3. Add the Contact Selector to InfoPath 2007

The Contact Selector control is an ActiveX control, included with Microsoft Office SharePoint Server 2007, that enables users to enter and validate contacts against users and groups on a server.

1. In the Design Tasks pane, click Controls
2. On the Controls pane, click Add or Remove Custom Controls
3. In the Add or Remove Custom Controls dialog box, click Add NOTE: The Add Custom Control Wizard appears.
4. Under Select a Control Type, select ActiveX Control. Click Next.
5. In the list of ActiveX controls, select Contact Selector. Click Next.
6. Under Specify Installation Options, select Don't include in a .cab file. Click Next.
7. Under Binding property, select value. Click Next.
8. For Field or group type, select Field or group (any data type).
9. Click Finish
10. Click Close
11. Click OK in the Add or Remove Custom Controls

The Contact Selector control is listed in the Custom section of the Controls pane.

Now we can create the InfoPath form with the contact selector custom control. back to top

4. Design an InfoPath form to gather data from an end user

With the above steps completed, we will now go into creating the actual InfoPath form. The scenario as defined in our previous post, Beginners Guide to SharePoint 2007 Workflow Development - Scenario, starts when an IT employee launches the web-based form and selects the employee who will be part of this workflow.  We're going to add in 4 data sources (3 input fields and one submit button) which will allow the IT employee to enter in information that brings in some context to this part of the process of gathering user information.

1. Employee Name - this button will use Contact Selector, a custom ActiveX control, to search current site's SharePoint User Profiles and allow the IT employee to select an employee
2. Equipment Borrowed - text field to allow the IT employee to enter in what equipment is to be borrowed by the employee
3. Office Location - this can be useful to capture so that the IT employee knows where this employee resides
4. Submit Button - clicking on the button will submit the information to the document library and close the form.

Let's start with changing the data source name for our form. This is an important step, that every InfoPath form developer should practice. It will save you alot of headaches afterwards.

1. In the Design Tasks pane, select Data Source
2. Right-click on myFields data source and select Properties NOTE: The Field or Group Properties dialog box launches.
3. Change the name from myFields to InitForm

Lets start with creating a table and enter in the labels for the information we will be collecting:

1. Click on the Insert menu
2. Select Layout Table...
3. Enter in the following information in the Insert Table dialog box
   • Number of Columns: 2
   • Number of Rows: 4
4. In each row, type in "Employee Name", "Equipment Borrowed", "Office Location" and "Submit Form"

This is how the table should look, if you followed the above instructions properly: Let's add the Contact selector to our data sources.

1. Right click on InitForm data source and click on Add...
2. Enter in the following information in the Add Field or Group dialog box
   • Name: gpContactSelector (case-sensitive)
   • Type: Group
   • Repeating: Not checked
3. Click Ok
4. Right click on gpContactSelector data source and click on Add...
5. Enter in the following information in the Add Field or Group dialog box
   • Name: Person (case-sensitive)
   • Type: Group
   • Repeating:  Checked
6. Click Ok

Let's move on and add three text fields under the gpContactSelector data source: Add DisplayName text field to the Person group:

1. Right click on Person data source and click on Add...
2. Enter in the following information in the Add Field or Group dialog box
   • Name: DisplayName (case-sensitive)
3. Click Ok

Add AccountId text field to the Person group:

1. Right click on Person data source and click on Add...
2. Enter in the following information in the Add Field or Group dialog box
   • Name: AccountId (case-sensitive)
3. Click Ok

Add AccountType text field to the Person group:

1. Right click on Person data source and click on Add...
2. Enter in the following information in the Add Field or Group dialog box
   • Name: AccountType (case-sensitive)
3. Click Ok

This how your data source's should look like: Drag the gpContactSelector data source to the column to the right of Employee Name. You will be presented with a drop down selection, select Contact Selector.

Now you should have the Contact Selector control next to Employee Name:

Let's move on and add two text fields under the InitForm data source: Add equipmentBorrowed text field to the InitForm group:

1. Right click on InitForm data source and click on Add...
2. Enter in the following information in the Add Field or Group dialog box
   • Name: equipmentBorrowed (case-sensitive)
3. Click Ok
4. Drag equipmentBorrowed

Add officeLocation text fields to the Person group:

1. Right click on InitForm data source and click on Add...
2. Enter in the following information in the Add Field or Group dialog box
   • Name: officeLocation (case-sensitive)
3. Click Ok

You should have the following data sources in your InfoPath form Data source pane:

Now we will drag each data source next to their associated column. Remove the extra text label's that are added when you drag each data source . Your form should look as the following:

Follow these steps to add the Submit button to your form:

1. In the Design Tasks pane, select Controls
2. Drag the Button control next to the Submit Form column.
3. Right click on the button control and select Button Properties...
4. Select Submit under the Action drop down
5. Select Submit Options... NOTE: This launches the Submit Options dialog box
6. Check off Allow users to submit this form
7. Select SharePoint document library from the Send form data to a single destination drop down selection list
8. Click Add... button right below the drop down NOTE: This launches the Connection Wizard dialog box
9. Type in http://litwaredemo/IT%20Requests/Forms/AllItems.aspx for the Document Library NOTE: We have not created the IT Requests Forms library yet but we will be later on in this walkthrough
10. Click on the formula button
11. Type in concat("Request for ", ) in the formula text box
12. Place your cursor before the closing bracket ) and click on the Insert Field or Group... button NOTE: The Select a Field or Group dialog box launches
13. Select DisplayName (under InitForm, gpContactSelector, Person) data source
14. Click Ok
15. Click Ok NOTE: The Formula text box should read: concat("Request for ", DisplayName)
16. Click Next > in the Data Connection Wizard dialog box
17. Click Finish
18. Click Advanced >>
19. Select Close the form in After submit drop down list selection
20. Click Ok in the Submit Options dialog box
21. Click Ok in the Buttom Properties dialog box

At this point we have created the InfoPath form and now in our next step we will make sure that the form is compatible for level 1 browsers. This is how your form should look:

back to top

5. Configure Design Checker to check InfoPath 2007 browser-enabled form compatibility

We will also walk you through on how to make sure that your form is browser-enabled using the Design Checker.

1. Click on Tools menu and select Form Options
2. Select Security and Trust category
3. Uncheck Automatically determine security level (recommended)
4. Select option Domain (the form can access content from the domain in which it is located)
5. Select Compatibility category
6. Specify the URL for your SharePoint server (in our example http://litwaredemo)
7. Click Ok

At this point InfoPath will connect to your SharePoint server and check the controls that are on your form currently and check if they are compatible. You should see the following screen, to notify you that your form has passed all compatibility checks against your SharePoint site's InfoPath Forms Service. Now that we have checked compatibility via the Design Checker, we now know for sure that end-users will not have issues with viewing this form in a level 1 browser (read cross-browser compatibility improvements) and that InfoPath Forms Services will not have a problem rendering this form for a level 1 browser. Let's move on to publishing the form to our SharePoint site. back to top

6. Publish InfoPath 2007 browser-enabled form to SharePoint 2007 site

Publishing the InfoPath form will require running the Publising Wizard, which will help you create the Forms document library and promote fields as document library columns that we can use in our SharePoint workflow. Here are the steps to help you with the final step in this walkthrough:

1. Click on the File... menu
2. Select Publish...
3. Click Ok if you are prompted with the following message: NOTE: Save the form on your desktop. The Publishing Wizard dialog box will launch
4. Select To a SharePoint Server with or without InfoPath Forms Services when asked Where do you want to publish the form template?
5. Type in http://litwaredemo in the Enter the location of your SharePoint or InfoPath Forms Services site text box NOTE: At this point InfoPath will check your site to make sure that you have InfoPath Form Services enabled on your SharePoint site
6. Click Next >
7. Click Next > NOTE: We are accepting the default values. Enable this form to be filled out by using a browser and Document Library is what we want to create or modify.
8. In the What do you want to do? prompt, select Create a new document library
9. Click Next >
10. Type in IT Requests in the Name text field
11. Click Next > NOTE: At this point we are in the Property Promotion screen.
12. Click on Add...
13. Select DisplayName in the Select a Field or Group dialog box
14. Change the Column Name to Employee
15. Click Ok
16. Click on Add...
17. Select equipmentBorrowed in the Select a Field or Group dialog box
18. Click Ok
19. Click on Add...
20. Select officeLocation in the Select a Field or Group dialog box
21. Click Ok NOTE: You should have the following fields promoted:
22. Click Next >
23. Click Publish
24. Click Close

At this point a new document library (IT Requests) has been created in our site (http://litwaredemo) and you should be able to access it by browsing to http://litwaredemo/IT%20Requests/Forms/AllItems.aspx Not only have you created and published the InfoPath 2007 browser-enabled form, you have also created a basic document library with the InfoPath browser-enabled form as the main document template. We have also promoted some fields from our InfoPath form, which we will use in our SharePoint workflow. Last but not least we will configure the document library to make sure that the forms are launched in a browser window. back to top

7. Configure the document library for browser-enabled forms

We have published the InfoPath browser-enabled form but we have not configured the document library to force use of InfoPath Forms Services so that the form is only displayed in our browser window. Follow these steps to force SharePoint to open the form in a browser window:

1. Browse to the IT Requests document library (http://litwaredemo/IT%20Requests/Forms/AllItems.aspx)
2. Select Forms Library settings under the Settings menu
3. Under the General Settings group, click on Advanced Settings
4. Check Display as a Web Page in the Browser-enabled Documents section
5. Click Ok

Go back to your IT Requests forms library and click on the New button. Your form should be loaded by InfoPath Forms Services.

We have created our initial InfoPath browser-based form that will be launched by an employee from the IT department.  The IT employee will be able to launch the form, use the contact selector to select an employee, enter in free form text to both Equipment Borrowed and Office Location and then click on Submit.  The Submit button will submit the form in to our IT Requests forms library and close the form after completion. back to top  

Next Steps

In our 3rd part of the Beginners Guide to SharePoint 2007 Workflow Development, we will be preparing your environment for SharePoint Workflow developement before we can get into SharePoint workflow development.  If you have not already, please read our Beginners Guide to SharePoint 2007 Workflow Development - Scenario. back to top 

Additional Resources:

Here are the resources that I used and found useful in my search for SharePoint workflow and InfoPath development:

• InfoPath 2007 Quick Reference Guide
• Arguments on why you should consider integrating InfoPath Forms in Office SharePoint Server 2007 solutions
• MVP Sahil walks you through on how to add a user input form to your SharePoint 2007 workflow
• MSDN walks you through Lab 12 on Using SharePoint Server Workflows with InfoPath 2007
• Creating Browser Enabled Forms With InfoPath 2007
• Use Visual Studio to create InfoPath forms… without code
• How To: Create a SharePoint Solution for an InfoPath Form is a great article
• For all your InfoPath development needs, check out InfoPath Developer Portal
• Learn How To: Add the Contact Selector to InfoPath 2007
• Introduction to using workflows with InfoPath forms
• Configure InfoPath Forms Services for Office SharePoint Server
• Configure session state for InfoPath Forms Services (Office SharePoint Server)
• Cross-browser compatibility improvements
• Read about SharePoint browser support from Microsoft
• InfoPath team blog will walk you through on how use the Contact Selector Control

back to top