JSLink Working with URLs in SharePoint Lists

About a month or so ago we were working on a client project with the requirement to create a mechanism for displaying links to URLs that were too long for hyperlink column in a SharePoint Links List (that column has a 255 character max).

The solution was fairly straightforward. We used JSLink to create a version of the links list that instead used the “multiple lines of text” column.

The setup was simple enough:

1. Create a Display Text (single line of text) column that holds the text that will be shown to the user
2. Create a URL column (multiple lines of text) to hold the URL itself
3. Use JSLink to override the Display Text column and create a hyperlink: <a href=”[URL Column Value]”>[Display Text Column Value]</a>

Easy enough right?

But then we hit a snag, and although it was fairly minor it did give us pause.

Apparently in SharePoint anytime you have a value in a list that begins with the http:// or https:// prefix it gets rendered as a clickable hyperlink. In other words behind the scenes http://google.ca becomes <a href=”http://google.ca”>http://google.ca</a>.

That means that instead of a nice clean output from the JSLink as shown in step 3 above we were instead getting the “<a href=…” output from the URL column nested inside the href=”” field of my hyperlink.

The solution:

A little bit of string manipulation inside the JSLink to purge out the unwanted <a> tag.

When SharePoint renders the links as <a> tags it uses double quotation marks for the href value. Therefore we can simply do:

var hyperlink = [JSLink code to reference your hyperlink column];
var linkHref = hyperlink.split('"')[1];

This splits the hyperlink at the double quotation mark and then returns the 2^nd item in the array which is the URL we want. (Remember 1 is really 2 in an array because the first item is 0).

Obviously add some basic validation to ensure the Hyperlink column really does contain an <a> tag before processing and VOILÀ. Problem solved.