Converting URL into clickable links when entered in Additional comments

AbbasP
Tera Guru

Hello All,


Could anyone please advise if there is a way to convert URL addresses entered into a clickable link when "Post" is selected? 
I understand if you wrap the URL into the format [code]<a href'"URL"target="_blank">TAGNAME</a>[/code], it will get the desired outcome. But I don't want the other agents to do this every time they need to provide the end users with a hyperlink.
We have also found that the [code] URL [/code] is visible when sending it using the format above to our end users which is not desirable.

There are similar questions in the earlier threads, but I have not been able to find an answer.

 

A low code to no code approach is ideal, but if not, happy to hear other suggestions.

6 REPLIES 6

Najmuddin Mohd
Mega Sage

HI @AbbasP ,

I can create a UI Action and on clicking of it, a Pop up box will open and you add the link in it.
It will be concatenated with the [code] block and moved to Additional comments.

Let me know if you need this.

Hope this helps.
Regards,
Najmuddin.

Thanks Najmuddin,

I would like to see what that looks like, thank you.

Hi @AbbasP 
On clicking of the UI Action Add link, a pop up box will be displayed to add the link and in the backend the link is concatenated with [code] and [/code].

NajmuddinMohd_0-1727270445413.png


Implementation:


1. Create a UI Action

Name: Add Link
Client: true

OnClick; addLink()

 

 

function addLink() {
	var gdw = new GlideModal('add_link_incident');
	gdw.setTitle('Add the link below.');
	gdw.setPreference('incident_id', g_form.getUniqueValue());
	gdw.render();
}

 

 

 

2. UI page:

 

Navigate to System UI > UI Pages 
Create new one with the following: 
Name; add_link_incident
HTML:

 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<g:evaluate var="jvar_incident_id" expression="RP.getWindowProperties().get('incident_id')" />
	
	<g:ui_form>
		<p>
			<label for="reason"> Add the link: 
			</label>
			<g:ui_multiline_input_field name="reason" mandatory="true" style="width: 100%" />
			<div id="error_reason" style="background-color:pink;text-color:red;border:1px red;visibility:hidden">Please add the link.</div>
		</p>
		
		<input type="hidden" name="incident" id="incident" value="${jvar_incident_id}" />
		<p>
			<g:dialog_buttons_ok_cancel ok="return validateForm();" />
		</p>
		
	</g:ui_form>
</j:jelly>

 

 

Client script:

 

function validateForm(){
	var theReason = gel("reason").value;
	if(theReason.trim() == ""){
		gel("error_reason").style.visibility = "visible";
		return false;
	}
	else
	{
		return true;
	}
	
}

 

 

Processing script:

 

var urlOnStack = GlideSession.get().getStack().bottom();

if (!reason.nil() && incident != '') {
	
	var grIncident = new GlideRecord('incident');
	grIncident.get(incident);
	grIncident.state = IncidentState.IN_PROGRESS;
	var link = '[code]<a href='+ reason + '>'+ reason + '</a>[/code]';
	grIncident.setDisplayValue("comments", link);//comments = reason;
	grIncident.update();
	
}
else {
	gs.addErrorMessage('Please fill in the link.');
}

response.sendRedirect(urlOnStack);

 


Output:

NajmuddinMohd_1-1727270757540.png



If this helps you, Kindly mark it as Helpful and Accept the solution.

Regards,
Najmuddin.



Thanks @Najmuddin Mohd for the steps.
I can see this code creates a link button in the form to paste the URL which is then posted to in the ticket.

I was wondering, instead of a button called Add Link, can the agents just paste the URL in the additional comments field which is normally as plain text and for ServiceNow to be able to identify that a URL has been provided when the Post button is selected. Then have it converted to a clickable link?