Learn more about SQL Server tools

mssqltips logo
 

Tutorials          DBA          Dev          BI          Career          Categories          Webcasts          Whitepapers          Today's Tip          Join

Tutorials      DBA      Dev      BI      Categories      Webcasts

DBA    Dev    BI    Categories

 

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


By:   |   Read Comments   |   Related Tips: > Sharepoint

"SQL Server in The Cloud" - click to register for this free webcast


Problem

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.

Solution

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.

Part (1) covered how to prepare for "Converting a SharePoint Custom List View WebPart into an XSLT Data View WebPart" by creating the custom list and displaying a page.

In this article (Part - 2), you will see how to create a simple XSLT DataView for a SharePoint custom list by following the steps below:

Customizing & Converting the "MSSharePointTips News" ListView WebPart into "XSLT DataView" WebPart  :

Click on the "Start" button, then Select "All Programs", "Microsoft Office", then "Microsoft Office SharePoint Designer 2007":

windows
  • Click on "File", "Open Site".
  •  Then type your site URL
  • Then expand the "Pages" directory and right click on the "MSSharePointTips-New" page and select "Detach from Page Layout"
  • Then click the "Yes" button for confirmation, then "Yes" again for check out your page
  • Wait until receiving a confirmation message that the page was detached successfully and can now be edited :
detach from page layout
sharepoint designer
microsoft office sharepoint
designer

After displaying the detached "MSSharePointTips-News" page , Right click on the "MSSharePointTips News" ListView Web Part then select "Web Part Zone Properties" :

paste

Select "None" for "Chrome Type" under the "Appearance" section in order to remove/hide the "MSSharePointTips News" title from the ListView Web Part:

sharepoint tips

Viewing the "MSSharePointTips News" ListView WebPart after removing/hiding the "Title" :

header

Right click on the "MSSharePointTips News" ListView WebPart, then select "Convert to XSLT Data View":

administrator

Viewing the converted "MSSharePointTips News" ListView WebPart into an "XSLT DataView WebPart" :

creating control

(Note: The list toolbar "Menu" rendered incorrectly holds "Error Creating Control" in the design view. So if you need to remove the toolbar and also the paging in order to display all list items):

Right click on the converted "DataFormWebPart"  then select "Show Common Control Tasks ('Common Data View Tasks') ":

commont data view tasks

Uncheck "SharePoint List Toolbar" under "General" tab and Select "Display all items" under "Paging" tab:

data view properties
data view properties

Viewing the converted "DataFormWebPart" after removing the toolbar & paging:

web part pages

(Note : The "Rollup Image" field displayed as HTML tags "for example: Text in the runtime". Although it should be displayed as an image, in order to fix this, you have two options:

Either, just click on the drilled (Context) down menu for the generated HTML Rollup Image tag and format as : "Label" or "Rich Text" ):

text

Or, select the Rollup Image field to highlight it, then switch to the code view, then add " disable-output-escaping="Yes" "tag to the XSL".

Here is the result after formatting the Rollup Image field :

web part

Let's remove the columns headers for enhancing the look and feel by right clicking on and column header cell then select "Delete", then "Delete Rows" :

delete

Viewing the converted "DataFormWebPart" after removing the columns headers row:

form web part

You can apply some enhancements on the look and feel and layout by drag & drop, merging, adding and deleting cells, ... etc then save the page :

point tips

Here's the result after enhancing the look and feel for the converted "DataFormWebPart" in the page:

Click for Larger Image
Next Steps


Last Update:


next webcast button


next tip button



About the author





Post a comment or let the author know this tip helped.

All comments are reviewed, so stay on subject or we may delete your comment. Note: your email address is not published. Required fields are marked with an asterisk (*).

*Name    *Email    Email me updates 


Signup for our newsletter
 I agree by submitting my data to receive communications, account updates and/or special offers about SQL Server from MSSQLTips and/or its Sponsors. I have read the privacy statement and understand I may unsubscribe at any time.



    



Learn more about SQL Server tools