Customizing a Web Part by Using the Web Part Tool Pane

Once you add a Web Part to the Web Part Page, you might find that you have to customize it to display the content that you wish users to your Web site to see. You might also have to tailor the Web Part’s properties for it to take on the look and feel you require.

In the following exercise, you will customize the Content Editor Web Part and a SharePoint List View Web Part.

BE SURE TO complete the second and third exercises in this chapter before you begin this exercise. Also, you must have created and populated a Picture library, such as the Employee Photos Picture library created in Chapter 5, “Creating and Managing Libraries.” Alternatively, you can create a practice site for this chapter based on the Chapter 15 Starter.stp site template located in the Documents\Microsoft Press\SBS_WSSv3\Chapter 15 folder.

OPEN a SharePoint site. This exercise will use the http://wideworldimporters site, but you can use whatever site you wish. If prompted, type your user name and password, and click OK.

See “Using the Book’s CD” on page xix for instructions on how to create a practice site.

1. Click the down arrow on the title bar of the Content Editor Web Part, and then click Modify Shared Web Part.

Internet Explorer displays the Web page in edit mode, with the Content Editor Web Part outlined with an orange dotted line and its tool pane visible.

2. In the Content Editor Web Part tool pane, click the Rich Text Editor button.

The Rich Text Editor – Web Page Dialog box is displayed. You can use this editor in a very similar fashion to entering text using Microsoft Office Word. You can enter text, change styles, insert hyperlinks, insert pictures, cut, copy, paste, undo, redo, remove formatting, and so on. The shortcut keys that you use in Office Word will also work with this editor.

3. In the Rich Text Editor – Webpage Dialog box, type Welcome to Wide World Importers., and then press to move the cursor to a new line.

4. Select the sentence you just typed, and click the Font Size button. A window appears displaying the range of Font Sizes available.

5. Click 5 – Example Text. The Font Size window closes.

6. On a new line, type Wide World Importers is one of the leading Importers, Exporters and Distributors of unique pieces of art and furniture from around the world. On a second new line, type Who are we? and then press .

7. Format Who are we? as font size 4 – Example Text, and then click the Underline button.

8. Place the cursor on a new line, and click the Insert Image button. The Insert Image – Webpage Dialog box is displayed.

9. In the Alternate Text: textbox, type Olga Kosterina.

10. In the Address textbox, type http://wideworldimporters/Employee Photos/pjcov.jpg. You need to adjust the URL for your SharePoint site location.

Important  

Do not refer to an image that is stored on a hard drive, such as c:/SBS_ WSS/Olga.jpg, because, in most cases, the image displays as a broken link. Internet Explorer tries to resolve the reference to the image file by accessing the user’s local hard drive, which does not contain the folder or the image. You should upload all images into picture or document libraries within the site where the Web Part Page resides and then refer to the image by its URL.

11. Click OK.

12. On a new line beneath the picture, type Olga Kosterina, Owner.

13. Select the text Olga Kosterina, and then click the Insert Hyperlink button. The Insert Hyperlink – Webpage Dialog box is displayed.

14. In the Address textbox, type mailto:[e-mail].

When a user clicks the name Olga Kosterina on your Web page, your mail program opens a new message dialog box to send an e-mail to Olga Kosterina.

15. Click OK.

16. Press + to select all of the content you just entered, and then click the Center alignment button.

17. In the lower right corner, click the Save button.

The Rich Text Editor – Web Page Dialog box closes, and the typed content is displayed in the Content Editor Web Part.

Troubleshooting  

If an Error page displays indicating that the security validation for the page has timed out, click the Refresh page link to try the operation again.

18. Verify that the Content Editor Web Part tool pane is open. If not, click edit on the Content Editor Web Part title bar, and then click Modify Shared Web Part.

19. In the Content Editor Web Part tool pane, click the expand (+) icon next to Appearance to expand the Appearance area.

20. In the Appearance area, in the Title textbox, type Who are we.

21. On the Chrome Type drop-down list, click None.

22. Click OK to close the Content Editor Web Part tool pane.

23. On the title bar of the Furniture Price List Web Part, click edit and then click Modify Shared Web Part.

Internet Explorer displays the Web page in edit mode, with the Furniture Price List Web Part outlined with an orange dotted line and its tool pane visible.

24. In the Furniture Price List tool pane, below the Selected View drop-down list, click the Edit the current view link. The Edit View: Furniture Price List Web page is displayed.

25. In the Columns area, clear the Attachments, In Stock, Unit Price, Total, and Total Cost (if shown) check boxes.

Tip 

In this exercise, you will only display office furniture; therefore, you will use the Furniture Type column to filter data. In the LVWP, the Furniture Type column always contains the text Office. Hence, you could choose not to display the Furniture Type column. However, when you first customize a view, it is good practice to leave the filter column, such as the Furniture Type column, in place so you can check that the filter is configured correctly.

26. Scroll down the page until the Filter area is visible. Select the Show items only when the following is true option.

27. On the Show the items when column drop-down list, click Furniture Type. In the Value text box, type Office.

28. At the bottom of the page, click OK.

Your Web page is displayed. The Furniture Price List tool pane is no longer visible.

29. On the title bar of the Furniture Price List Web Part, click edit and then click Modify Shared Web Part. The Furniture Price List tool pane is displayed.

30. On the Toolbar Type drop-down list, click Summary Toolbar.

31. Click the expand (+) icon for the Appearance area, and in the Title textbox, type Sale – Office Furniture at half price.

32. Click the expand (+) icon for the Advanced area and clear the Allow Minimize, Allow Close, and Allow Editing in Personal View check boxes so that a user to this Web page cannot personalize or accidentally close or minimize this Web Part.

33. At the bottom of the Furniture Price List tool pane, click OK.

34. On the title bar of the Furniture List Price Web Part, click edit and notice that the Minimize and Close options are no longer available.

CLOSE Internet Explorer.