The first thing you need to do is establish some test data in a set of SharePoint lists. In a blank site, create three lists: States, Orders, and Order Lines. These lists will be related with lookup fields that will allow you to relate items in one list with items in the others.

SharePoint 2010 has improved the functionality of lookup fields to include features similar to foreign keys in relational databases. These fields are still somewhat limited compared to true foreign keys but they allow one important new feature that you will use here. This is the concept of projected fields. A projected field is a value taken from the lookup table and made available as a read-only field in the list. For example, if you do a lookup on a state's abbreviation (such as CA), you can also expose the full name of the state (California) as a read-only field in the list making the reference. You will walk through doing this in a moment.

1. Open SharePoint Designer and create a new blank site if necessary.
2. From the Navigation pane, select Lists and Libraries.
3. Select Custom List from the New group on the Lists and Libraries menu tab.
4. Type States for the name of the list and click OK.
5. Open the column list editor window for States.
6. Change the Title field to State Abbr and then create the other fields as shown in Figure 5-14.
   

   Figure 5-14. States list definition

7. Save the new list definition.
8. Select Lists and Libraries from the Navigation pane.
9. Select Custom List from the New group on the Lists and Libraries menu tab.
10. Type Orders for the name of the list and click OK.
11. Open the column list editor window for Orders.
12. Change the Title field to Order Number and then create the other fields as shown in Figure 5-15.
    

    Figure 5-15. Orders list definition (partial)

13. Finally, select Lookup (Information Already on This Site) from the Add New Column drop-down list in the New group on the Columns tab. The Column Editor opens, as shown in Figure 5-16.
    

    Figure 5-16. Column Editor (State field)

14. Select the States list and the State Abbr field.
15. At the bottom of the dialog box, select the check boxes for the Region, State Abbr, and State Name fields. This will make these fields appear in the Orders list as read-only columns.
16. Click OK and set the field name to State.
17. Save the new list definition. The region and state name fields appear only after the list definition is saved (see Figure 5-17).
    

    Figure 5-17. Orders List definition (complete)

    Note In Figure 5-17, it may seem strange that we have listed both State and State:State Abbr when they appear to contain the same information. The reason for this will be made clear later. In brief, the State field contains a reference to the ID field in the States list, whereas the State:State Abbr field contains the actual two-letter abbreviation of the state. When simply displaying this field, there is no difference. Both fields are rendered as the two-letter abbreviation. However, when accessing data for sorting, filtering, or joining lists, it is sometimes necessary to use the data value rather than the identifier column.

18. Select Lists and Libraries from the Navigation pane.
19. Select Custom List from the New group on the Lists and Libraries menu tab.
20. Type Order Lines for the name of the list and click OK.
21. Open the column list editor window for Order Lines.
22. Change the Title field to Product ID and then create the other fields as shown in Figure 5-18.
    

    Figure 5-18. Order Lines list definition (partial)

23. Save the new list definition.
24. Select Calculated (Calculation Based on Other Columns) from the Add New Column drop-down list in the New group on the Columns tab.
25. Enter the formula to calculate the Line Total value as shown in Figure 5-19.
    

    Figure 5-19. Column Editor (Line Total field)

26. Select Lookup (Information Already on This Site) from the Add New Column drop-down list in the New group on the Columns tab. The Column Editor opens, as shown in Figure 5-20.
    

    Figure 5-20. Column Editor (Order Number field)

27. Select the Orders list and the Order Number field.
28. Select the Order Number field under additional fields.
29. Click OK and set the field name to Order Number.
30. Save the new list definition.

When a new SharePoint list or library is created, a set of ASPX pages are generated automatically. These correspond to the views and forms used to access the data in the list. By default, one view (AllItems.aspx) and three forms (DispForm.aspx, EditForm.aspx, and NewForm.aspx) are created. These can be seen by viewing the settings page for the list, as shown in Figure 5-22.

Figure 5-22. Order List settings page

In this exercise, you will explore and customize these views and forms.

1. Open the settings page for the Orders list and click the All Items view. This opens the Page Editor for the All Items view, as shown in Figure 5-23.
   

   Figure 5-23. All Items View Page Editor (Split mode)

   There are several important things to note about this page and the options that SharePoint Designer is presenting:

   • This view page contains only a single web part: an XsltListViewWebPart (XLV). This web part is used to display the list on the page.
   • In the top half of the Split view, the markup for the view is visible and can be directly edited.
   • The markup highlighted in yellow is inherited from the page layout and is not editable except in Advanced mode (see Chapter 2).
   • To the right of the Page Editor is the Data Source Details task pane, which displays all the data fields that are available for this view. If the Data Source Details pane does not appear automatically, it can be activated by using the Task Panes drop-down menu on the View tab of the menu.
   • The List View Tools tab on the Ribbon menu contains many options for customizing the view without writing any HTML or XSLT markup. This toolbar is available whenever the XLV control is selected.

   You will now use some of these options to customize the view in useful ways. Figure 5-24 illustrates the onscreen options.

