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.

ABOUT THE AUTHOR

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of slxdeveloper.com. He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. His new passion for CRM is Creatio, formerly bpm'online. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) and Creatio (bpm'online) news and product updates!

You have Successfully Subscribed!