Create XSLT List View Web Parts using SharePoint Designer 2010

Create XSLT List View Web Parts using SharePoint Designer 2010

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:

Create the XSLT List View Web Part in SharePoint Designer 2010

Modify the XSLT List View Web Part

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 http://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

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

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

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

5. Click Save at the top of the page.