SharePoint 2013 Make the document icon in a document library work

We have a customer who is using Colligo Engage for Outlook, uploading emails to SharePoint Online and tagging them with some additional metadata for other departments to keep track of what is occurring.

All of that is well and good but the name column was just too long to display along with all the other columns in the library view. This is a pretty common problem with long file names and one you can usually solve with users who are uploading traditional files but with this process they didn’t modify the file name Colligo automatically generated.

After a lot of research and failed attempts which included workflows to generate short links (various reasons why this doesn’t work) and jquery solutions to make the document icon do something I crafted this jquery script based on other examples.

I’m no expert in jquery but all the examples I found online had issues, the final one I found for getting the row ID of the items in the view almost worked but it returned 3 numbers – ##,##,0 [id = $(this).closest(‘tr’).attr(‘id’);] with the middle one being the current row id. Not sure what the rest were but I looked up how to split a string and grab the number from the index that I wanted [var cleanid = id.split(‘,’)[1] ].

What the script does

This script takes the existing “file type icon” and makes it display the file properties window when you click on it. By default is does nothing and a lot of people complain about it.

This is useful behaviour because the main view only displays some of the columns whereas the document/item properties displays everything that was captured along with the file.

After viewing the properties you can choose whether they want to download and view the uploaded email/file or not.

While you can get to this from the ribbon, that requires three clicks – select the item in the row, click on the items tab in the ribbon and then click on view properties. Not a great user experience.

To use the script you will need to update the site URL portion that is being generated for the link to the display form –
https://yoursite.sharepoint.com/site/site/RecordRepository/

Once you have done that, save it as a .txt file with any name that takes your fancy, e.g. MakeDocIconClickable.txt and upload it to an appropriate library on SharePoint, e.g. Site Assets.

On the Document Library view, edit the page and drop a Content Editor Web Part at the bottom of the page, edit the web part and link it to the txt file you uploaded. You might also want to make sure the chrome type on the web part is set to none and give it a meaningful title so people will know in the future what is it doing.

A future enhancement will be to have the site and document library URL generated automatically like this example.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".ms-vb-icon img").each(function() {
       var alt = $(this).attr('alt').split("_")[0];
    id = $(this).closest('tr').attr('id');
    var cleanid = id.split(',')[1] //Seemed to be getting 3 numbers back from the id variable so split it and grabbed the second
        alt = "https://yoursite.sharepoint.com/site/site/RecordRepository/Forms/DispForm.aspx?ID=" + cleanid; //replace with your site
       var a = $('<a/>').attr('href', alt);
        $(this).wrap(a);
    });
});
</script>

Hope someone else finds this useful.