Hands-On Lab. InfoPath and Forms Services. Lab version: Last updated: 2/23/2011

Transcription

1 Hands-On Lab InfoPath and Forms Services Lab version: Last updated: 2/23/2011

2 CONTENTS OVERVIEW... 3 Starting Materials 4 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 EXERCISE 2: USING THE INFOPATH WEB PART Task 1 Add the Web Parts to the site s main page Task 2 Connect the list and the InfoPath Form Web Part Exercise 2 Verification EXERCISE 3: INFOPATH AND FORMS LIBRARIES Task 1 Connect an existing InfoPath for to external data Task 2 Add a View to the InfoPath form containing a Submit button Task 3 Publish the form to the Timesheets Form Library Task 4 Use the Timesheet Form in a Web Part Exercise 3 Verification SUMMARY APPENDIX No Items 28

3 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 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 and installing the code snippets for this lab. 1. Run the command file Setup.bat located at C:\Office2010DeveloperTrainingKit\Labs\InfoPath\Source\.

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

5 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

6 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

7 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 1 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

8 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 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

9 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

10 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

11 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

12 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 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

13 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 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

14 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

15 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

16 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 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

17 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 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

18 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 d. Verify the Data source is Employees e. Use the field picker button for Value and Display name settings the values as follows i. Value = EmployeeID ii. Display Name = Full Name Figure 24 Employees Drop Down List Properties f. Click OK to close the dialog 3. Create a Calculated Value control to show the title of the currently selected employee a. Place the cursor in the table cell to the right of the Title label b. In the Home ribbon tab, locate the Input drop down in the Controls group

19 c. Click the Calculated Value item in the drop down d. In the Insert Calculated Value dialog, click the Fx button e. In the Insert Formula dialog click the Insert Field or Group button f. In the Select a Field or Group dialog select Employees (Secondary) in the drop down list g. Expand the datafields and d:sharepointlistitem_rw nodes and select Title. Figure 25 Select Employee Title h. 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. i. In the Filter Data dialog click Add j. In the first field drop down choose EmployeeID k. In the last field drop down choose Select Field or Group l. In the Select a Field or Group dialog, choose Main from the drop down m. Select Employee and click OK

20 Figure 26 Select Filter Parameter n. 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 a. Right click the Employee Drop-Down List Box and select Rules -> Manage Rules b. In the Rules task pane, click New -> Action c. In the Run these actions section click Add -> Send Data to Web Part d. 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

21 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 a. Switch to the Page Design ribbon tab b. Click the New View button in the View group c. Enter a name of Web Part Form and click OK d. Switch back to the View 1 view using the View dropdown in the View group e. Select the entire form and copy it f. 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 a. Click the Submit Options in the Submit Actions group in the Data ribbon tab b. Check the Allow users to submit this form checkbox c. Choose SharePoint Document library in the drop down list d. Click the Add button to create an external connection e. Enter a Document Library url of f. Click the Fx button by file name g. Enter a string of concat(%1, "_", string(%2)) h. Select %1 and click Insert Field or Group then select Employee and click OK i. Select %2 and click Insert Field or Group then select WeekStart and click OK Figure 28 Configure File Name Formula

22 j. Click OK to complete the formula Figure 29 Submit Connection Configuration k. Check Allow overwrite if file exists and click Next l. Once the location has been verified, click Finish m. Click the Advanced button and check the Show this message if the form is submitted successfully n. Change the After submit action to Open a new form and click OK 3. Add a button to the new view that will start the submit process a. Put the cursor in the white row under the Total Hours text b. Add a button using the Controls group in the Home ribbon tab c. Place a blank line above and below the button and center it d. Edit the button s properties by right clicking it and choosing Button Properties e. In the Button Properties dialog change the Action to Submit

23 Figure 30 Add Submit Button f. 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 a. Click the BackStage button and open the Publish tab b. Click the SharePoint Server button c. In the wizard, enter a url of and click Next d. Choose the Form Library radio button and click Next e. 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 a. Click the Add button at the top of the dialog b. Select the Employee field in the tree c. In the site column group drop down list choose (This form library) d. In the Column name choose Employee and click OK e. Repeat this process to map: i. TotalHours to Total Hours

24 ii. OvertimeHours to Overtime Hours Figure 31 Promoted Fields 3. Provide the selected employee to other Web Parts using connections a. Click the Add button on the bottom section of the dialog b. In the dialog, select the Employee field c. Click OK Figure 32 Promote Connection Data d. Click Next to move to the next step 4. Finish the process of publishing by clicking the Publish button

25 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 a. In Internet Explorer navigate to b. In the Page ribbon tab and click the Edit page button c. In the right hand side web part zone, click the Add a Web Part link d. In the Insert Web part pane, select the Lists and Libraries category e. Choose the Timesheets web part and click the Add button f. Drag the new web part below the existing InfoPath Form web part g. Enter the web parts edit menu by clicking the web part s drop down menu and clicking Edit Web Part h. In the Edit pane choose a Selected View of Summary i. Choose a Toolbar Type of No Toolbar j. Click OK to close the Edit pane 2. Add the InfoPath Form Web Part to the left hand side web part zone a. In the left hand side web part zone, click the Add a Web Part link b. In the Insert Web part pane, select the Forms category c. Choose the InfoPath Form Web Part and click the Add button d. Drag the new web part below the existing List web part e. In the new web part click the Click here to open the tool pane link f. In the List or Library drop down, choose the Timesheets list g. Uncheck the Show InfoPath Ribbon or toolbar checkbox h. In the Views drop down choose Web Part Form i. In the Appearance section, choose None in the Chrome Type drop down list j. Click OK to apply the changes 3. Define the connection between the two web parts a. Click the drop down arrow on the InfoPath web part b. Choose Connections -> Send Data To -> Timesheets c. In the Configure Connection Dialog switch to the Configure Connection tab

26 d. Choose a Connection Type of Get Filter Values From and switch to the second tab e. Set the Provider Field to Employee and the Consumer Field Name to Employee f. Click Finish to close the dialog g. 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 a. In Internet Explorer navigate to b. Select an employee in the Timesheets form and submit a timesheet c. In the new form select the same employee and verify the submitted timesheet shows up in the filtered list Summary Figure 33 Connected Site Page In this exercise you learned how to use InfoPath 2010 to build rich list forms and web parts. Using web parts and connections rich mash-up applications were developed without writing a single line of code.

27 InfoPath 2010 is an important part of your SharePoint applications. It allows a rich UI to be designed in an style that is familiar for designers and powerful for developers.

28 Appendix No Items No Appendix content