How do I convert a URL within a span to a clickable hyperlink?

Jorogumo4 · ‎10-14-2019

Basically what I'm trying to implement within our Incident Table is that, anytime there is a link (i.e. www, https, http, .com) the script client will run onLoad and convert that URL to a clickable hyperlink. I've been digging around a lot and can't quite get it to work for my use.

I was able to find the Element ID of the notes section of the Incident table. However I'm still very much a noob to SN Dev work and still very much a noob when it comes to JS.

I hope I explained this clearly. Thank you in advance for all your help!

function onLoad() {
	//Auto-Detect URL and convert to clickable HTML link
	var txt = document.getElementById("sn_form_inline_stream_entries").value;
	var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
	var txt1 = txt.replace(exp, "<a href='$1'>$1</a>");
	var exp2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
	document.getElementById("sn_form_inline_stream_entries").innerHTML=txt1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>');
}

Below is an example of the span I'm wanting to modify. This span is within the Element ID sn_form_inline_stream_entries.

Basically wanting to turn that https://www.google.com/ into a clickable link.

<span class="sn-widget-textblock-body sn-widget-textblock-body_formatted">Hey I was having issues connecting to this website. https://www.google.com/ Please send help!</span>

Kristian Juul A · ‎10-19-2019

The element ’sn_form_inline_stream_entries’ contains the entire activity stream and you will be manipulating a potentially huge chunk of the DOM that might already contain working links. Instead you could grab the specific elements that can contain text URIs.

function onLoad() { 
	
  var regEx = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  var linkTemplate = '<a href="$1" target="_blank">$1</a>';

  var activityStream = document.getElementById('sn_form_inline_stream_entries');
  var textBlocks = activityStream.querySelectorAll('.sn-widget-textblock-body');
  textBlocks.forEach(function (textBlock) {
    textBlock.innerHTML = textBlock.innerHTML.replace(regEx, linkTemplate);
  });
   
}

I assume that your regular expression does what you need it to do.

For this to work in current versions of ServiceNow you will have to set “Isolate script” to false on the client script:

This is not best practice and will break if the structure of the activity stream changes. It is a rather expensive operation to have running on every form load.

If you are able to manipulate the text before it goes into the journal entry you can format working links with the [code] tag and avoid the script running client side:

This link [code]<a href="https://www.example.com/" target="blank">https://www.example.com/</a>[/code] is an example.

View solution in original post

Jorogumo4 · ‎10-19-2019

I actually now see what you mean by manipulating the text before it goes into the journal entry. 🙂

I will be digging further into this.

Thank you so very much for your assistance!

Kristian Juul A · ‎10-20-2019

"You mention that the way I was approaching it isn't best practices?"

Direct DOM manipulation on a backend form is per definition not best practice. If someone decides to run an audit you might get into trouble.

"We do have lots of people loading incidents at any given time, so if this is a very taxing operation…"

The script runs client side in the browser and will not affect the overall performance on the server. But if a record has a lot of journal entries – and if you run other similarly complicated scripts – the individual users might start to feel a performance difference.

"So are you saying that maybe, by getting that code in via the Service Portal that during the submission of a ticket or a request it will make that a link…"

If the content comes from a record producer it would be an excellent opportunity to add the link formatting before it goes into the journal entry. This way the operation is only performed once.

If you try to manipulate journal fields (comments/work_notes) on a record producer you will not be replacing the content, but instead creating an additional entry. To avoid this you could rename the input field, and you might have to deactivate “Map to field” first.

Record producer script:
(Runs after the form is submitted, but before the record is inserted.)

var commentsFromRecordProducer = producer.my_custom_comments_field;
var commentsWithLinks = yourLinkFormatterScript(commentsFromRecordProducer);
current.comments = commentsWithLinks;

Jorogumo4 · ‎10-29-2019

Sorry to bother you on this one again. We're really close to getting this one. And I greatly appreciate all the help and advice you've given. Here is the code I'm using and it's working fantastic. With one caveat.

var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
var linkTemplate = '[code]<a href="$1" target="_blank">$1</a>[/code]';
current.comments = current.comments.replace(exp, linkTemplate);

I have this running under a business script where any time a new comment is made. It'll search for the link and modify the comment. However, the issue I'm running into is in the screenshot below.

The bottom line of text is what I actually submitted, but the top line is what it inserted? Instead of replacing like I've specified in the script.

Any ideas?

Kristian Juul A · ‎10-30-2019

Can you provide the context for where your script is running?

Jorogumo4 · ‎10-30-2019

It's running as a business rule under our incident table.