2. The Order Date is currently aligned to the left, making it hard to read. Click one of the dates in the Order Date column.
3. On the Table tab under List View Tools, click the center button in the Cell Layout group.
   

   Figure 5-24. Centering Order Date in the All Items view

   Let's look at some of the other options available to you on the Ribbon menu. The Options tab, shown in Figure 5-25, allows the designer to sort, group, and filter items and adjust the presentation of the list in other ways.

   

   Figure 5-25. List View Tools menu—Options tab

   The Design tab, shown in Figure 5-26, presents commands for radically changing the layout of the list items. You can also adjust the toolbar and add total rows.

   

   Figure 5-26. List View Tools menu—Design tab

   The Web Part tab, shown in Figure 5-27, provides a set of tools for web parts when they are edited in SharePoint Designer. This tab allows you to adjust the height, width, chrome appearance, and other options common to all web parts.

   

   Figure 5-27. List View Tools menu—Web Part tab

   The Table tab, shown in Figure 5-28, is targeted toward adjusting the table containing the list items. You can add and remove columns and rows, adjust the alignment of contents, set borders, and so on.

   

   Figure 5-28. List View Tools menu—Table tab

   Now you will customize the view by setting up paging and allowing inline editing. Inline editing is a feature that allows the user to enter data directly into fields rendered within the list view, as shown in Figure 5-29.

   

   Figure 5-29. List View in Inline Editing mode

4. On the Options tab, open the Paging drop-down menu and select the Display Sets of 5 Items option, as shown in Figure 5-30. The pages displayed will now contain five items instead of the default of ten.
5. On the same tab, click the Inline Editing option in the Edit group. This enables the inline editing feature for the web part when it is viewed in the browser.
   

   Figure 5-30. Set Paging and Inline Editing modes

   Up to now, you have focused on options that affect the entire list. SharePoint Designer also has options for formatting data and elements within the list based on the values found in the data. You are going to apply conditional formatting to the Taxes field in the list. When the tax amount is over $550, you want to highlight the value by changing the background color on the cell.

   Before setting this formatting, you need to determine which fields you will be evaluating. Examine the Data Source Details task pane carefully and you will note that there are actually two different Taxes fields, as you can see in Figure 5-31.

   

   Figure 5-31. Numeric fields in the DSD task pane

   The first Taxes field is a nicely formatted version of the currency field. This is useful for display purposes, but not for performing numeric logic, because it doesn't contain a valid number. The second Taxes field(which has a period at the end of its name) is the raw numeric value of the field. This is the field that you will use to perform your formatting.

6. Click within one of the data cells in the Taxes column in the web part on the page designer.
7. Select Format Column from the Conditional Formatting drop-down menu in the Filter, Sort & Group group on the Options tab.
8. In the Condition Criteria dialog box, select the Taxes. field by moving to the bottom of the field list and selecting More Fields.
9. Set the condition to Greater Than and enter a value of 550, as shown in Figure 5-32.
   

   Figure 5-32. Condition Criteria dialog box

10. Click the Set Style button. The Modify Style dialog box opens, as shown in Figure 5-33.
11. Select the Background category and set the Background-Color option to your favorite color.
    

    Figure 5-33. Modify Style dialog box

12. Click OK. Note that the list in the page designer has taken on the new style and that the Conditional Formatting task pane has appeared to the right (see Figure 5-34).
    

    Figure 5-34. Conditional Formatting task pane

13. Save the page and view in the web browser.

    Using conditional formatting, the XsltListViewWebPart (XLV) web part provides a powerful way to customize SharePoint views without resorting to coding XSLT by hand. Of course, that option is always available when the needed effect isn't available.

    Now let's examine the forms that were generated for us by SharePoint. Open the Orders list's settings page and click EditForm.aspx to launch the Page Editor. Look at the form web part and you will see that it is a ListFormWebPart (LFWP). The same is true for the other forms generated for the list. This web part is very limited. It does not support XSLT or any other form of customization. You could delete this web part from the page and add a new DataFormWebPart (DFWP) web part in its place, but there is an easier way to create a customizable form for the list.

