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:
- Create a Display Text (single line of text) column that holds the text that will be shown to the user
- Create a URL column (multiple lines of text) to hold the URL itself
- 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.
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('"');
This splits the hyperlink at the double quotation mark and then returns the 2nd 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.