CustomJS to make phone numbers TEL links

[Cameron]

I’d like to have all phone numbers in my DispForm be links so that in the office softphone users can easily click to dial up our business contacts. In the past I’ve had this working with following ugly code (I’ve never been happy with this solution):

var telval =  getFieldValue("WorkPhone",true);
document.body.innerHTML = document.body.innerHTML.replace(telval, "<a href='tel:" + telval + "'>" + telval + "</a>");

var telval =  getFieldValue("CellPhone",true);
document.body.innerHTML = document.body.innerHTML.replace(telval, "<a href='tel:" + telval + "'>" + telval + "</a>"); 
   
var telval =  getFieldValue("HomePhone",true);
document.body.innerHTML = document.body.innerHTML.replace(telval, "<a href='tel:" + telval + "'>" + telval + "</a>");

I’m now finding that this is causing some strange interference with DFFS scripts (hovering to access the settings doesn’t show, tabs duplicate fields and fail to hide). Has anyone got a better way to make this work? I did play with setFieldValue instead of replacing text on the whole page but didn’t have much luck.

[Alexander Bautz]

Hi,
You can use this code snippet:

function wrapPhoneNumbers(arr){
	var p, v;
	$.each(arr,function(i,fin){
		p = $("#dffs_"+fin).find("td.ms-formbody");
		v = getFieldValue(fin);
		p.html("<a href='tel:"+v+"'>"+v+"</a>");
	});
}
wrapPhoneNumbers(["WorkPhone","CellPhone","HomePhone"]);

Put this code in the Custom JS in your DispForm.

Alexander

[Cameron]

Thanks Alexander!

That’s a much more precise approach than mine. It works perfectly – numbers are tel links and other scripts appear to be unaffected.

[Author]

Posts