14. Open the Orders list's settings page.
15. Above the Forms list, click New. The Create New List Form dialog box opens, as shown in Figure 5-35.
    

    Figure 5-35. Create New List Form dialog box

16. In the File Name text box, type EditForm2.
17. Select the Edit Item Form radio button.
18. Select the check box labeled Create Link in List Item Menu and Ribbon.
19. In the Link and Command Line field, type Alternate Edit Form. Click the OK button.

Note that two new items have been created on the settings page: a new form and a new custom action. Open the new form in the Page Editor and you will notice that it is very similar to the original EditForm.aspx except that it uses the DFWP, which allows for a wide variety of customization similar to those for the XLV you examined earlier.

The new custom action appears on menus attached to items in the list. This menu item opens the new form you just created, as you can see in Figure 5-36.

Figure 5-36. New custom form action

You are now going to create a page that will allow you to total some of your orders. This will be an ordinary site page, not a list view or form:

1. Open the site in SharePoint Designer.
2. Select Site Pages from the Navigation pane.
3. Select the first template from the Web Part Page drop-down menu on the Pages tab of the menu, as shown in Figure 5-37.
   

   Figure 5-37. Web part page templates

4. Rename the new page OrderReport.aspx.
5. Open the new page in the Page Editor. Click the web part zone in the center of the page.
6. From the Data View drop-down menu in the Data Views & Forms group on the Insert tab of the menu, select Orders, as shown in Figure 5-38.
   

   Figure 5-38. Insert the data view web part

7. Click Sort & Group from the Options tab on the List View Tools menu.
8. Add the State:Sales Region and State:State Name fields, selecting Show Group Header for both.
9. Add the Order Number field, but do not show the group header. Click OK.
   

   Figure 5-39. Sort and Group dialog box

10. Switch to the Design tab on the List View Tools menu and select Totals Rows. After a few moments, a row showing the totals for each group and subgroup appears.
11. You don't want to display all of the counts in the Totals row, so select each one and press Delete.
12. In the remaining totals fields, select the Sum= text and delete it, being sure to leave the total alone by itself in the cell.
13. Switch to the Table tab in the menu.
14. Select the top cell from the State:State Name column.
15. Select Delete Column from the Delete drop-down menu in the Rows & Columns group on the menu.
16. Remove State:State Abbr and State:Sales Region in the same way.
17. Select the total row cells that contain the totals to be displayed and click the Align Center Right button from the Cell Layout group on the menu, as shown in Figure 5-40.
    

    Figure 5-40. Page Editor (OrderReport.aspx)

18. Save the page (Ctrl+S) and view the page in the web browser (F12), as shown in Figure 5-41.

In this exercise, you will explore two important features of SharePoint Designer's data web parts: connections and parameters. Web part connections are not unique to the data web parts. Connections allow data to be passed from one web part to another, usually for the purpose of filtering the data displayed. Parameters serve a similar purpose, except that these can receive their data from sources other than web parts, including cookies, form and server variables, ASP.NET controls and, most commonly, from query string parameters on the page's URL.

In this example, you will create two pages. The first page will list the states in your system and present a filtered list of the orders for the selected state. The order number will link to the second page, passing the order number in the URL. This page will show the selected order's details and line items.

1. Open the site in SharePoint Designer.
2. Select Site Pages from the Navigation pane.
3. Select the first template from the Web Part Page drop-down menu on the Pages tab in the menu. Name the new page Regions.aspx.
4. Open Regions.aspx in the Page Editor and then click in the web part zone.
5. Select States from the Data View drop-down menu on the Insert tab.
6. Click in the web part zone beneath the data view for the States list. This may be easier to do if you use Split mode in the Page Editor. Select the States list and then move the cursor after the web part in the code window.
7. Select Orders:State from the Related Item View drop-down menu on the Insert tab. If this option is grayed out, be sure you are not still on the list control itself. You need to have your cursor in the web part zone, but not on the list.
   

   Figure 5-42. Regions page with connected web parts

8. Save the page (Ctrl+S) and view the page in the web browser (F12).
9. Click the double-arrow icon at the beginning of the Nebraska line, as shown in Figure 5-43. This will refilter the list of orders to show those from Nebraska.
   

   Figure 5-43. Regions page (web browser)

   At this point, there are two XSLT list view web parts on the page. The Related Item View option has automatically configured a connection between these views. To see how this connection is configured, right-click either of the web parts and select Manage Connections.

