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.
They can see the list items, just not the icons.
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.
The scr attributes are correct. Can you tell me how to look at/change the permissions on the icons themselves, please?
Thanks
Moira:
The icons are in the file system on the WFEs. I can’t think of any reason why they would be protected. If you see them in regular views, then they are accessible.
M.
I have determined that Site Collection Admins can see the icons but other users cannot. Ordinary users have Read access so I think the permission on the icon file must be restricted. Does that seem a likely conclusion?
Moira:
If you are using the src locations I show above, e.g. /_layouts/images/icxlsx.gif, and the users can see the icons in a normal list view, then it’s not permissions. If they can’t see the icons in a normal list view, then it’s a server configuration issue.
M.
I am using ic{@DocIcon}. Users can see the icons in a normal list view, just not as part of the Content Query WP unless they are members of the Site Collection Admin group.
Do you have a post on how to make this work client side using your SPServices?
No, I don’t think I do. It would be pretty easy, though. Figure out what the file extension is with substring functions and construct the img src from that.
M.
Hi-
How can i display the document context menu which has shared with and edit properties?
@ISM:
I never tried to do that in a DVWP, but it may be possible. Instead, I would add clickable icons to represent the actions we *really* wanted in that context.
M.
thanks for replying. that’s what i did. but for things like “shared with”, i was not able to get the function that triggers that. any advise would be appreciated.
You probably won’t be able to match all the functionary, but do you really need it all?
M.
You are right. Probably not.
I used the code that expands and collapses the grouping by if you wanted to group by more than 3 fields. It works ok, but sometimes when you click on the + sign, the row where the data shows up is squashed. I had to use the code below to make this work:
Sample of the code used:
// More JavaScript tricks from TechTrainingNotes.blogspot.com!
// Fix the way a DataView expands/collapse
//wait until all of the SharePoint stuff is loaded…
_spBodyOnLoadFunctionNames.push(“CustomExpGroupByFix”);
Scripts used to Align the data with the header:
RegisterSod(“core.js”, “https:\u002f\u002fstatic.sharepointonline.com\u002fbld\u002f_layouts\u002f15\u002f16.0.5228.1206\u002fcore.js”);
Hi Mark,
Nice program to find out the icon.
However, i am struggling to get the same functionality in a SharePoint Page with js.
Actually i am using SP online to work and so have put a functionality with JS and REST.
However, i am stuck in this. I know i have other options of finding out but your solution is neat as it uses the oob way of getting the icon(for other file types as well).
thanks
@nabajyoti:
Here’s s little example I’m using in a project. Of course, your mileage may vary:
var docParts = doc.Name.lookupValue.split("."); return docParts !== undefined ? "/_layouts/images/ic" + docParts[docParts.length - 1] + ".png" : "/_layouts/15/images/icgen.gif";Note that this doesn’t handle that fact that some doc types may be unknown.
M.