Exercise 2: Customizing the All Items view

Now that the list is in place and has some data in it, the second step is to modify the default ‘All Items’ view of the list. SharePoint 2010 list views use a new Web Part called the XsltListViewWebPart which is list agnostic and provides AJAX enabled rendering.

1. If it is not open, launch SharePoint Designer 2010 and open the https://intranet.contoso.com/sites/lab03 site.

2. On the New Toy Ideas list overview page, in the Views group open the All Items view by selecting it.

   On the AllItems.aspx tab that appears, click on the Split view option near the bottom of the screen to expose both code and design views. Take note of the XsltListViewWebPart on the page. (Note: you may need to hover your mouse pointed just over the Title column and left click to select the PlaceHolderMain (Custom) area and the webPartPages:XsltListViewWebPart control inside of this section)

   Figure 1

   The AllItems.aspx page

3. On the ribbon, in the View tab, choose Design in order to switch to the design view of the AllItems.aspx page.

4. In the design view for the AllItems.aspx page select the XsltListViewWebPart.

   Figure 2

   The XsltListViewWebPart in Design View

5. In the browser, navigate to the New Toys Ideas list in the https://intranet.contoso.com/sites/lab03 site. Take note of the green plus sign appearing on the AllItems.aspx page. Click on the Add new item hyperlink and note how a dialog box appears for the new item entry. Click Cancel.

6. On the ribbon, in the Options tab choose Inline Editing to enable inline editing for the list.

   Figure 3

   The Options tab for the AllItems.aspx page

7. On the ribbon in the Quick Access Toolbar, choose Save in order to save the page.
8. In the browser, navigate to the New Toys Ideas list in the https://intranet.contoso.com/sites/lab03 site. Take note of the green plus sign appearing on the AllItems.aspx page. Notice how the Add new item hyperlink is no longer available to the right of the green plus sign.

9. Inside the list view, select the + button displayed below the first list item. Take note of the new inline-editing controls appearing on the AllItems.aspx page.

   Figure 4

   The inline editing controls on the AllItems.aspx

10. Use the following information as data for the new list item.
    1. Title: Rocket-fueled Buggy
    2. Age Group: over 3 to 6
    3. Required Investment: Safe rocket boosters and non-exploding fuel
    4. Existing Product: No

11. Use the Save button displayed on the left-hand side of the new list item to save the item. Note the AJAX refresh of the page.

    Figure 5

    The inline editing control on the AllItems.aspx

12. Use your mouse pointed to point to the list item that you have just added. On the left-hand side of the item choose the Edit icon. Change the Title of the item to Rocket-fueled buggy with support wheels and click the Save button.
13. Select the first list item in the list. On the dialog box that appears on the view tab choose Approve / Reject in order to approve the item. Perform the following tasks in the dialog that appears.
    1. Select the Approved option
    2. Choose Ok to close the dialog.
14. Switch back to SharePoint Designer 2010 and keep the browser window open.
15. Ensure that the AllItems.aspx page is open and the XsltListViewWebPart is selected.
16. On the ribbon, in the Options tab, choose Sort & Group from the Filter, Sort & Group section in order to show the Sort and Group dialog.
17. In the Sort and Group dialog, perform the following tasks.
    1. In the Sort order list, remove the ID field.
    2. In the list of available fields, select Age Group.
    3. Choose Add to add the field to the sort order
    4. Choose Show group header to group items based on the Age Group field.
    5. Choose OK to commit the changes.

18. Select the first data row in the list (specifically the <tr> tag) to add conditional formatting. To accomplish this, Click in the first cell of the row that has the Nuclear powered action figure in it and then use the tag selector at the bottom of the screen to click on the <tr> tag:

    Figure 6

    Select the first row

19. On the ribbon, in the Options tab expand Conditional Formatting and choose Format Row.
20. In the Condition Criteria dialog that appears perform the following tasks:

    1. Add a new clause with the following values;

       1. Field: Approval Status
       2. Comparison: Equals
       3. Value: Approved
       Figure 7

       The Condition Criteria dialog

    2. Select Set Style to commit the changes.
21. In the Modify Style dialog that appears perform the following tasks:
    1. Category: Background
    2. Background-color: Green
    3. Choose OK to dismiss the dialog.
    4. Save your changes

22. Go back to the browser and refresh the view to see the conditional formatting applied.

    Figure 8

    The conditional formatting

In this exercise you used SharePoint Designer 2010 to modify the XsltListViewWebPart control to apply custom formatting and grouping.