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.
17 comments
2 pings
Salil
September 25, 2009 at 10:58 am (UTC -5)
Where is the example ???
Marc
September 25, 2009 at 2:34 pm (UTC -5)
What are you looking for? A screenshot?
Marcus
October 12, 2009 at 11:35 pm (UTC -5)
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.
Marc
October 12, 2009 at 11:44 pm (UTC -5)
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.
Marcus
October 12, 2009 at 11:59 pm (UTC -5)
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!
Marc
October 13, 2009 at 12:02 am (UTC -5)
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.
Marcus
October 13, 2009 at 12:04 am (UTC -5)
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.
Tim
September 14, 2010 at 5:05 pm (UTC -5)
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
Marc
September 14, 2010 at 9:37 pm (UTC -5)
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.
Kevin
October 5, 2010 at 12:07 am (UTC -5)
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
paul
November 9, 2011 at 12:41 pm (UTC -5)
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?
Marc
November 9, 2011 at 6:25 pm (UTC -5)
Paul:
Sure. You can make the icon a link and use the @FileRef value for the href.
M.
Moira
February 21, 2012 at 9:33 am (UTC -5)
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.
Marc
February 21, 2012 at 9:39 am (UTC -5)
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.
Moira
February 21, 2012 at 10:20 am (UTC -5)
They can see the list items, just not the icons.
Marc
February 21, 2012 at 10:27 am (UTC -5)
Well, it’s got to be a permission thing somehow. Check to see if the img tags for the users who can’t see the icons have the correct src attributes. If they are correct, then it’s the permissions on the icons themselves.
M.
Moira
February 21, 2012 at 11:27 am (UTC -5)
The scr attributes are correct. Can you tell me how to look at/change the permissions on the icons themselves, please?
Thanks
Displaying the Document Icon in a CrossList SharePoint 2010 DFWP « Blah-de-blah-blog
May 18, 2011 at 2:30 pm (UTC -5)
[...] when you’re using it as a roll-up. And, once again, I’m finding great info out there on Marc Anderson’s blog about what I want to do. But, once again, it needs a slight tweak to work with a roll [...]
Displaying the Document Icon in a CrossList SharePoint 2010 DFWP | Music Library Blog
September 12, 2011 at 11:22 am (UTC -5)
[...] when you’re using it as a roll-up. And, once again, I’m finding great info out there onMarc Anderson’s blog about what I want to do. But, once again, it needs a slight tweak to work with a roll [...]