making a phone number a clickable link

[Note from Joseph Styons: I updated this post to handle more than one phone #, which the prior example didn't do well]

Hi Ray,

The below steps worked for me:

1 - Extend the OOB “phone view form” with a view form extension (just a dummy or placeholder field is enough)

2 - put a ui model on that extension. be sure to include an HTML file

3 - In the HTML file, add this to the very bottom of the file (change the path according to your preferences):

<!--SCRIPT:/browser/htmlforms/custom/PhoneViewFormExtension.js-->

4 - Create that JS file

5 - Put the following code in it (I've added comments to every line)

In case the JSFiddle goes away, here is the same code (but not as nicely formatted)

(function (f) {
f.on(
{
render: function () {
//get the OOB phone # field(s). if they have viewed > 1, then this will have > 1 entry.
var phonenumberfields = $('[id$=PHONENUMBER_value]');

//they could have many phone #s in the DOM at this time (by expanding & collapsing many detail view forms).
//scan through them all, and perform they 'hyperlink-ing' operation on any you can get your hands on.
for (var i = 0; i < phonenumberfields.length; ++i) {
var currentID = phonenumberfields[i].id;

//grab the actual phone number out of that field
var phoneNumber = document.getElementById(currentID).innerHTML;

//turn the phone # into a hyperlink format (just add tel:)
var telHref = 'tel:' + phoneNumber;

//have we already created a hyperlink for this #?
var alreadyExists = (document.querySelectorAll("a[href='" + telHref + "']").length > 0);
if (!alreadyExists) {

//create a custom hyperlink
var phoneHyperlink = document.createElement('a');

//push the "real" phone number into our custom phone link
phoneHyperlink.textContent = phoneNumber;

//turn it into a proper TEL: link (not just a regular hyperlink)
phoneHyperlink.href = telHref;

//now move the new hyperlink immediately after the OOB field
$(phoneHyperlink).insertAfter($('#' + currentID));

//finally, hide the OOB field, leaving just our custom one
$('#' + currentID).hide();
}
}
}
})
})();

I hope this helps!