Originally, I tried using javascript to make a custom URL field, named 'cc1_website,' change to underlined blue text. Upon clicking the field, a new window would open up with the link. However, this got confusing when the user tried to click the text to modify the link. Should I have the javascript instead only trigger on a double click of the link and allow a single click to make the blue text change back to editable black? Realizing, this would be non-intuitive, I drew inspiration from the magnifying glass icon that CRM uses for lookup fields to create my own version for opening links.



To create your own clickable URL link, start off by navigating to settings->customize entities and open the entity you want to modify. Create a custom attribute named 'cc1_website' or something similar. Modify the form of the entity to add this field. In the Form Properties->OnLoad event, paste the following javascript:

//replace 'cc1_website' with the name of your custom attribute
function loadjscssfile(filename, filetype){
  if (filetype=="js"){
    var fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript")
    fileref.setAttribute("src", filename)
  }
  else if (filetype=="css"){
    var fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
  }
  if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}
//load some styles to display link image and hovering link image
loadjscssfile("http://" + location.host + "/ISV/styles/openLink.css", "css")

var linkTD = document.getElementById('cc1_website_d');
var siteIMG = document.createElement("img");
var siteA = document.createElement("a");

//create img overlay to show "Open Link" when icon is hovered and store javascript to open link
siteIMG.style.width = "22px";
siteIMG.style.height = "19px";
siteIMG.setAttribute("title", "Open Link");
siteIMG.setAttribute("alt", "Open Link");
siteIMG.setAttribute("src", "http://" + location.host + "/ISV/styles/blank.gif");  //1x1 pixel blank overlay image 
siteIMG.onclick = function() {
                    var linkURL = document.getElementById('cc1_website').value;
                    if(linkURL)
                       window.open(linkURL.indexOf('http://')>-1?linkURL:'http://'+linkURL);
                    return false;};
siteIMG.style.visible = false;

//create img
siteA.setAttribute("href", "#");
siteA.style.position = "absolute";
siteA.className = "openLink";
siteA.style.right = "2px";
siteA.style.top = "4px";
siteA.appendChild(siteIMG);

linkTD.style.position = "relative";
linkTD.appendChild(siteA);

The images and files used in the sample can be found here: Download Zip

Make sure to put these files in "C:Program Files\Microsoft Dynamics CRM\CRMWeb\ISV\styles" the ISV folder of your CRM 4.0 on premise install. By default, a 'styles' folder does not exist so please create one.

If you don't like the green arrow button image, feel free to create your own but make sure it has a height of 22px and a width of 19px. You'll also want to create a copy with an orange background that shows up when a user hovers over the button.

This custom button is not simply limited to just opening web links. By passing the contents of the attribute field you can build a variety of useful features, some of which I will detail in future posts. Get creative!

UPDATE: I've added a new post that gives instructions on how to create a click to dial ActionButton for those of you using Cisco IP Phones. Read Post

UPDATE - 02/04/09: A kind reader Randall Smith emailed me to let me know there was a bug in my code that was preventing the images from being displayed. I found that the '"http://" + ' prefix was missing from the two "location.host" addresses. Code has been updated with the change. Thanks Randall!