10. Select Site Pages from the Navigation pane.
11. Select the first template from the Web Part Page drop-down menu on the Pages tab of the menu.
12. Name the new page OrderDetails.aspx.
13. Open OrderDetails.aspx in the Page Editor and then click in the web part zone.
14. Select Orders from the Display Item Form drop-down menu on the Insert tab.
    

    Figure 5-44. Default form for displaying items

    The default item form contains only a few fields that do not suit our purposes. Instead, you will remove it and use the Data Source Details pane to create a more appropriate form.

15. Select the form and press Delete.
16. In the Data Source Details (DSD) task pane, select only the fields to be displayed in the form: Order Number, Order Date, Customer, City, State:State Abbr, Taxes, Shipping, SubTotal, and Total. Be sure to select the formatted versions of the numeric fields. Those are the fields without periods after the name.
    

    Figure 5-45. Data Source Details task pane

17. From the Insert Selected Fields As drop-down list at the top of the DSD pane, select Single Item View.
    

    Figure 5-46. Display form for order details

18. Select Parameters from the Filter, Sort & Group group on the Options tab of the Data View Tools menu.
19. The ListID parameter has already been set and should not be altered. Add a new parameter called OrderNumber.
20. Set the Parameter Source to Query String and the Query String Variable name to ord.
21. Set the Default Value to S0001. This default value will allow you to view and manipulate the view in SharePoint Designer instead of seeing a message indicating that the view is empty.
    

    Figure 5-47. Data View Parameters dialog box (order form)

22. Click OK.
23. Select Filter from the Filter, Sort & Group group on the Options tab of the Data View Tools menu.
24. Select the Order Number field and leave the comparison as Equals.
25. Select [OrderNumber] from the Value drop-down list, as shown in Figure 5-48. This refers to the parameter you just created. Then click OK.
    

    Figure 5-48. Filter Criteria dialog box (order form)

    The data view you have just created accepts a parameter from the ord parameter on the page's URL and uses it to find the single order item to be displayed. Now you will create another data view that will display the line items for the order. It will use the same parameter and filter properties that were used in the previous example.

26. Click in the web part zone beneath the data view for the order details. Again, this may be easier to do using Split mode.
27. Select Order Lines from the Data View drop-down menu on the Insert tab.
    

    Figure 5-49. Order details web parts

28. Select Parameters from the Filter, Sort & Group group on the Options tab of the Data View Tools menu.
29. The ListID parameter has already been set and should not be altered. Add a new parameter called OrderNumber.
30. Set the Parameter Source to Query String, the Query String Variable name to ord, and the Default Value to S0001. Click OK.
31. Select Filter from the Filter, Sort & Group group on the Options tab of the Data View Tools menu.
32. Select the Order Number:Order Number field and leave the comparison as Equals.
33. Select [OrderNumber] from the Value drop-down list. Click OK.
34. Save the page (Ctrl+S) and view the page in the web browser (F12), as shown in Figure 5-50.
    

    Figure 5-50. Order details page

    Because you set the default parameter values to S0001, that is the order shown on the page by default. Add ?ord=S0002 to the URL in the browser and press Enter to refresh the page. Details for order number S0002 should now be shown in both web parts.

    Note The web parts on this page (see Figure 5-50) are not connected to one another as they were on the Regions.aspx page. Instead, they are both filtering based on the same query string parameter.

    You have one more step to complete your solution. If you go back to the Regions.aspx page, you will see that the order number is a link, but that when clicked, that link opens the default display form for the order. You need to update the page to link to your custom page instead, passing in the order number on the URL. To do this, you will directly edit the XSLT for the orders list.

35. Open Regions.aspx in the Page Editor and then click in the cell next to the order number S0001.
36. From the DSD task pane, select the OrderNumber field.
37. From the Insert Selected Fields As drop-down list, select Item(s). This causes the order number to appear twice in that cell, as shown in Figure 5-51.
    

    Figure 5-51. Order Number cell in Design view

38. Switch the Page Editor to either Split view or Code view and then find the markup for the Order Number cell, as shown in Figure 5-52.
    

    Figure 5-52. Original markup for the Order Number cell

39. Replace that markup with <xsl:value-of select="$thisNode/@Title" />. The resulting section of XSLT should look like Figure 5-53.

    Note The field name used in the XSLT markup is @Title because the list's original Title field was renamed and is being used for the Order Number field. Order Number is the display name for the field, but the internal name is still Title.

    

    Figure 5-53. Final markup for the Order Number cell

40. Save the page (Ctrl+S) and view the page in the web browser (F12).
41. Click an order number. The corresponding order should now appear on the new page.