Displaying the Document Type Icon in a DVWP in SharePoint
Oftentimes you’d like to mimic the out of the box display capabilities of SharePoint when you create a view using a DVWP (Data View Web Part or Data Form Web Part). One of the things you might like to do is to show the document type icon for the documents in your view. These are the little icons that you see in views where you display the Type column for a Document Library, but you might want to show these icons in other cases as well.
By default, these icons are stored in _layouts/images. This maps to the C:/Program Files/Common Files/Microsoft Shared/web server extensions/12/TEMPLATE/IMAGES folder in the SharePoint hive. If you look in that folder, you will see thousands of images, but most of the document type icons take the form IC[Document Type].GIF. So the Microsoft Word icon is ICDOC.GIF.
The information about which icon is displayed for each document type in stored in the DOCICON.XML file which is stored in the hive at C:/Program Files/Common Files/Microsoft Shared/web server extensions/12/TEMPLATE/XML.
The DOCICON.XML file contains mappings for the document type values (the document extensions):
<Mapping Key="doc" Value="icdoc.gif" EditText="Microsoft Office Word" OpenControl="SharePoint.OpenDocuments" />
as well as for the program IDs:
<Mapping Key="Word.Document" Value="ichtmdoc.gif" EditText="Microsoft Office Word" OpenControl="SharePoint.OpenDocuments" />
Finally, the DOCICON.XML file contains a default icon to use in case there isn’t anything specific about the document type or program ID for the specific file. By default, this is the icgen.gif icon — the generic icon.
This is all well and good, but how do you take advantage of this well thought out scheme? Well, the trusty yet surprisingly undocumented ddwrt: namespace comes to the rescue once again. (Thank goodness for this article from Serge van den Oever or all of this would be an unknown mystery.)
There are two ddwrt functions that you can take advantage of here: GetFileExtension and MapToIcon. So, all of this complexity can come down to one simple line to display the document type icon:
<img alt="Type" src="/_layouts/images/{ddwrt:MapToIcon('', ddwrt:GetFileExtension(string(@FileLeafRef)))}"/>
In this example, I want to display the document type icon for a file stored in a Document Library, so I am using the @FileLeafRef column (friendly name: Name). First I call GetFileExtension to pull out the file extension (e.g., doc). Note the type conversion to string. As I have mentioned in previous posts, many of the ddwrt: functions require this explicit conversion. Next, I pass that file extension to the MapToIcon function. The MapToIcon function takes two arguments: Program ID and File Extension. Since I don’t know or care about the Program ID in this case, I leave it blank and just pass in the File Extension. All set: the compound function passes me back the document type icon, easy as pie.
Where is the example ???
What are you looking for? A screenshot?
Hi Marc thanks for this,
Just trying to figure this out as I’m new to the DVWP and am trying to work out how I populate a column with the icons next to my Name (for us in forms) column to match these up.
The code you have written makes sense but could you please show where this fits into the DVWP code. Feel free to email me, any help would be much appreciated.
Marcus:
In your DVWP you should see:
somewhere in the dvt_1.rowview XSL template. You can drop the
<img alt="Type" src="/_layouts/images/{ddwrt:MapToIcon('', ddwrt:GetFileExtension(string(@FileLeafRef)))}"/>from above next to it to see the icon.
M.
Hi again, thanks for the fast reply, its much appreciated, I got this working by pasting in as you recommended, This works well for normal files, but it seems to only pull through the generic icon for folders, Have you come across this?
Thank you for the help!
I don’t think I have, frankly. You could always wrap the img code in an xsl:choose so that you can have different logic for folders. Or not show the folders. Of course, it all depends on your requirements.
M.
Thanks for that, I will do some investigating, I’ll post if I find anything, what you ahve provided so far is a great start for what I’m trying to achieve.
Your help has been much appreciated.
Hi Marc,
Do you know if there is a way do display the icon with the checked out symbol in the case that teh document is?
This was a great little snippit of code. Thanks!!
Tim
Tim:
Looking at how SharePoint does this, it looks like it’s actually the same image with the little checked out arrow added on top of it. (/_layouts/images/checkoutoverlay.gif) The only way I can think of to determine the checked out status is to use the Lists Web Services and look at the properties for the item.
M.
Thanks so much Marc. I don’t know how many tricks I’ve used of yours but all of them always just work.
Cheers
Kevin
Marc,
Is there a way to change the URL path to the document to display just the document icon. So I can click the icon to open the doc.
As it would in th document library?
Paul:
Sure. You can make the icon a link and use the @FileRef value for the href.
M.
Marc, I have a SP2007 site. I got the document icons to display using your method but find that they do not display for every user. All users have Read permissions for the site, except for the Admins and all are using IE7 or IE8.
Do you know what the problem is? Any help would be appreciated.
Moira:
The only thing I can think of is that some users don’t have permissions to the icons themselves. If they are in the file system, though, that shouldn’t be the case.
Are they seeing the list items and not the icons or not seeing the list items at all?
M.