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
    1. Open the Timesheet.xsn starter template in the C:\Office2010DeveloperTrainingKit\Labs\InfoPath\Source\Starter folder by right clicking it and choosing Design
    2. Click the FromSharePoint List button in the Data ribbon tab
    3. In the Data Connection Wizard enter https://intranet.contoso.com/sites/InfoPath as the site url and click Next
    4. Choose the Employees list and click Next
    5. In the field list choose the EmployeeID, Full_Name, and Title fields and click Next

      Figure 23

      Employee Data Connection Fields

    6. Make sure the check box asking to store a copy of the data in the template is cleared and click Next
    7. 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
    1. Right click the Employee text box in the form and select Change Control -> Drop-Down List Box
    2. Right click the Employee drop down list box and select Drop-Down List Box Properties
    3. In the Drop-Down List Box Properties dialog choose the Get choices from an external data source radio button
    4. Verify the Data source is Employees
    5. Use the field picker button for Value and Display name settings the values as follows

      1. Value = EmployeeID
      2. Display Name = Full Name

      Figure 24

      Employees Drop Down List Properties

    6. Click OK to close the dialog
  3. Create a Calculated Value control to show the title of the currently selected employee
    1. Place the cursor in the table cell to the right of the Title label
    2. In the Home ribbon tab, locate the Input drop down in the Controls group
    3. Click the Calculated Value item in the drop down
    4. In the InsertCalculated Value dialog, click the Fx button
    5. In the Insert Formula dialog click the Insert Field or Group button
    6. In the Select a Field or Group dialog select Employees (Secondary) in the drop down list
    7. Expand the dataFields and d:SharePointListItem_RW nodes and select Title.

      Figure 25

      Select Employee Title

    8. Click the Filter Data button

      Note:
      It is possible there are many employees in the list. The filter identifies which employee title in the list is needed. In this case, the employee is chosen by relating the Employee ID to the currently selected Employee in the Main data source.

    9. In the Filter Data dialog click Add
    10. In the first field drop down choose EmployeeID
    11. In the last field drop down choose Select Field or Group
    12. In the Select a Field or Group dialog, choose Main from the drop down
    13. Select Employee and click OK

      Figure 26

      Select Filter Parameter

    14. Click OK to close all the dialogs
  4. Add a rule that will send the currently selected employee to any web parts containing this form
    1. Right click the Employee Drop-Down List Box and select Rules -> Manage Rules
    2. In the Rules task pane, click New -> Action
    3. In the Run these actions section click Add -> Send Data to Web Part
    4. In the Rule Details dialog click OK

      Figure 27

      Send Data to Web Part

Task 2 – Add a View to the InfoPath form containing a Submit button

In this task, you will create a copy of the existing form in a second view. Since this view will be on a main page in a web part, you will add a button that will automatically save the timesheet.

  1. Create a new view named Web Part View and copy the current content to the new view
    1. Switch to the Page Design ribbon tab
    2. Click the NewView button in the View group
    3. Enter a name of Web Part Form and click OK
    4. Switch back to the View 1 view using the View dropdown in the View group
    5. Select the entire form and copy it
    6. Switch back to the Web Part Form view and paste all of the content into the form
  2. Add a new submit data source that will automatically save the file with a file named determined by a formula
    1. Click the Submit Options in the Submit Actions group in the Data ribbon tab
    2. Check the Allowusers to submit this form checkbox
    3. Choose SharePoint Document library in the drop down list
    4. Click the Add button to create an external connection
    5. Enter a Document Library url of https://intranet.contoso.com/sites/InfoPath/Timesheets
    6. Click the Fx button by file name
    7. Enter a string of concat(%1, "_", string(%2))
    8. Select %1 and click Insert Field or Group then select Employee and click OK
    9. Select %2 and click Insert Field or Group then select WeekStart and click OK

      Figure 28

      Configure File Name Formula

    10. Click OK to complete the formula

      Figure 29

      Submit Connection Configuration

    11. Check Allow overwrite if file exists and click Next
    12. Once the location has been verified, click Finish
    13. Click the Advanced button and check the Show this message if the form is submitted successfully
    14. Change the After submit action to Opena new form and click OK
  3. Add a button to the new view that will start the submit process
    1. Put the cursor in the white row under the Total Hours text
    2. Add a button using the Controls group in the Home ribbon tab
    3. Place a blank line above and below the button and center it
    4. Edit the button’s properties by right clicking it and choosing ButtonProperties
    5. In the Button Properties dialog change the Action to Submit

      Figure 30

      Add Submit Button

    6. Enter a Label of Submit Timesheet and click OK

