How do I create an ICON next to a reference field to direct it to servicenow catalog item?

[Deepak80]

I have the (i) icon beside a reference field in the change form, I also wanted an additional icon when clicked redirects to one of the service catalog items.

[Maik Skoddow]

This is done via so called UI Macros. The documentation page at https://docs.servicenow.com/bundle/paris-application-development/page/script/server-scripting/concep... is a good starting point for implementing. Also helpful is going through the OOTB UI Macros and copy the code snippets you need.

[Kieran Anson]

This can be achieved with a simple UI Macro, code below:

<?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:reference_decoration id="catitem_${ref}" field="${ref}"
							onclick="launchLink();"
							title="${gs.getMessage('Catalog Item')}"
							icon="icon-cart"/>
	
	<script>
	function launchLink(){
		
		url = "https://www.servicenow.com";
		window.open(url,"_blank");
		
		}
	
	</script>

</j:jelly>

To choose a different icon from icon-cart, use this link.