UI Macro custom Image for Teams Chat button

SebCastro · ‎07-11-2024

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

Ramonrdd3 · ‎07-12-2024

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}.

View solution in original post

DYCM · ‎07-11-2024

Hi @SebCastro ,

First, please update your image to Image table (db_image)

Then you will see a message something like below

In your Macro, use it directly

SebCastro · ‎07-11-2024

The problem with that is that the Image will be showing all time, and the Script shown in the example pulls an icon when the Field is populated and is not visible until then, I have a different solution for the UI Macro that places the image directly like you suggest:

<a class="btn-default;" id="${jvar_n}" onclick="invokeChat('${ref}');">
<img src="teams.png" width="30"  title="Teams Chat" alt="${gs.getMessage('Click to open Teams chat')}" />
</a>

It will look like this:

But I Want to achieve something like this:

As you can see the Button wont appear until the CallerID is populated, thing is that Im not able to load the Teams image.

S Goutham · ‎07-11-2024

Hi @SebCastro ,

You will incorporate a promise function to call an event handler that runs onload or on field value change to set the visibility of the icon/img

Please refer to the script below

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:set var="jvar_n" value="User_Ref_${ref}"/>
<a class="btn-default;" id="${jvar_n}" onclick="invokeChat('${ref}');">
<img src="ms_team_icon.png" width="30"  title="Teams Chat" alt="${gs.getMessage('Click to open Teams chat')}" />
</a>
<script>

(function() {
function decShow(element, original, changed, loading) {
var visibility = 'hidden';
if (changed.length > 0)
visibility = 'visible';
var e = gel('${jvar_n}');
e.style.visibility= visibility;
}
var h = new GlideEventHandler('Show_team', decShow, '${ref}');
g_event_handlers.push(h);
})();

function invokeChat(reference){
}
</script>
</j:jelly>

I hope this solves your issue
Mark this as Helpful / Accept the Solution if this clears your issue

SebCastro · ‎07-11-2024

Hi @S Goutham,

Thanks a lot for your reply, I have tried the solution suggested but I get the Icon as soon as the form comes up.

This is my Final Script:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<a class="btn-default;" id="${jvar_n}" onclick="invokeChat('${ref}');">
<img src="teams.png" width="30"  title="Teams Chat" alt="${gs.getMessage('Click to open Teams chat')}" />
</a>
<script>

(function() {
function decShow(element, original, changed, loading) {
var visibility = 'hidden';
if (changed.length > 0)
visibility = 'visible';
var e = gel('${jvar_n}');
e.style.visibility= visibility;
}
var h = new GlideEventHandler('Show_team', decShow, '${ref}');
g_event_handlers.push(h);
})();

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);
}
</script>
</j:jelly>

Do you have any idea why it may not be working?