Converting a SharePoint Custom List View Web Parts into an XSLT Data View Web Parts - Part 1

By:   |   Comments   |   Related: > Sharepoint Design


Many SharePoint portals require extending SharePoint OOB (Out Of The Box) Web Parts. This can lead to the development of custom coded Web Parts. This can be achieved by customizing and converting SharePoint Custom List View Web Parts into XSLT Data View Web Parts.


This solution uses an XSLT DataView.

XSLT "Extensible Stylesheet Language Transformations" is a language for transforming XML documents into other types of documents , such as HTML or XML. It is designed for use as part of XSL which is a style sheet language for XML and also designed to be used independently of XSL.

A DataView is a live, customizable view of a data source that leverages Microsoft's ASP.NET technology that presents views of data that can you filter, sort, or group. You can also change the layout, apply styles or apply conditional formatting in a WYSIWYG environment. A DataView can display data from a wide variety of sources and be modified by using Office SharePoint Designer. These include:

  • Databases queries.
  • XML documents.
  • Web services.
  • SharePoint list & libraries.
  • SeServer - side scripts.

So, a combination between XSLT and a DataView is a great way to modify the look and feel of displayed data in a SharePoint site in order to match your requirements. This will save time and help many non-SharePoint developers users to enhance the look and feel of their Web Parts without writing a single line of code.

In this article (Part-1), you will see how to prepare for "Converting SharePoint Custom List View Web Part into XSLT Data View Web Part" by creating the custom list and displaying the page.

In Part (2), you will see how to create a simple XSLT DataView for a SharePoint custom list.

Create a List and fill it with data

First, let's create a SharePoint custom list "MSSharePointTips - News" and fill it with some sample data:

Note: This tip uses a publishing site.

Open your SharePoint Site, click on the "Site Actions" menu, then "Site Settings", then "Modify All Site Settings" :

site actions

Click on "Site Libraries and Lists" under the "Site Administration" section:

site settings

Click on "Create new content" :

create new content

Then , Click on "Custom List" under "Custom Lists" section :

custom list

Type a Name for the custom list then press the Create button:


Click on "List Settings" under the "Settings" menu:


Create a new Column called "Description". The type should be "Multiple lines of text - Plain text". Then click on "Add from existing site columns" link under the "Columns" section for adding the news image column:


Select the "Rollup Image" site column from the "Available site columns:" list, then press the "Add >" button to be added to the "Columns to add:" list:

rollup image

Click on default the "All Items" view under the "Views" section in order to show/hide columns in the list default view:


- Check "Created (i.e.: News Created DateTime)" , "Rollup Image", "Title" & "Description" columns and adjust their displaying positions:

rollup image

Click on "Column Ordering" under the "Columns" section in order to order/sort the columns in the entry form:

column ordering
field name

Click on "New Item" under the "New" menu items toolbar in order to add a new News item "Sample News data":

sharepoint tips
rollup image

Viewing the "MSSharePointTips News" list after adding a sample news list item:

sharepoint news

Create a new page that will be used to create the XSLT DataView in:

Click on the "Site Actions" menu then "Create Page":

create page

Type a "Title:" (MSSharePointTips-News) for the new page, Description is optional, then select "(Welcome Page) Blank Web Part Page" from the page templates list:


Click on any "Add a web part" button in a Web Part Zone, then select the "MSSharePointTips News" list. Then click on "Publish" button:

checked out

Viewing the "MSSharePointTips News" custom list displayed as a "List View" Web Part in the "MSSharePointTips-News" page:


In this part you have seen how to prepare for "Converting a SharePoint Custom ListView Web Part into XSLT Data View Web Part" by creating a custom list, filling the custom list with sample data then creating a page for displaying the custom list as a ListView Web Part.

In part (2) you will see how to create a simple XSLT DataView for a SharePoint custom list using Microsoft Office SharePoint designer.

Next Steps

sql server categories

sql server webinars

subscribe to mssqltips

sql server tutorials

sql server white papers

next tip

About the author
MSSQLTips author Hesham Saad Hesham Saad

This author pledges the content of this article is based on professional experience and not AI generated.

View all my tips

Comments For This Article

get free sql tips
agree to terms