1. Open the browser to a SharePoint team site. If you don’t already have a team site to work with, create a new site called Chapter 4 by using the Team Site template.
2. From the Site Actions menu, select New Page.
3. Give the new page the name Chapter 4, as shown in Figure 4-1.
   

   Figure 4-1. New Page dialog box

4. Your browser then displays the page in Edit mode. Click the different menu tabs on the Ribbon. Notice the different options you have for creating content.
5. Click your mouse in the main content area of the page.
6. On the Format Text menu, select Text Layout and then Two Columns, as shown in Figure 4-2.
   

   Figure 4-2. Text Layout menu

7. In the left column, type some content. You can use any of the formatting tools available to you on the Ribbon. In the right column, do the same thing.
8. When you are finished creating content in the two columns, save your changes by clicking the Page tab and then Save & Close.
9. Open the same site in SharePoint Designer.
10. Click Site Pages.
11. If the new page is not listed, press the F5 key to refresh the list display. Click the Chapter 4.aspx page.
12. When the page settings page comes up, click Edit File in the Customization section in the middle of the page.
13. Once the page opens in Edit mode, make sure you are in the Design view.
14. To make it easier to edit the content, either right-click in the content area and choose Zoom to Contents or choose it from the View menu on the Ribbon, as shown in Figure 4-3. This isolates the content area of the page.
    

    Figure 4-3. Zoom to Contents menu

15. Click anywhere on the content of the page that you just added. Notice that you can edit the contents of the page.
16. Switch to Code view. The content area appears in <div> tags, as you can see in Figure 4-4.
    

    Figure 4-4. Content area in Code view

17. Switch back to Design view and position your cursor in a blank area of the left content section.
18. From the Insert menu on the Ribbon, select Web Part and then select Image Viewer under the Media and Content section (see Figure 4-5).

    Note Although you are adding an Image Viewer web part to the wiki page, you could have added any web part in the Web Part list.

    

    Figure 4-5. Web Part menu

19. Right-click the web part and select Web Part Properties.
20. In the Image Link box, type /_layouts/images/homepageSamplePhoto.jpg (see Figure 4-6). Type Sample Homepage Picture in the Alternative Text box. Then click OK.
    

    Figure 4-6. Image Viewer web part properties

21. From the File menu, choose Save.
22. Go back to your browser and refresh the page. You can see the changes that you made in the Designer (see Figure 4-7).
    

    Figure 4-7. Final wiki page

    

    Figure 4-8. Web Part Page men

In this exercise, you will create a new web part page in SharePoint Designer 2010 from the predefined templates provided. This page will then be used in the subsequent exercises.

1. If you don’t already have a practice site to work with, create a new site called Chapter 4 by using the Team Site template.
2. From within SharePoint Designer, click the Site Pages link in the left Navigation pane.
3. From the Ribbon menu, choose New Web Part page, and then select the template that has a Header web part zone, a Left web part zone, and a Right web part zone, as shown in Figure 4-11.
   

   Figure 4-11. Web part page

4. Name the page WebPartPageDemo.aspx.
5. When the file is created, click the filename to get to the Page Settings page and then click the Edit File link in the Customization pane.
6. Let’s display the Announcements list on this page. Click inside the Right web part zone. Then, on the Ribbon, click Insert Data View Announcements (see Figure 4-12). You should see the default display of the Announcements list. You’ll customize that later.
   

   Figure 4-12. Data View menu

7. In the Header web part zone, type Web Part Page Demo Page. Use the formatting tools on the Ribbon to center the text and give it the Heading 1 style.
8. Switch to Split mode and notice that a WikiContentWebpart was added automatically for you in Basic editing mode (see Figure 4-13).
   

   Figure 4-13. WikiContentWebpart in Code view

   Note The web part was automatically added because in Basic mode, you can configure and edit web parts only in web part zones. To have static text, you would have to place the page into Advanced editing mode, which would customize the page.

9. Switch back to Design mode and click in the Left web part zone.
10. On the Ribbon menu, choose Insert Data View Links.
11. When the Links web part is rendered on your page, choose Options from the List View Tools menu. Then select Add/Remove Columns.
12. Remove all fields except Notes (see Figure 4-14).
    

    Figure 4-14. Data view column picker

