By Chris Wallace
This is an issue that has caused me some headaches when working with Adobe's Business Catalyst content management system, so in the interest of trying to prevent the same from happening to you, I'd like to share some tips about these fields. First, an explanation of the behavior.
A custom web app field with type Text (String) will display exactly as entered when outputted on the front end.
A field with type Text (Hyperlink) will output automatically wrapped in an <a> tag with both the href property and the text of the <a> tag set as what you entered.
The result of this is that if you want to display the link on the front end, if you use Text (Hyperlink) you have no choice over what the text actually says. You can't change it to "Click Here", "Article Title", or anything else, it will always be "https://theurlyouentered.com".
Unfortunately, you can't change the type of a field once data has been entered. We set up one client with a web app that had two URL fields, and they entered hundreds of items in to the system. When it came time to display the link on the front end though, I realized that there was no way to edit the text, so instead of the link saying "Click here" as it was supposed to, it was saying "https://urlthecliententered.com", which happened to be quite a long URL with lots of GET variables.
So how did I solve the issue? To sum up the process, first, I created <div>s where the links would go. I then assigned the full output of the adobe tag {tag_fieldname} to a javascript variable. Next, I parsed the actual URL, without the HTML tags, with a regular expression. Finally, I added the script that said when the page loads, insert my own custom <a> tag with the parsed URL as the href value, and the display text of my choice, into the correct <div>. Worked perfectly!
There are two ways to do this, with jQuery and without jQuery. Below are both versions.
<div id="linkgoeshere"></div>
<script type="text/javascript">
var linkhtml = '{tag_fieldname};' //assign output of adobe tag into a JS variable
//it will look like this:
//<a href="https://www.site.com">https://www.site.com</a>
var linkurl = linkhtml.replace(/(<([^>]+)>)/ig,""); //strip out the html tags with a regex
var goodhtml = "<a target='_blank' href='"+linkurl+"'>Click Here!</a>"; //assign the a tag in the format we want to a variable
document.getElementById("linkgoeshere").innerHTML = goodhtml; //insert the html into the div on our page
</script>
<head><script type="text/javascript" src="/js/jquery.js"
</head>
<body>
<div id="linkgoeshere"></div><script type="text/javascript">
var linkhtml = '{tag_fieldname};' //assign output of adobe tag into a JS variable
//it will look like this:
//<a href="https://www.site.com">https://www.site.com</a>
var linkurl = linkhtml.replace(/(<([^>]+)>)/ig,""); //strip out the html tags with a regex
var goodhtml = "<a target='_blank' href='"+linkurl+"'>Click Here!</a>"; //assign the a tag in the format we want to a variable
$("#linkgoeshere").html(goodhtml); //insert the html into the div on our page using jQuery
</script>
</body>
Learn more: Ironpaper: web design