Showing Document Icons in the SharePoint Data View Web Part

When you use the Data View Web Part in SharePoint to display documents in a document library, the "File Type" field that is available is text (doc, pdf, gif, etc.) rather than an icon.  You’d really rather display the icon instead to be consistent with other document library views.  Here’s how you can make that happen easily.

Assuming that you have your Data View Web Part on the page and configured as you’d like it otherwise, insert a column with the "File Type" field in it.  Leave your cursor in that column and switch to the Split view.  Search for the code:

<xsl:value-of select="@File_x0020_Type"/>

and replace it with:

<img src="/_layouts/images/ic{@File_x0020_Type}.gif" border="0"/>

All done!  Note that the /_layouts/images (C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES) directory contains the document icons that SharePoint displays throughout the site collection and that they are all named ic<doc type>.gif.  If you wanted to use custom icons, you could certainly store those in the site collection and change the syntax to use them instead.

7 Comments

  1. I can get the icons to display for everything except PDF. Is there a way to get the PDF icon to display in dataview? It displays in the other views.

    Reply
    • Amanda:

      That’s funny, because I just used this post of mine today to set things up for a client and had the same problem with the PDF icon.

      It all depends on what the PDF icon name is in the file system. The XSL in this post is going to look for the image:

      <img src="/_layouts/images/icPDF.gif" border="0"/>
      

      If the PDF icon isn’t available at that location, you’ll get a broken image or a blank one. The easiest fix is to put an icon into the images folder named exactly that.

      M.

      Reply

Have a thought or opinion?