13. Add the regular URL field back into the Displayed Fields list. Then move the URL field to the first position by clicking the Move Up button. Click OK.
14. Click the Design menu, and select the sixth display option, which looks like Figure 4-15.
    

    Figure 4-15. Data view display template

15. Right-click the web part and select Web Part Properties from the context menu.
16. In the Appearance section, under Width, type 300px in the Width box of the web part and make sure Yes is selected. Click OK.
17. Save the page by clicking the Save button or by pressing Ctrl+S.
18. Press F12 or choose Home Preview in Browser from the Ribbon menu to see your new page in the browser.

This is a simple web part page, as you can see in Figure 4-16. You will customize it later in the chapter. For now, add a few links and a few announcements to give the page some content.

1. In the browser, navigate to the WebPartPageDemo page you created in Exercise 4-2.
2. In the upper-right corner, click your login name. The Personalization drop-down menu shows, as you can see in Figure 4-17.
   

   Figure 4-17. Personalization menu

3. Select Personalize This Page from the menu.
4. In the web editor, click in the left web part zone labeled Add a Web Part.
5. When the web part selector opens, select the RSS viewer from the Content Rollup category, as shown in Figure 4-18.
   

   Figure 4-18. Web part selector

6. Make sure the Add Web Part To drop-down list displays Left Column, and then click the Add button.
7. In the RSS Viewer web part, click Open the Tool Pane Link to edit the settings of the web part (see Figure 4-19).
8. Type http://www.apress.com/resource/feed/newbook in the RSS Feed URL text box.
   

   Figure 4-19. RSS Viewer web part properties

9. Accept all of the other defaults and click OK.
10. On the Ribbon menu, click the Stop Editing button. Your view of the page changes.
11. From the Personalization menu, select Show Shared View. The RSS Viewer web part does not display.
12. Now select Show Personal View in the Personalization menu. At any time, you can reset the page back to the Shared view.
13. From the Personalization menu, select Reset Page Content.
14. A dialog box opens, prompting you to confirm your selection, as shown in Figure 4-20. When you reset the page, all personalized web part settings will be reset to their shared values, and any private web parts will be deleted.

Figure 4-20. Warning dialog box when resetting the web part

Once you reset the page, the Show Personal View menu item is absent until the page is personalized again.

It is sometimes desirable to prevent certain customizations. In Basic mode, you can change options only on the web parts themselves. In Advanced mode, you can place restrictions on the web part zones.

1. Open the WebPartPageDemo page in Design mode in SharePoint Designer.
2. Click the Announcements web part.
3. On the Ribbon menu, click the Web Part tab.
4. In the Allow section, deselect all of the check boxes, as shown in Figure 4-21.
   

   Figure 4-21. Web part Allow settings

5. Save your changes.
6. In the browser, navigate to the WebPartPageDemo page or refresh the page if you are already there.
7. Click the title bar of the Links web part. Notice that there is a drop-down menu that allows you to minimize or export the web part (see Figure 4-22).
   

   Figure 4-22. Edit My Web Part menu.).

8. Click the title bar of the Announcements web part. Notice that the option to minimize or export the web part is not there (see Figure 4-23).
   

   Figure 4-23. Web part without edit menu

9. Go back to SharePoint Designer.
10. Put the page in Advanced editing mode by clicking the Home tab and then clicking Advanced Mode under the Editing section.
11. Click in the right zone labeled Body.
12. In the status bar at the bottom of the page, locate the entry <WebPartPages:WebPartZone#Body> and right-click it (Figure 4-24).
    

    Figure 4-24. Web part zone menu

13. Select Tag Properties from the menu. Web Part Zone Properties dialog box pops up, as you can see in Figure 4-25.
14. In the Frame Style drop-down list, select None. At the bottom of the dialog box, deselect all three check boxes. Then click OK to close the dialog box.
    

    Figure 4-25. Web part zone properties

15. Click the Save button or press Ctrl+S.
16. A dialog box comes up, warning that you are about to customize the page and that the page will no longer be based on the site definition. For this example, click Yes. A new blue icon appears next to the page name in the Navigation pane. This is an indicator that the page has been customized from the site definition (see Figure 4-26).
    

    Figure 4-26. Customized indicator

