Using SharePoint Designer 2010 to Work with Web Parts

  • Article

SharePoint QuickStart Banner

Getting Started with Web Parts in SharePoint 2010:  Learn to use SharePoint Designer 2010 to create a XSLT List View web part.

Applies to: Office 2010 | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio 2010

In this article
Create a Visual Web Part in SharePoint Designer 2010
Modify the XSLT List View Web Part
Test the Project
Next Steps

Published:  April 2010 | Provided by:   Frank Rice, Microsoft Corporation

Click to view video   Watch the Video

In this exercise you create an XSLT List View Web Part within Microsoft SharePoint Designer 2010 that displays a list of employees on the Home page of local Web site. To complete this task, you must do the following:

Note

This Quick Note assumes that there is a custom list named Employees on the website specified in the project. To create the custom list, see the Quick Note Create Linked Lists in SharePoint 2010

  • Create a Visual Web Part in SharePoint Designer 2010

  • Modify the XSLT List View Web Part

  • Test the Project

Create a Visual Web Part in SharePoint Designer 2010

In this task, create a Visual Web Part in Microsoft SharePoint Designer 2010.

To create the visual web part

  1. Start SharePoint Designer 2010 by clicking Start Menu, then click All Programs, click Microsoft Office, and then click Microsoft SharePoint Designer 2010.

  2. Click the Open Site button and in the Open Site dialog window, type the URL of the local Web site (such as https://localhost/SampleWebPartSite) in the Site Name box.

  3. From the SharePoint Site left navigation pane, click the Site Pages tab, and then click Home.aspx.

  4. On the ribbon menu, click Edit File, and then click Edit File in Advanced Mode. Ignore any errors that you may see on this screen by clicking OK.

  5. On the Home view tab, click Code at the bottom of the designer pane to show the code view.

  6. In the code screen, scroll to the bottom of the page and place the pointer before the </ContentTemplate> end tag (after the </WebPartPages:WebPartZone> closing tag) as shown in Figure 1.

    Figure 1. Place the pointer before the </ContentTemplate> tag

    Place the pointer before the ContentTemplate tag

  7. Click the Insert tab on the ribbon, and then click Data View.

  8. In the drop-down list, click Employees. The SharePoint Designer adds the XsltListViewWebPart Web Part to the Home page.

  9. Click Save at the top of the page. If you are prompted for confirmation, click Yes.

  10. Open the browser to the Web site that you specified earlier. At the bottom of the Home page, you should see the XsltListViewWebPart Web Part as shown in Figure 2.

    Figure 2. XsltListViewWebPart Web Part lists employees

    XsltListViewWebPart Web Part list of employees

Modify the XSLT List View Web Part

In this task, modify the Web Part to add formatting and to limit the number of items displayed.

To modify XSLT list view web part

  1. Return to SharePoint Designer 2010and in the design view (click Design at the bottom of the screen), click the table cell that contains the word Title.

  2. In the Apply Styles window on the lower right of the screen, in the Select CSS style to apply pane, scroll down in the Select CSS style to apply pane and then click .ms-bodyareapagemargin. Right-click and then click Apply Style as shown in Figure 3. If the Apply Styles window is not displayed, on the View tab, click Apply Styles under the Task Panes button.

    Figure 3. Apply a new style to the employees list

    Apply a new style to the employees list

  3. In the code view of the designer (click Code at the bottom of the screen), scroll up to RowLimit and change the value to 5.

  4. In the code view of the designer, scroll up to WebPartPages:XsltListViewWebPart and type the ChromeType attribute, and then select TitleAndBorder as the chrome type as shown in Figure 4.

    Figure 4. Select the chrome type

    Select the chrome type

  5. Click Save at the top of the page.

Test the Project

In this task, you verify that the Web Part is displayed and that only five items are shown per page.

To test the project

  1. Open a Web browser to the Web site that you specified previously. You should now see the modified XsltListViewWebPart Web Part listing (similar to Figure 2) with only five employees listed per page.

  2. Click the right arrow at the bottom of the screen to see the next list item.

Next Steps