Add a clickable, “friendly” title to your Sharepoint Online 2013 documents – AND open them in the browser!

17_6_21_weird_file_names_revision_3.docx -SAY WHAT??

Let’s face it, file names are often not pretty. The underscores, hyphens  and other meta data elements in company naming conventions along with individual quirks and naming habits, can lead to some pretty unfriendly looking links in your document libraries.  You’d think the creators of Office would know better, but Microsoft doesn’t provide a simple way to replace those odd looking links with more descriptive text that would help end users find the files they need.

Rendering html in a calculated field – RIP 6/13/17

The easiest solution was always to use the trusty calculated field to replace the file name with something else that humans might understand. But since Microsoft announced on June 13th they removed the ability to render calculated fields as html (on June 13th  – supposedly to terminate this 10 year old “security risk”  – nice!) – come September (if you got the extension) this will no longer be an option.

Jslink saves the day

Fortunately for now at least, we have jslink – which allows you to rewrite how a web part is rendered. You can google up many expert tutorials on how to use jslink – I’m just concerned here with the specific syntax needed to replace a file name with user friendly text.

To start, add a single line text field to your library to contain the text you want to use, naming it something really original, for example: “Title”.  Overwrite the “Item” ctx element with the following:

overrideCtx.Templates.Item = CustomItem;
function CustomItem(ctx) {
// Build a list item entry for every item in the list.
var ret = “<div class=’link’><a href='<domain/library>” + ctx.CurrentItem.FileLeafRef + “‘>” + ctx.CurrentItem.Title +  “</a> </div>”;
return ret;
}

In this example, “ctx.CurrentItem.FileLeafRef” provides the file name and “ctx.CurrentItem.Title” provides your user friendly title.

Add “open in browser” functionality

The only issue with this approach is it will force users to download the file, and won’t open it in the browser, regardless of the settings you’ve configured for the library (another piece of Microsoft brilliance!)

If you want users to be able to open files in the browser, you’ll need to include one of the url query parameters that enforce that behavior in your script. I found this link format works best:

<domain/library>/_layouts/15/WopiFrame.aspx?sourcedoc=%7B<item guid here>

To derive the internal field name for the item guid, I turned to this handy list of internal field names and found it was “UniqueId”.

So now to display a user friendly file name AND open files in the browser, update the jslink script to:

overrideCtx.Templates.Item = CustomItem;
function CustomItem(ctx) {
// Build a list item entry for every item in the list.
var ret = “<div class=’link’><a href='<domain/library>/_layouts/15/WopiFrame.aspx?sourcedoc=” + ctx.CurrentItem.UniqueId + “‘>” + ctx.CurrentItem.Title + “</a> </div>”;
return ret;
}

 

More fields, no problem

Follow the same syntax above to add any number of other fields to your list view – just make sure they’re included in the view you’re using. And that’s how you turn “17_6_21_weird_file_names_revision_3.docxinto “Weird File Names June 2017”

 

 

 

Leave a Reply