Using SharePoint Designer 2010 to Work with Web Parts
Getting Started with Web Parts in SharePoint 2010: Learn to use SharePoint Designer 2010 to create a XSLT List View web part.
Applies to: Microsoft SharePoint Foundation 2010 | Microsoft SharePoint Server 2010 | Microsoft SharePoint Designer 2010
Published: April 2010 | Provided by: Frank Rice, Microsoft Corporation
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:
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
In this task, create a Visual Web Part in Microsoft SharePoint Designer 2010.
To create the visual web part
Start SharePoint Designer 2010 by clicking Start Menu, then click All Programs, click Microsoft Office, and then click Microsoft SharePoint Designer 2010.
Click the Open Site button and in the Open Site dialog window, type the URL of the local Web site (such as http://localhost/SampleWebPartSite) in the Site Name box.
From the SharePoint Site left navigation pane, click the Site Pages tab, and then click Home.aspx.
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.
On the Home view tab, click Code at the bottom of the designer pane to show the code view.
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
Click the Insert tab on the ribbon, and then click Data View.
In the drop-down list, click Employees. The SharePoint Designer adds the XsltListViewWebPart Web Part to the Home page.
Click Save at the top of the page. If you are prompted for confirmation, click Yes.
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
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
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.
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
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.
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
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
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.
Click the right arrow at the bottom of the screen to see the next list item.