17. Go back to the browser and refresh the page. (If you are prompted that the page has been modified, click Refresh This Page.) Notice that the Announcements web part does not have a title bar and that nothing changes in the Ribbon menu when you click it.
18. From the Personalization menu, select Personalize This Page. You still have web part zones in the Header and Left areas, but cannot edit the Body web part zone.
19. Click Stop Editing to return to Browsing mode.
20. Go back to SharePoint Designer.
21. In the Navigation pane, right-click the WebPartPageDemo page name and select Reset to Site Definition.
22. A dialog box displays, informing you that resetting to the site definition will replace the contents of this page with the original contents from the site collection, and that a backup copy of the current page will be created in the same folder. Click Yes to confirm that you want to do this. When the page refreshes in SharePoint Designer, the web parts will still be there, but the web part zone customizations that you made previously are reset.
23. Go back to the browser to verify the changes. (You may have to navigate to another page and then back to see your changes.)

In this exercise, you will create a page that utilizes the Filter web part and will connect web parts:

1. If you have not already created a practice site, create a new site based on the Team Site template and name it Chapter 4.
2. Now you’re ready to create and use a new list. Create a new custom list called Territory Sales and add the fields shown in Figure 4-27.
   

   Figure 4-27. Territory Sales field list

3. When you have the list set up, add the values shown in Figure 4-28.
   

   Figure 4-28. Territory list values

   Note It is easiest to add data quickly by placing the list in Datasheet view before adding the values.

4. From within SharePoint Designer, click the Site Pages library in the left Navigation pane.

   Create a new web part page called Connections.aspx. Use the template shown in Figure 4-29.

   

   Figure 4-29. Web part page template

5. From within the editor, click in the left web part zone. From the Insert Web Part menu, choose a Choice Filter web part.
6. Right-click the inserted web part and choose Web Part Properties.
7. In the Filter Name text box, type Group.
8. In the Values box, type the text shown in Figure 4-30.
   

   Figure 4-30. Choice Filter web part settings

9. Open the Advanced Filter Options and type North America as the default value.
10. In the Appearance section, click the Yes radio button and type 300 in the text box indicating a fixed width, as shown in Figure 4-31. Then click OK.
    

    Figure 4-31. Appearance settings

11. Click in the main Body web part zone.
12. From the Insert menu, insert a Data View web part of the Territory Sales list. Your page should look like Figure 4-32 in SharePoint Designer.
    

    Figure 4-32. Group filter web part page

13. Click the Group web part.
14. Select Add Connection from the Web Part Tools menu.
15. When the Web Part Connection Wizard opens, select Send Filter Values To from the drop-down menu, as shown in Figure 4-33. Then click Next.
    

    Figure 4-33. Web Part Connection Wizard’s Send Filter Values To option

16. Accept the defaults and click Next again.
17. Select Territory Sales for the Target Web Part. Select Get Filter Values From for Target Action. Then click Next.
18. Click Choice Filter on the left and Group on the right (see Figure 4-34). Click Next.
    

    Figure 4-34. Web Part Connection Wizard

19. Click Finish.
20. Click the Save button or Ctrl+S.
21. On the Home menu, click Preview in Browser. You should see the page filtered for North America.
22. Click the filter icon and then pick the other filter options. The Data view is filtered based on your selection, as shown in Figure 4-35.

In this exercise, you will use a page with one Data View web part. However, you could use any web part for this exercise.

1. Open the WebPartPageDemo page you created in Exercise 4-2 in Edit mode.
2. Click the Links web part to select it.
3. From the List View Tools Web Part menu, click Save Web Part To File.
4. When the dialog box opens to ask whether you want to always show list data from the current web site, click Yes.

   Note You can save the configured web part directly to the Web Part Gallery by selecting To Site Gallery from the List View Tools Web Part menu.

5. Close the web page.
6. Open the Site Collection settings in the browser and navigate to the Web Part Gallery.
7. On the Documents tab of the Library Tools menu, select Upload Document.
8. When the dialog box opens, fill out the form as illustrated in Figure 4-36. Then click Save.
   

   Figure 4-36. Export Web Part dialog box

9. Open another web part page for editing in SharePoint Designer and click an empty web part zone.
10. On the Insert Web Part menu, find the web part you just uploaded to the gallery. In the example here, it is listed in the SharePoint Designer group and is called Configured Links Web Part (see Figure 4-37). When the web part is inserted, it should look exactly like the original.