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 Collectionfeatures to enable Forms Services
   1. In Internet Explorer navigate to https://intranet.contoso.com/sites/InfoPath
   2. In the Site Actions menu click Site Settings
   3. In the Site Collection Administration section, click the Site collection features link
   4. Locate the SharePoint Server Enterprise Site Collection feature in the list
   5. Click the Activate button to enable the feature
2. Open the Employees list form in InfoPath
   1. Navigate to the Employees list using the navigation bar on the left of the page
   2. Switch to the List ribbon using the link at the top of the page

   3. 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
   1. Select all content on the page
   2. Press the delete key
2. Apply a page layout and add the layout tables to the form
   1. Place the cursor at the top of the page

   2. In the Page Design ribbon tab, click Page Layout Templates and choose the Title Only option

      Figure 2

      InfoPath Page Layout Template

   3. Place the cursor on the Add tables text

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

   5. Add a second table with 2 columns and a sub header
   6. Add a third table with 4 columns and a sub header

   7. 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
   1. Locate the upper table that has 4 columns and two rows
   2. Select the right three cells on the second row, right click them and click Merge Cells

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

   4. Drag the Last Name field into the rightmost two cells of the first row

   5. Drag the Title field to the bottom row

      Figure 6

      First Section Complete

4. Populate the Contact information section of the form
   1. Click the first Click to add subheading item and enter Contact Info
   2. Drag the cell dividers in the table to make the first column about 25% of the total width
   3. Drag the Phone field into the two cells on the top row

   4. 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
   1. Click the remaining Click to add subheading item and enter General Information
   2. Drag the Department Name field into the left two cells on the first row
   3. Drag the Hire Date field into the right two cells on the first row
   4. Drag the Salaried field into the left two cells on the bottom row
   5. Drag the Base Rate field into the right two cells on the bottom row
6. Apply a new Theme to the form
   1. Click the Themes drop down button in the Page Design ribbon tab

   2. 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
   1. Click the Click to add title text at the top of the form
   2. Locate the Controls group in the Home tab group

   3. Click the drop down in the Controls Group and click the Calculated Value item

      Figure 10

      Calculated Value Control

   4. In the Insert Calculated Value dialog click the Fx button

      Figure 11

      Insert Calculated Value Dialog

   5. Click the Insert Function button
   6. Chose the Text option in the Categories list and select the concat function

   7. Click OK to close the Insert Function dialog

      Figure 12

      Insert Formula Dialog

   8. Double click the first double click to insert field
   9. Choose First Name and click OK
   10. Single click the second link and type “ “

   11. Double click the last double click to insert field and select Last Name

       Figure 13

       Completed Full Name Formula

   12. 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
   1. Right click the Base Rate text box and choose Rules -> Manage Rules to show the Rules task pane
   2. In the Rules task pane click the New button and select Formatting

   3. Click the None link in the Condition section

      Figure 14

      Base Rate Disabled Rule

   4. In the Condition drop down select Salaried in the first drop down list

   5. In the last drop down choose TRUE and click OK

      Figure 15

      Salaried is true condition

   6. In the Rules task pane, check the Disable this control check box
3. Define a default value for the EmployeeID field
   1. In the Fields task pane, right click EmployeeID and select Properties
   2. Enter 0 in the Default Value text box
   3. Click OK to close the dialog
4. Publish the form using the Info tab in BackStage
   1. Click the Backstage button (labeled as File)
   2. 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
   1. In Internet Explorer navigate to https://intranet.contoso.com/sites/InfoPath
   2. Click the Employees link in the left side navigation tree

   3. On the employees page click the New Item button in the Items ribbon tab to load the custom form

      Figure 16

      New Employee Form

   4. Create a new employee and submit it using the custom form
2. Edit an existing employee using the custom InfoPath form
   1. Click the first employee’s employee id to load a read only form

   2. Click Edit item to see the edit view of the InfoPath form

      Figure 17

      Edit Employee Form