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”




Calendar Creator Free List Template – Add A Simple Calendar To An Office 365 2013 Public Site

Share events and schedules with the world! This free list template will let you add a list and simple calendar web part to Sharepoint Online 2013 public web sites. See an example here »
Download here »

Compatibility And Limitations
The calendar will display current month view, links to previous and next months and any corresponding events in ANY O365 tenant public site.
The event items cannot be opened by anonymous viewers due to restrictions MSFT has imposed on public sites. However a tool tip will display event date and title when event is moused over.
Enterprise level tenants can enhance the calendar and make event details accessible by allowing anonymous access. To do that you will need to install this solution: (The solution can’t be activated in Small Business accounts).


SPO 2013 Calendar Creator.stp file | Readme.txt file
1/ Download zip file and extract
2/ Open “list template gallery” on desired site [If not in settings, use this url:]
3/ Click “upload document” and navigate to the location the .stp file was saved in.
4/ Click the “cog” icon at top right of page and “Add An App”
5/ Locate “SPO 2013 Calendar Creator” and add to your site
1/ Open your desired web site page for editing or create new
2/ Place cursor where you want calendar to appear
3/ Click the “insert” tab and the “App Part” icon
4/ Locate the SPO 2013 Calendar Creator app and click the “Add” button.
5/ If the standard list view appears, click edit web part and change it over to the “calendar” view.

6/ Save/publish the page

Public view

1/ Click the cog at top right » site contents » locate the list and open
2/ To add an event: “items” tab » new item and fill in the form.
3/ To edit event: click the title in the calendar display and click “edit item” in the ribbon.
4/ Click the “list” tab and “list settings” to reconfigure columns, views etc.

Admin interface


Sharepoint calendars are just lists formatted with a complex view so can’t provide the same functionality as an Exchange calendar. Like any SP list you can set an alert based on a limited set of conditions, such as when an event is added or changed. More sophisticated functionality like setting up reminders would require some hefty customization, using workflows and probably code.
The software includes no warranty but we’ll try to help if you post any problems at:


Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!