how to add image next to field in attribute

[Deepthi13]

Hi Team, 

I need to place icon next to assignment group/ assigned to field on incident form kindly suggest how to do achieve this, i am trying like below.

[Saurabh Gupta]

For that you have to create a ui macro and place the name of that macro in the attributes as below

ref_contributions=user_show_incidents;user_show_assigned_ci;teams_caller_id

Above is an example of MS Teams icon.

UI Macro: teams_caller_id (Note: Save the teams icon in your instance with name teams.png)

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

	<j:set var="jvar_n" value="teams_${ref}"/>
	<g2:evaluate var="jvar_show_teams_icon" jelly="true">
		var id = __ref__.getSysIdValue();
		if (id == null)
		"none";
		else 
		"";
	</g2:evaluate>
	<a id="${jvar_n}" 
	   onclick="invokeChat('${ref}');" 
	   name="${jvar_n}"  
	   style="display:$[jvar_show_teams_icon]"
	   title="${gs.getMessage('Click to open Teams chat')}"  
	   >
		<img src="teams.png" width="30"   alt="${gs.getMessage('Click to open Teams chat')}" />
	</a>
	<script>
		needsRefreshLoc = false;
		function onChange_teams_show_icon(element, original, changed, loading) {
		var s = '${ref}'.split('.');
		var referenceField = s[1];
		if (needsRefreshLoc == false) {
		needsRefreshLoc = true;
		return;
		}
		if (changed.length == 0) {
		$('${jvar_n}').hide();
		return;
		}
		var usr = g_form.getReference(referenceField, isUserFieldEmpty);
		}

		function isUserFieldEmpty(usr) {
		//alert('cu');
		var e = $('${jvar_n}');
		if (usr!='')
		e.show();
		else
		e.hide();
		}
		var l = new GlideEventHandler('onChange_teams_show_icon', onChange_teams_show_icon, '${ref}');
		g_event_handlers.push(l);	
		function invokeChat(reference) {
		var email='';
		var s = reference.split('.');
		var tableName = s[0];
		var referenceField = s[1];
		var v = g_form.getValue(referenceField);
		var gr = new GlideRecord('sys_user');
		if (gr.get(v)) {
		var prefix = 'msteams:https://teams.microsoft.com/l/chat/0/0?users=';
		var firstname = gr.first_name;
		email = gr.email;
		var subject = '&amp;amp;message=Hi ' + firstname + ', this is regarding your '+tableName+" "+ g_form.getValue('number') + ': ' + g_form.getValue('short_description');
		}
		if(gr.sys_id!=g_user.userID)
		{
		if(email)
		{
		var w = getTopWindow();
		var url = prefix + email + subject;//+'caller_id';
		w.open(url);
		}
		else
		{
		g_form.addErrorMessage("No valid email for the user in the system, hence unable to connect teams");
		}
		}	
		else
		{
		g_form.addErrorMessage("Caller is logged-in user");
		}
		}

	</script>
</j:jelly>

[Deepthi13]

Hi sourabh,  i am trying for slack for assignment group / assigned to field to open slack and below is the macro code i am trying but i am not able to see the logo next to the field. lease guide url for slack

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<j:set var="jvar_n" value=" nb_${ref}"/>
<g2:evaluate var="jvar_show_teams_icon" jelly="true">
var id = __ref__.getSysIdValue();
if (id == null)
"none";
else
"";
</g2:evaluate>
<a id="${jvar_n}"
onclick="invokeChat('${ref}');"
name="${jvar_n}"
style="display:$[jvar_show_teams_icon]"
title="${gs.getMessage('Click to open Teams chat')}"
>
<img src="slack.png" width="30" alt="${gs.getMessage('Click to open Slack chat')}" />
</a>
<script>
needsRefreshLoc = false;
function onChange_teams_show_icon(element, original, changed, loading) {
var s = '${ref}'.split('.');
var referenceField = s[1];
if (needsRefreshLoc == false) {
needsRefreshLoc = true;
return;
}
if (changed.length == 0) {
$('${jvar_n}').hide();
return;
}
var usr = g_form.getReference(referenceField, isUserFieldEmpty);
}

function isUserFieldEmpty(usr) {
//alert('cu');
var e = $('${jvar_n}');
if (usr!='')
e.show();
else
e.hide();
}
var l = new GlideEventHandler('onChange_teams_show_icon', onChange_teams_show_icon, '${ref}');
g_event_handlers.push(l);
function invokeChat(reference) {
var email='';
var s = reference.split('.');
var tableName = s[0];
var referenceField = s[1];
var v = g_form.getValue(referenceField);
var gr = new GlideRecord('sys_user');
if (gr.get(v)) {
var prefix = 'msteams:https://teams.microsoft.com/l/chat/0/0?users=';
var firstname = gr.first_name;
email = gr.email;
var subject = '&amp;amp;message=Hi ' + firstname + ', this is regarding your '+tableName+" "+ g_form.getValue('number') + ': ' + g_form.getValue('short_description');
}
if(gr.sys_id!=g_user.userID)
{
if(email)
{
var w = getTopWindow();
var url = prefix + email + subject;//+'caller_id';
w.open(url);
}
else
{
g_form.addErrorMessage("No valid email for the user in the system, hence unable to connect teams");
}
}
else
{
g_form.addErrorMessage("Caller is logged-in user");
}
}

</script>
</j:jelly>

[Saurabh Gupta]

Do you have saved the image?
Please share the attribute of the fields.

[Basheer]

Hi Deepti,

You need to create an OnLoad Client Script

You need to create an image in db_image : Let us consider you stored it as myImage.jpg
In the OnLoad client script mentione the field name (Here below I've take impact)

var fieldLabel = $('element.incident.impact');
    fieldLabel.setStyle({backgroundImage: "url(myImage.jpg)", backgroundRepeat: "no-repeat", backgroundPosition: "20% 40%"});

Please hit the Thumb Icon and mark as Correct if you find it useful.