How to Format a URL as a Clickable Link in a Text Field in Creatio

If you have a text field that contains a URL, by default in Creatio it will just show as text. Meaning, it will not be a clickable link. You can change this so it works like a text field that also has a clickable link like the out of the box web address field in Creatio. To accomplish this, you’ll need to do the following:

1. Add a normal text field to contain the URL value and add to a page
2. Modify the text field in the diff to add some attributes
3. Add two methods to the page code, one to format the URL and one to respond to when it is clicked

We’ll assume you’ve already added the text field to the page, for this article, we’ll assume the column name is UsrUrlFieldName. Now, you’ll need to locate that text field in the page diff and add the following to the element’s “values”:

"showValueAsLink": true,
"href": {
    "bindTo": "UsrUrlFieldName",
    "bindConfig": {"converter": "getLinkFormat"}
},
"controlConfig": {
    "className": "Terrasoft.TextEdit",
    "linkclick": { bindTo: "onLinkClick"}
}

In the code above, notice the href is bound to the UsrUrlFieldName column and the function names in the href.bindConfig.converter and the controlConfig.linkclick. Those are methods we’ll be adding below. For the getLinkFormat, we’ll return an object with a “url” and a “caption”. We could have a different display value than the actual URL if we wanted, but we’ll pass back the text field’s value for both (so it will look like the url value). For the onLinkClick method to open the url in a new browser tab, we’ll use the code from my previous article Open a Link in a New Browser Tab Without Being Blocked

getLinkFormat: function(value) {
	return {
		"url": value,
		"caption": value
	};
},

onLinkClick: function(url) {
	var link = document.createElement("a");
	link.href = url;
	link.target = "_blank";
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
	return false;
}

With the above in place, the field will look like a text field, the user can click into it and type in a URL, however, when the value changes it will look like a clickable hyperlink. When the user clicks it, our code will open the URL value in a new browser tab.