SharePoint List Type Column to show icon based on file type attached

This article describes how to show the file attachment type in a SharePoint list.

---

Introduction

By default when Type column is enabled it shows a "general" icon for all types of attachment, whatever their file type. Using minimal JavaScript code, we can show the same file type icon as we see in SharePoint library.

Default View

1.) Create a Choice Column say 'DocumentType' in a list with the following values:

pdf

pptx

ppt

docx

doc

xlsx

xls

zip

2.) Update this column value for list items based on the type of attachment.

3.) Now add a Content Editor Web Part on the page and add below code in that.

Code

01.<script type="text/javascript"  src="https://code.jquery.com/jquery-1.11.3.min.js">​</script>
02.<script type="text/javascript">
03.$(document).ready(function(){ 
04.    $('.ms-listviewtable > tbody > tr').each(function () {
05.    var docTypeIcon = getDocTypeImage($(this).find("td:nth-child(<column count*>)").text());
06.    //alert(docTypeIcon);
07.    $(this).find("td:nth-child(<column count*>)").find("img").attr("src",docTypeIcon);
08.}); 
09.function getDocTypeImage(x)
10.{
11.    var imageUrl = '';
12.   switch(x)
13.   {
14.     case 'pdf' : imageUrl =  "/_layouts/images/pdficon_small.gif"; break;
15.     case 'pptx' : imageUrl =  "/_layouts/images/icpptx.png"; break;
16.     case 'ppt' : imageUrl =  "/_layouts/images/icppt.png"; break;
17.     case 'docx' : imageUrl =  "/_layouts/images/icdocx.png"; break;
18.     case 'doc' : imageUrl =  "/_layouts/images/icdoc.png"; break;
19.     case 'xlsx' : imageUrl =  "/_layouts/images/icxlsx.png"; break;
20.     case 'xls' : imageUrl =  "/_layouts/images/icxls.png"; break;
21.     case 'zip' : imageUrl =  "/_layouts/images/iczip.gif"; break;
22.     default: imageUrl = "/_layouts/images/icgen.gif"; break;
23.   }
24.  return imageUrl;
25.}
26. 
27.});
28.</script>

* - Column Count Starts from 1 including default selectAll checkbox column

Result

After adding script:

And, now we can see file type icon based on attachment type.

Note: This only works for single file attachment and not multiple.