11.2. Inserting Web Parts and Web Part Zones

You insert Web parts on Web pages by using the Add Web Part Web dialog box, which is available in the Edit mode of a SharePoint Web page. To open a Web page in Edit mode, choose Site Actions Edit Page in the SharePoint Web page. By default, SharePoint Web pages contain Web part zones that allow management of Web parts by using the SharePoint user interface. Each Web part zone has the Add Web Part bar at the top, which allows users to access the Add Web Part dialog box for adding Web parts to the zone. Figure 11.6 shows two Web part zones — Left and Right — that have two Web parts each. The Left zone has the Announcements and Calendar Web parts, and the Right zone has the Image and Links Web parts.

Figure 11.6. Examples of Web part zones on a SharePoint Web page

To add a Web part to a zone, simply click the Add Web Part bar to open the Add Web Part dialog box, which shows the list of available Web parts. Simply select the Web parts that you want to insert in a zone and then click Add. The selected Web parts are added to the applicable zone.

Notice the Advanced Web Part gallery and options link at the bottom on the Add Web Part dialog box. As shown in Figure 11.7, clicking on this link opens the Add Web Parts pane on the right side of the Web page.

You can use this pane to add Web parts to the zone selected by using the Add to dropdown menu at the bottom of the pane.

11.2.1. Using the Web Parts task pane

In SharePoint Designer, open a Web page in a SharePoint site and then choose Task Panes Web Parts. The Web Parts task pane, as shown in Figure 11.8, opens.

Figure 11.7. The Add Web Parts pane for a SharePoint Web site

Figure 11.8. You can insert Web parts by using the Web Parts task pane.

The Web Parts task pane shows that both SharePoint and SharePoint Designer have similar user interfaces for inserting Web parts. As in the case of the SharePoint user interface, simply click the Web part you want to insert on a Web page and then click Insert Selected Web Part at the bottom of the task pane.

You can also access the Web Parts task pane by choosing Insert SharePoint Controls Web Part. This menu also allows you to insert a new Web Part Zone on the Web page. Because you can't have a zone inside a zone, the Web Part Zone menu option is grayed out until you place the cursor outside an existing Web part zone.

11.2.2. Commonly used SharePoint Web parts

In this section, I single out some of the interesting Web parts that are very commonly used by site designers for SharePoint sites. While there are a number of specific Web parts providing functionality for Outlook, Business data, Dashboard, Search, etc., available in SharePoint and viewable from the Add Web Part dialog box, the following Web parts allow for generic display of data and Web pages:

• Content Editor: This Web part provides users with a rich text editor that can be used to create content with detailed formatting and graphics. You can also type HTML content for display by using this Web part.

• Current User Filter: This Web part, along with other ones in the Filter category, allows users to filter data in a target Web part by using Web part connections. This Web part provides the information of the currently logged-on user as a value to the connected Web part.

• Page Viewer: Allows you to specify a URL for a Web page to be displayed inside a Web part. The Web page could either be a SharePoint Web page internal to the site or a Web page on an external site.

• RSS Viewer: Allows you to connect to and view an RSS feed either on a SharePoint or external site.

• XML: Allows you to display XML data transformed by using an XSL style on the SharePoint site. You can either type XML data and XSL style by using the Web part properties or specify an XML file to be used as a data source and an XSL file to transform the date for display by using the Web part.

Besides the out-of-the-box SharePoint Web parts, a large number of custom Web parts are available. SharePoint exposes a robust object model that allows Web developers to develop and deploy custom Web parts to facilitate special requirements and functions.

11.2.3. Modifying Web part properties

SharePoint allows users to modify the Web part properties in a browser. If you have the proper SharePoint permissions, you can just click the arrow on the right corner of the Web part to change the Web part properties. As shown in Figure 11.9, you have the following menu options:

Minimize: Allows you to minimize the Web part

Close: Allows you to close the Web part on the page. This means that while the Web part still exists on the Web page, it's not rendered.

Delete: Available only when the page is in Edit mode, this option allows you to delete a Web part from a Web page.

Modify Shared Web Part: Opens the Web Part Properties pane, which allows you to modify the properties for the Web part.

Connections: Available when the page is in Edit mode, this option allows you to create Web part connections.

Figure 11.9. Editing Web part properties for the SharePoint site interface

As previously mentioned, clicking the Modify Shared Web Part menu option opens the Properties pane on the right side of the Web page. As shown in Figure 11.10, besides having some specific Web part properties, the Properties pane shows properties that are generic to all Web parts.

The SharePoint Designer interface to modify a Web part's properties is exactly similar to the SharePoint site user interface. To modify properties of a Web part by using SharePoint Designer, simply right-click on the Web part and then choose Web Part Properties from the popup menu. A Web Part Properties pane very similar to the one available in the SharePoint site interface opens.

If you believe that a Web part on your SharePoint Web page is causing problems in successfully rendering a page in a browser, a good troubleshooting mechanism is to browse to the Web page with the contents query string enabled. To do this, just type ?contents=1 at the end of the Web page URL in the browser address bar. A Web part maintenance Web page, as shown in Figure 11.11, is displayed and allows you to delete problematic Web parts from a Web page, thereby salvaging the Web page for display.

The problematic Web parts might show with the text Error in the column Open on Page?. You can also use this page to close or delete selected Web parts from the associated Web page.

Figure 11.10. The Properties pane for modifying Web part properties in a browser

Figure 11.11. The Web Part Page Maintenance page for troubleshooting Web part rendering issues