Task 3 – Publish the form to the Timesheets Form Library

In this task, you will publish the new form to the Timesheets form library

  1. Publish the form to the existing Timesheets Form Library
    1. Click the BackStage button and open the Publish tab
    2. Click the SharePoint Server button
    3. In the wizard, enter a url of https://intranet.contoso.com/sites/InfoPath and click Next
    4. Choose the Form Library radio button and click Next
    5. Choose the Update radio button and select the Timesheets library then click Next
  2. Promote the Employee ID, Total Hours, and Overtime Hours to the form library
    1. Click the Add button at the top of the dialog
    2. Select the Employee field in the tree
    3. In the site column group drop down list choose (This form library)
    4. In the Column name choose Employee and click OK
    5. Repeat this process to map:

      1. TotalHours to Total Hours
      2. OvertimeHours to Overtime Hours

      Figure 31

      Promoted Fields

  3. Provide the selected employee to other Web Parts using connections
    1. Click the Add button on the bottom section of the dialog
    2. In the dialog, select the Employee field
    3. Click OK

      Figure 32

      Promote Connection Data

    4. Click Next to move to the next step
  4. Finish the process of publishing by clicking the Publish button

Task 4 – Use the Timesheet Form in a Web Part

In this task, you will use the new Timesheet Form web part on the sites main page. You’ll be also adding a list of timesheets already submitted filtered on the employee selected in the form.

  1. Add the List web part to the site’s main page
    1. In Internet Explorer navigate to https://intranet.contoso.com/sites/InfoPath
    2. In the Page ribbon tab and click the Editpage button
    3. In the right hand side web part zone, click the Add a Web Part link
    4. In the Insert Web part pane, select the Lists and Libraries category
    5. Choose the Timesheets web part and click the Add button
    6. Drag the new web part below the existing InfoPath Form web part
    7. Enter the web parts edit menu by clicking the web part’s drop down menu and clicking Edit Web Part
    8. In the Edit pane choose a Selected View of Summary
    9. Choose a Toolbar Type of No Toolbar
    10. Click OK to close the Edit pane
  2. Add the InfoPath Form Web Part to the left hand side web part zone
    1. In the left hand side web part zone, click the Add a Web Part link
    2. In the Insert Web part pane, select the Forms category
    3. Choose the InfoPath Form Web Part and click the Add button
    4. Drag the new web part below the existing List web part
    5. In the new web part click the Click here to open the tool pane link
    6. In the List or Library drop down, choose the Timesheets list
    7. Uncheck the Show InfoPath Ribbon or toolbar checkbox
    8. In the Views drop down choose Web Part Form
    9. In the Appearance section, choose None in the Chrome Type drop down list
    10. Click OK to apply the changes
  3. Define the connection between the two web parts
    1. Click the drop down arrow on the InfoPath web part
    2. Choose Connections -> Send Data To -> Timesheets
    3. In the Configure Connection Dialog switch to the Configure Connection tab
    4. Choose a Connection Type of Get Filter Values From and switch to the second tab
    5. Set the Provider Field to Employee and the Consumer Field Name to Employee
    6. Click Finish to close the dialog
    7. Save the page by clicking the Stop Editing button in the Page ribbon tab

Exercise 3 Verification

In order to verify that you have correctly performed all steps of Exercise 3, 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
    1. In Internet Explorer navigate to https://intranet.contoso.com/sites/InfoPath
    2. Select an employee in the Timesheets form and submit a timesheet
    3. In the new form select the same employee and verify the submitted timesheet shows up in the filtered list

      Figure 33

      Connected Site Page