Creating and Modifying Web Pages in Microsoft SharePoint Designer 2010

Working with Web Parts

In Chapter 3, “Working with Lists and Libraries” you created a Web Part page, inserted an XSLT List View (XLV) Web Part into a Web Part zone, and then customized its properties. You can add the same Web Part to a Web Part page or to a Wiki page by using the browser.

The XLV Web Part is used to display the contents of lists and libraries. Each time the data in the list or library changes, the changes are reflected in the XLV Web Part. You have likely used or seen XLV Web Parts on many pages. For example, when you create a team site, an XLV Web Part on the home page displays files stored in the Shared Documents library. When you display the contents of a task list, the All Tasks view page contains an XLV Web Part. However, you can use many types of Web Parts other than the XLV Web Part.

A Microsoft SharePoint Foundation 2010 installation has 13 built-in Web Parts: Relevant Documents, XML Viewer, HTML Form Web Part, Content Editor Web Part (CEWP), Image Viewer, Page Viewer, Picture Library Slideshow Web Part, Silverlight Web Part, Site Users, User Tasks, SQL Server Reporting Services Report Viewer, What’s New, and Whereabouts. Microsoft SharePoint Server 2010 includes more than 50 additional built-in Web Parts, including Business Data List, Content Query Web Part (CQWP), Current User Filter, Excel Web Access, Visio Web Access, Indicator Details, Search Box, Top Federated Results, Web Analytics Web Part, and SQL Server Analysis Services Filter. Of course, your company may have developed its own Web Parts or purchased third-party Web Parts. A detailed description of all the Web Parts you can find in SharePoint Foundation and SharePoint Server are outside the scope of this book.

A common mistake made by companies new to SharePoint is to spend thousands of dollars and hours of time developing custom Web Parts when one of the built-in Web Parts would meet their business needs. This is especially true given that SharePoint Designer allows you to create a Data View Web Part (DVWP), also known as a Data Form Web Part (DFWP), which is similar to the XLV Web Part and can be used to display and modify data from data sources such as a Microsoft SQL Server database.

Web Parts are also classified by where they are located:

• Dynamic Web Parts By using SharePoint Designer or the browser, you can place these Web Parts in the EmbeddedFormField SharePoint control on Wiki pages or in Web Part zones on Web Part pages. Dynamic Web Parts are stored separately from the page, and only when a user requests the page is the SQL Server content database queried to determine the number of dynamic Web Parts, which Web Parts are being used, where to place them on a page, and, if the page contains Web Part zones, in which Web Part zone the Web Parts should be placed.

• Static Web Parts These Web Parts are placed outside the EmbeddedFormField SharePoint control or outside Web Part zones. Static Web Parts can be created by using SharePoint Designer in advanced edit mode, but they cannot be created by using the browser. Static Web Parts are stored as part of the page.

In this exercise, you add, modify, and delete a Web Part.

1. Place the insertion point on a new line under the text, Wide World Importers Human Resources team site, that you added to the page in the previous exercise, and then click Web Part on the Insert tab.

   

2. On the Web Part menu, click Silverlight Web Part.

   The WebPartPages:SilverlightWebPart control is added to the page. On the Quick Tag Selector, the orange WebPartPagesSilverlightWebPart tag appears.

   

3. Double-click the Silverlight Web Part to open the Silverlight Web Part dialog box. Click Configure to open a second Silverlight Web Part dialog box, and in the URL box type ~site\siteassets\silverlightSPDSBS.xap. Click OK to close the dialog box.

4. Under Appearance in the Title box, type SPD Silverlight. Under Height, select Yes, and type 40.

   

5. Click OK to close the Silverlight Web Part dialog box.

6. Click the Silverlight Web Part, and then on the Web Part Tools, Format tab, clear the Edit in Personal View check box in the Allow group.

   Troubleshooting

   If the Edit In Personal View check box is not displayed, click Allow, and then clear the Edit In Personal View check box.

   NOTE

   The check boxes in the Allow list are the same check boxes as in the Advanced section of a Web Part Properties dialog box.

7. In the workspace, click Shared Documents. On the List View Tools, Design tab, click Options in the Toolbar group, and then click Full Toolbar.

   

   The Shared Documents Web Part reloads and the full toolbar is displayed.

8. Right-click Shared Documents, and then click Web Part Properties.

   

   The Shared Documents dialog box opens.

9. Expand the Layout section, and select the Close the Web Part check box. Then click OK to close the Shared Documents dialog box.

10. Press F12, click Yes to save your changes, and then click Yes to reload your page.

    TIP

    On some laptop computers you might need to press the Fn key with the F12 key to preview the page in the browser.

    A browser window opens and displays the Silverlight Web Part with a Web Part title of SPD Silverlight. The Shared Documents XLV Web Part is not displayed on the page.

    TIP

    Closed Web Parts can increase the time it takes for a browser to load the page. Keep the number of closed Web Parts to a minimum and only close a Web Part when you want to temporarily hide a Web Part and its customizations. In the browser, you can find closed Web Parts by first placing a page in edit mode. Then, on the Editing Tools, Insert tab on the server ribbon, click Web Part, and under Categories, click Closed Web Parts. The Closed Web Parts category appears only if the page contains closed Web Parts. Alternatively, append ?contents=1 to the URL of the page, such as http://wideworldimporters/SitePages/Home.aspx?contents=1, to display the page’s maintenance page.

11. In SharePoint Designer, click the Silverlight Web Part, and then click the label WebPartPages:SilverlightWebPart (above the Web Part) to ensure that the WebPartPages:SilverlightWebPart tag is highlighted in orange on the Quick Tag Selector. Press Delete.

    The Silverlight Web Part is removed from the page.

12. Click the Shared Documents XLV Web Part, and then, on the List View Tools, Web Part tab, click Properties to display the Shared Documents dialog box. In the Layouts section, clear the Close the Web Part check box.

13. On the Quick Access Toolbar, click Save. Click Yes to reload the page, and then click Preview in Browser on the Home tab.

    A browser window opens, the Silverlight Web Part is not displayed, and the Shared Documents Web Part is displayed.