question Re: Adding a button next to field on form in Developer forum

Adding a button next to field on form

codedude — Tue, 19 Jul 2016 17:25:38 GMT

I am trying to add a button next to a field on a form in ServiceNow. I know you can add a button in the banner, list, etc, but I am wanting to add it to the form next to the field. I will show image below.

I want to add this button

Next to this field on the form, not in the banner like it currently is

Re: Adding a button next to field on form

Tim Deniston — Tue, 19 Jul 2016 17:34:20 GMT

Sounds like you need a UI Macro.

Wiki documentation: UI Macros - ServiceNow Wiki

Examples of UI Macros: UI macros Archives - ServiceNow Guru

You should be able to use the examples on the second link to build exactly what you're trying to do.

Re: Adding a button next to field on form

Pradeep Sharma — Tue, 19 Jul 2016 18:05:00 GMT

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

Re: Adding a button next to field on form

prasannakumard — Fri, 02 Feb 2018 11:31:20 GMT

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

Re: Adding a button next to field on form

kazidon — Thu, 03 Jan 2019 18:01:43 GMT

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!

Re: Adding a button next to field on form

Shane J — Mon, 09 Sep 2019 12:36:50 GMT

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

Re: Adding a button next to field on form

Shane J — Mon, 09 Sep 2019 13:48:07 GMT

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>