UI Macro custom Image for Teams Chat button

[SebCastro]

Hello, I am trying to replicate an UI Macro called user_show_incidents specifically this part 

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate var="jvar_guid" expression="gs.generateGUID(this);" />
<j:set var="jvar_n" value="show_incidents_${jvar_guid}:${ref}"/>
<g:reference_decoration id="${jvar_n}" field="${ref}"
  onclick="showRelatedList('${ref}'); "
  title="${gs.getMessage('Show related incidents')}" image="images/icons/tasks.gifx" icon="icon-tree-right"/>
<g:inline template="list2_js_includes.xml"/>

I want to use the same code pretty much but instead of using the icon shown I want to populate an image from the SystemUI, I have tried to do this in many ways and have no idea how to proceed I attempted to use the name of the PNG in the image part and other things like the SysID and link to the image but no luck. Any help will be appreciated 

[S Goutham]

@SebCastro I'm not facing the same issue the icon appears from the loading instance and instantly gets hidden 

to avoid that we can additionally add the style attribute to <a> tag to hide on the load instance just tweak the below line and give it a go

<a class="btn-default;" id="${jvar_n}" onclick="invokeChat('${ref}');" style="visibility:hidden;">

[SebCastro]

@S Goutham I added the Style part and now the icon wont show on load but won't show either when field is populated:

[Ramonrdd3 · Accepted solution]

Hello SebCastro, I faced that scenario on the past and solved it in a similar way S Goutham did.
I studied the functionality already present in the user_show_incidents UI Macro and the reference_decoration UI macro. I don't know jelly yet, but this worked for me.

<?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_guid" expression="gs.generateGUID(this);" />
<j:set var="jvar_n" value="teams_chat_${jvar_guid}:${ref}"/>
<a id="${jvar_n}" class="btn-default" style="visibility: hidden;" onclick="invokeChat('${ref}');">
  <img src="teams.png" width="30" title="Teams Chat" alt="${gs.getMessage('Click to open Teams chat')}" />
</a>
	<script>
	function invokeChat(reference) {

		var prefix = 'msteams:/l/chat/0/0?users=';
		var firstname = g_form.getReference('caller_id').first_name;
		var user = g_form.getReference('caller_id').email;
		var subject = '&amp;amp;message=Hi ' + firstname + ', this is regarding your Incident ' + g_form.getValue('number') + ': ' + g_form.getValue('short_description');

		var w = getTopWindow();
		var url = prefix + user + subject;
		w.open(url);
	}

	// show/hide button based on field value
	function decorationShow(element, original, changed, loading) {
  		var visibility = 'hidden';
		if (changed.length > 0) {
			var parentTr = gel('element.' + element.id);
			if (!(parentTr $[AMP]$[AMP] parentTr.style.visibility == 'hidden'))
				visibility = 'visible';
  		}

  		var e = gel('${jvar_n}');
  		e.style.visibility = visibility;
}

	// handle the onchange event
	var n = '${ref}'.replace(/\./g, '_');
	var h = new GlideEventHandler('onChange_' + n, decorationShow, '${ref}');
	g_event_handlers.push(h);
	</script>
</j:jelly>

on the 4th line of j:set, for the value make sure to use you UI macro name followed by 

_${jvar_guid}:${ref}.