nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

making a phone number a clickable link

Ray Porter

Has anyone ever tried to make phone numbers in CRM clickable? What I'd like to do is add something like a "tel:" tag to the HTML (for example, in the phone view form html). Is something like that even possible given the way CRM html snippets map to the data on the form?

Thanks,

Ray Porter

Find more posts tagged with

Comments

Rick Root

I suspect you could do it with a UI Model but I've never tried... wrapping an anchor tag around the telephone output. Ie,..... <a href="tel:800-555-1212">800-555-1212</a>

Side note. Blackbaud needs to update their "Insert Link" dialog boxes for email and html content. Remove gpher news telnet and wais from the link type dropdown and add "tel:"

wais? gopher? What the heck? Is this 1992?

Rick Root

now that I think a little more about this, I don't really think it could be done without using a bunch of javascript and/or a UI Model....

Ray Porter

Hi Rick,

Unless someone can tell me something different, I've come to pretty much the same conclusion. I think you'd need a UI model to get the HTML snippet to link the JS code. I don't think CLR code would help. I've found several examples that implement this functionality for regular HTML pages but nothing with CRM forms and the corresponding HTML snippet. I guess is they want to move ahead with this, I'll have to try and adapt some of the JS I've found. This would be so much simpler if BB just added a "Telephone" data type to the field drop-down in the data form XML.

Thanks,

Ray

Jennifer Borri

I've added this request to the Ideas Bank. Please vote here.! Thanks!

Joseph Styons

[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):

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!