Skip to main content

Making Dynamics 365 URL fields pretty with JavaScript

The URL field in dynamics can display web address and also act as a hyperlink. Great if users are going to be updating the field and navigating to the url .In an example situation where either you auto generate the url with a workflow or set using a data import long urls don’t really look that nice on the form.

So what if you could make this url look like hyper linked text with the actual url in the backgroud? I had the idea from Microsoft CRM Techies blog. We can actually change the display name of the field on the fly.
We`ll use the above JavaScript code, add this as a web resource, replace the fieldname variable to the schema name of your url field and also the description to the new display name. You can even set this as another attribute such as the name of a contact or product for example using Xrm.Page.getAttribute or formContext.getAttribute if V9 but we`ll input some text in there for now.

function converttexttoURL() {
var fieldName = "my_fieldname";
var description = "My Nice URL";
var url = Xrm.Page.getAttribute(fldName).getValue();

if (url != null) {
var btnHTML = "<a href='javascript: void(0);' onclick=\"\'" + url + "\', \'windowname1\'); return false;\" style='color:blue;text-decoration:underline !important'>" + description+"</a>";
var getFieldControl = window.parent.document.getElementById(fldName);
// Set the new HTML to the field
getFieldControl.innerHTML = btnHTML;

Upload your webresource and head to the form. In the form properties add the javascript web resource as a library and then an event handler OnLoad of the form calling the “converttexttoURL” function.

After a save and publish , the field should now look like a hyperlinked text with your Url, a hover over the description will show the url. If you know your HTML you can further customize the look of the field, I simply set be it to blue and underlined using the following line in the button html “style=’color:blue;text-decoration:underline !important'”
Also worth noting , the url field will now not be editable on the form, so I recommend making the field read only.

Charles Osei

Dynamics 365 Consultant @ Hitachi MCSE Business Applications Computer Science – University of Lincoln 2017 Nottingham D365/CRM user group Chapter Leader TDG – Community leader Twitter @charlied3v LinedIn

Leave a Reply