Hi Josh,

You may find below blog helpful.

UI macros Archives - ServiceNow Guru

'Add Me' UI macro for User and Group Fields - ServiceNow Guru  

Adding a UI Macro to a Non-reference Field - ServiceNow Guru

Please help on this Pradeep: How to set the image icon beside priority field?

I know this is older but I was trying to do this and found a pretty good solution. What I ended up doing is creating a UI Macro, then referencing that UI Macro in the field attributes. In the UI macro I had that reference a UI page and was able to write my code there using html, client scripts... etc..

here is my UI macro code

<?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="show_incidents_${jvar_guid}:${ref}"/>
<g:reference_decoration id="${jvar_n}" field="${ref}" 
  onclick="cancelITRecord('${ref}'); "
  title="${gs.getMessage('Cancel IT Record')}" image="images/icons/tasks.gifx" icon="icon-workflow-rejected" />

<script>

function cancelITRecord(reference) {
	
  	var w = new GlideDialogWindow('cancel_it_offboarding_record'); //This is the name of the UI page I created.
  	w.setTitle("");
  	w.render();
}

</script>
</j:jelly> 

this is what I put next to the field to reference the UI macro. right click on field and go to dictionary click on advanced view under related links and put this in Attributes

ref_contributions=cancel_it_record

cancel_it_record is the name of the UI Macro above, replace it with the name of your UI Macro.

create your UI page add HTML and client scripts and processing scripts and your done!

I know this was 3 years ago now, but did you ever get this working?

Nevermind, I figured out after reviewing some existing UI Macros and kazidon's post.

Here my example for a MINUS button I've placed next to a custom Quantity field.

<?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="show_incidents_${jvar_guid}:${ref}"/>
	   <button id="${jvar_n}"
		   type="button"
		   aria-haspopup="true"
		   aria-label="${gs.getMessage('Remove 1 from Quantity')}"
		   onclick="consume_1('${ref}')"
		   name="${jvar_n}"
		   class="btn btn-ref btn-default icon-remove"
		   tabindex="$[jvar_ua_optional_tabindex]"
		   title="${gs.getMessage('Remove 1 from Quantity')}">
   </button>
	
<script>
function consume_1(reference) {
var qty = parseInt(g_form.getValue('u_quantity'));
var new_qty = qty - 1;
g_form.setValue('u_quantity', new_qty);
	}
</script>
</j:jelly>