Exercise 3: Creating InfoPath forms

The last task that you will perform is modifying the edit and display forms used by the New Toy Ideas list. SharePoint 2010 allows forms to be easily customized by Information Workers using InfoPath.

1. In SharePoint Designer 2010, navigate to the list overview page for the New Toy Ideas list by selecting the Lists and Libraries choice in the Site Objects List box (on the left side of the screen). Next select the New Toy Ideas hyperlink located under the Lists heading on the center of the screen.
2. On the ribbon, in List Settings tab, expand Design Forms in InfoPath and choose Item. InfoPath will open with a generated form.
3. Modify the labels to display descriptive texts instead of just the field name. You will do this by replacing the existing labels (on the left side of the list below) with the text on the right side (after the colon).
   1. Title: Please describe your idea for a new toy:
   2. Age Group: Which age group is the new toy meant for:
   3. Required Investment: Are there any new investments Contoso needs to make?
   4. Existing Product: Are there existing vendors for this type of product?
   5. Alternatives: What are the current alternatives to this product?

      

      Figure 1

      The Edit form in InfoPath

4. Next add some fill color shading to the table cells on the right hand side of the form:
   1. Select all of the cells to the right of the titles (i.e. in the second column). Note: you can do this by using the mouse pointed and clicking and dragging vertically across all of the cells in column 2. Be sure you are selecting the background cells and not the text entry areas in column two.
   2. Right click inside of the background area that is highlighted (again taking care not to do this on a control used for user input). Next on the shortcut toolbar that appears click on the Fill Color button’s drop down arrow (e.g. the paint can tipping over) and choose a color of light blue.
5. In the forms designer, select the Title textbox. On the ribbon, on the Properties contextual tab, expand Shading and choose a shade of orange.
6. In the forms designer, select the Age Group control. On the ribbon, on the Properties contextual tab, expand Shading and choose a shade of orange.
7. In the forms designer, select the Required Investment control. Perform the following tasks with this control selected:
   1. On the ribbon, on the Properties contextual tab, choose Control Properties in order to show the TextBox Properties dialog.
   2. In the Text Box Properties dialog, on the Display tab, check Multi-line.
   3. In the Text Box Properties dialog, on the Size tab, set the Height to 75px and the Width to 100%.
   4. Choose OK to commit the changes.
8. In the forms designer, select the Alternatives control. Perform the following tasks with this control selected
   1. On the ribbon, on the Properties contextual tab, choose Manage Rules in order to show the Rules task pane.
   2. On the Rules task pane, expand New and choose Formatting in order to add a new formatting rule to the control.
   3. In the Details for: text box enter “Disable when no existing product.”
   4. In Condition: click the None hyperlink.
      1. On the Condition dialog box set the Run the rule when this condition is true = Existing Product | is equal to | FALSE (Note: the vertical lines separate the data contained in the three drop down boxes in succession).
      2. Click OK
   5. Under Formatting put a check in the Disable this control checkbox

      

      Figure 2

      The Rules task pane

   6. Close the Rules task pane using the close [x] button in the upper-right corner of the task pane.
9. Ensure that your form is similar to the following figure:

   

   Figure 3

   The modified Edit form in InfoPath

10. On the top toolbar in the ribbon, choose Quick Publish to publish the form to SharePoint.

    

    Figure 4

    The Quick Publish button

11. Go back to your browser, and select the New Item button from the Items ribbon tab to add a new list item to the New Toy Ideas list using the new InfoPath form:

    

    Figure 5

    The modified Edit Form in action

    Note:

    In this exercise you modified the editing form of a SharePoint list using an InfoPath form.