Hands-On Lab
InfoPath and Forms Services
Lab version: 1.0.0
Last updated: 3/29/2011
Contents
Overview 3
Exercise 1: Creating List Forms in InfoPath 4
Task 1 – Open the list form in InfoPath 4
Task 2 – Update the visual appearance of the form 5
Task 3 – Add behavior to the form and publish it to the SharePoint list 9
Exercise 1 Verification 12
Exercise 2: Using the InfoPath Web Part 13
Task 1 – Add the Web Parts to the site’s main page 13
Task 2 – Connect the list and the InfoPath Form Web Part 15
Exercise 2 Verification 16
Exercise 3: InfoPath and Forms Libraries 17
Task 1 – Connect an existing InfoPath Form to external data 17
Task 2 – Add a View to the InfoPath form containing a Submit button 20
Task 3 – Publish the form to the Timesheets Form Library 23
Task 4 – Use the Timesheet Form in a Web Part 25
Exercise 3 Verification 26
Summary 26
Overview
In these lab exercises, you will use InfoPath to define custom forms to aid in the entry of time tracking data for Contoso Corporation. This system will use rich InfoPath forms to manage entry of employees and timesheet data. To provide a complete view of the system, the site’s main page contains web parts to provide contextual information to the user.
Objectives
In this lab you will:
· Learn to use InfoPath to define a list’s entry forms
· Learn to use web parts to host and connect InfoPath forms
· Learn to write custom code to extend the capabilities of InfoPath forms
System Requirements
This lab assumes that you have SharePoint Server installed in a test environment. For guidance on how to setup SharePoint Server see http://msdn.microsoft.com/en-us/library/ee554869(office.14).aspx. Note that any URL referred to in this lab must be adjusted for use with your local setup. You must have the following items to complete this lab:
· Microsoft® Windows® Vista SP1 or Microsoft® Windows Server 2008 (64-bit)
· Microsoft® SharePoint Server 2010 (64-bit)
· Microsoft® Office Professional Plus 2010 (32-bit or 64-bit)
· Microsoft® Visual Studio 2010
Setup
You must perform the following steps to prepare your computer for this lab. This consists primarily of creating a SharePoint site collection at http://intranet.contoso.com/sites/InfoPath and installing the code snippets for this lab.
1. Run the command file Setup.bat located at C:\Office2010DeveloperTrainingKit\Labs\InfoPath\Source\.
Exercises
This Hands-On Lab is comprised of the following exercises:
1. Creating list forms in InfoPath
2. Using the InfoPath Web Part
3. InfoPath and Forms Libraries
Estimated time to complete this lab: 60 minutes.
Starting Materials
This Hands-On Lab includes the following starting materials.
· InfoPath Templates. The lab provides the following InfoPath Templates that you can use as starting point for the exercises. The lab instructions assume that you installed the training kit to the default location, C:\Office2010DeveloperTrainingKit\.
◦ C:\Office2010DeveloperTrainingKit\Labs\InfoPath\Source\Starter\Template.xsn: This is a starting InfoPath form used in Exercise 3.
Note: Inside the lab’s Source folder, you will find a Solution folder containing an end solution with the completed lab exercise.
Exercise 1: Creating List Forms in InfoPath
In this exercise you will create a new form for the Employees list using InfoPath. This new form will focus on providing a form that is organized to better represent the structure of Employee information.
Task 1 – Open the list form in InfoPath
In this first task you will enable Forms Services on the SharePoint site and open the Employees list form in InfoPath
1. Enable the SharePoint Server Enterprise Site Collection features to enable Forms Services
a. In Internet Explorer navigate to http://intranet.contoso.com/sites/InfoPath
b. In the Site Actions menu click Site Settings
c. In the Site Collection Administration section, click the Site collection features link
d. Locate the SharePoint Server Enterprise Site Collection feature in the list
e. Click the Activate button to enable the feature
2. Open the Employees list form in InfoPath
a. Navigate to the Employees list using the navigation bar on the left of the page
b. Switch to the List ribbon using the link at the top of the page
c. Click the Customize Form button in the Employees List ribbon group
Note: This will automatically open InfoPath and load the form for the Employees list
Figure 1
Default Employees List Form
Task 2 – Update the visual appearance of the form
In this task, you will be updating the look and feel of the form.
1. Delete the previous form content
a. Select all content on the page
b. Press the delete key
2. Apply a page layout and add the layout tables to the form
a. Place the cursor at the top of the page
b. In the Page Design ribbon tab, click Page Layout Templates and choose the Title Only option
Figure 2
InfoPath Page Layout Template
c. Place the cursor on the Add tables text
d. In the Insert ribbon tab click the drop down arrow on the Tables group and select a 4 column table with no header
Figure 3
Insert 4 Column Table
e. Add a second table with 2 columns and a sub header
f. Add a third table with 4 columns and a sub header
g. Delete the third row from each of the table by selecting all cells can pressing the delete key
Figure 4
Empty Layout Complete
3. Populate the top section of the form with the employee’s name and title
a. Locate the upper table that has 4 columns and two rows
b. Select the right three cells on the second row, right click them and click Merge Cells
c. Drag the First Name item from the Fields task pane on to the first two cells of the first row
Note: make sure both cells are selected to indicate to InfoPath that the left cell should contain the label and the right cell should contain the control
Figure 5
Dragging Fields to the Layout
d. Drag the Last Name field into the rightmost two cells of the first row
e. Drag the Title field to the bottom row
Figure 6
First Section Complete
4. Populate the Contact information section of the form
a. Click the first Click to add subheading item and enter Contact Info
b. Drag the cell dividers in the table to make the first column about 25% of the total width
c. Drag the Phone field into the two cells on the top row
d. Drag the Email field into the two cells on the bottom row
Figure 7
Contact Info Complete
5. Populate the General Information section of the form
a. Click the remaining Click to add subheading item and enter General Information
b. Drag the Department Name field into the left two cells on the first row
c. Drag the Hire Date field into the right two cells on the first row
d. Drag the Salaried field into the left two cells on the bottom row
e. Drag the Base Rate field into the right two cells on the bottom row
6. Apply a new Theme to the form
a. Click the Themes drop down button in the Page Design ribbon tab
b. Choose a theme to apply to the form
Figure 9
Employee Form with a Theme
Task 3 – Add behavior to the form and publish it to the SharePoint list
In this task, you will publish the Employees list form back to SharePoint.
1. Add a calculated value in the form header that will display the First Name and Last Name
a. Click the Click to add title text at the top of the form
b. Locate the Controls group in the Home tab group
c. Click the drop down in the Controls Group and click the Calculated Value item
Figure 10
Calculated Value Control
d. In the Insert Calculated Value dialog click the Fx button
Figure 11
Insert Calculated Value Dialog
e. Click the Insert Function button
f. Chose the Text option in the Categories list and select the concat function
g. Click OK to close the Insert Function dialog
Figure 12
Insert Formula Dialog
h. Double click the first double click to insert field
i. Choose First Name and click OK
j. Single click the second link and type “ “
k. Double click the last double click to insert field and select Last Name
Figure 13
Completed Full Name Formula
l. Click OK to complete the formula then click OK to complete the control
2. Define rules to set disable the Base Rate control when the Salaried check box is set
a. Right click the Base Rate text box and choose Rules -> Manage Rules to show the Rules task pane
b. In the Rules task pane click the New button and select Formatting
c. Click the None link in the Condition section
Figure 14
Base Rate Disabled Rule
d. In the Condition drop down select Salaried in the first drop down list
e. In the last drop down choose TRUE and click OK
Figure 15
Salaried is true condition
f. In the Rules task pane, check the Disable this control check box
3. Define a default value for the EmployeeID field
a. In the Fields task pane, right click EmployeeID and select Properties
b. Enter 0 in the Default Value text box
c. Click OK to close the dialog
4. Publish the form using the Info tab in BackStage
a. Click the Backstage button (labeled as File)
b. In the Info tab, click the Quick Publish button
Note: You can also publish using the Quick Publish button on the Quick Access Toolbar or in the Publish tab in BackStage and choosing SharePoint List
Exercise 1 Verification
In order to verify that you have correctly performed all steps of Exercise 1, proceed as follows:
Test the Form
Test your form to verify it is use to add or edit items in the Employees list.
1. Load the Employees list in the browser
a. In Internet Explorer navigate to http://intranet.contoso.com/sites/InfoPath
b. Click the Employees link in the left side navigation tree
c. On the employees page click the New Item button in the Items ribbon tab to load the custom form
Figure 16
New Employee Form
d. Create a new employee and submit it using the custom form
2. Edit an existing employee using the custom InfoPath form
a. Click the first employee’s employee id to load a read only form
b. Click Edit item to see the edit view of the InfoPath form
Figure 17
Edit Employee Form
Exercise 2: Using the InfoPath Web Part
In this exercise you will use the Employees list form created in the last exercise to create a main page for the site using Web Parts and Web Part Connections.
Task 1 – Add the Web Parts to the site’s main page
In this task, you will place two web parts on the main page. The first is a list of all Employees using the list web part and the second is a read-only version of the InfoPath form created in the first exercise.
1. Add the List web part to the site’s main page
a. In Internet Explorer navigate to http://intranet.contoso.com/sites/InfoPath
b. In the Page ribbon tab click the Edit page button
c. In the left hand side web part zone, click the Add a Web Part link
d. In the Categories pane, select the Lists and Libraries category
e. Choose the Employees web part and click the Add button
Figure 18
Add List Web Part
f. Enter the web parts edit menu by clicking the web part’s drop down menu and clicking Edit Web Part
g. In the Edit pane choose a Selected View of Summary
h. Choose a Toolbar Type of No Toolbar
i. Click OK to close the Edit pane
2. Add the InfoPath Form Web Part to the right hand side web part zone
a. In the right hand side web part zone, click the Add a Web Part link
b. In the Categories pane, select the Forms category
c. Choose the InfoPath Form Web Part and click the Add button
d. In the new web part click the Click here to open the tool pane link
e. In the List or Library drop down, choose the Employees list
f. Check the Display a read-only form checkbox
g. Uncheck the Show InfoPath Ribbon or toolbar checkbox
Figure 19
Edit InfoPath Web Part
h. In the Appearance section, choose None in the Chrome Type drop down list
i. Click OK to apply the changes
Figure 20
Complete Site Page
Task 2 – Connect the list and the InfoPath Form Web Part
In this task, you will connect the List web part to the InfoPath web part. This connection will allow the InfoPath form to display the details of the customer selected in the List web part.
1. Define the connection between the two web parts
a. Click the drop down arrow on the InfoPath Form web part
b. Choose Connections -> Get Form From -> Employees
Figure 21
Connections Menu
c. Save the page by clicking the Stop Editing button in the Page ribbon tab
Exercise 2 Verification
In order to verify that you have correctly performed all steps of Exercise 2, proceed as follows:
Test the Form
Test your form to verify it is use to add or edit items in the Employees list.
1. Load the site’s main page in the browser
a. In Internet Explorer navigate to http://intranet.contoso.com/sites/InfoPath
b. Select an employee in the Employees list of the page
c. Verify the InfoPath form is populated with the selected employee’s information
Figure 22
Connected Site Page
Exercise 3: InfoPath and Forms Libraries
In this exercise you will create a custom form used to submit data to a Forms Library using InfoPath. This form will submit timesheets to a library and use related data in the Employees list to supplement the information entered in the form.
Task 1 – Connect an existing InfoPath Form to external data
In this task, you will connect a drop down list in the form to an external list of Employees.
1. Create a new secondary data connection to the Employees list
a. Open the Timesheet.xsn starter template in the C:\Office2010DeveloperTrainingKit\Labs\InfoPath\Source\Starter folder by right clicking it and choosing Design
b. Click the From SharePoint List button in the Data ribbon tab
c. In the Data Connection Wizard enter http://intranet.contoso.com/sites/InfoPath as the site url and click Next
d. Choose the Employees list and click Next
e. In the field list choose the EmployeeID, Full_Name, and Title fields and click Next
Figure 23
Employee Data Connection Fields
f. Make sure the check box asking to store a copy of the data in the template is cleared and click Next
g. Verify the name of the connection is Employees and the check box to automatically retrieve the data is checked then click Finish
2. Convert the Employee text box to a drop down list using the new Employees data source
a. Right click the Employee text box in the form and select Change Control -> Drop-Down List Box
b. Right click the Employee drop down list box and select Drop-Down List Box Properties
c. In the Drop-Down List Box Properties dialog choose the Get choices from an external data source radio button