As of the Winter 2011 release, this technique is no longer necessary for most standard form fields. If possible, you should use the ‘field_decorations’ attribute to point to the UI macro for the field. This post may still be useful for those on running instances on a release earlier than Winter 2011 or those needing to add macros to catalog variables. Click here to see an example of adding macros to catalog variables using client scripts. The client script technique for adding UI macro field decorations may still be preferable in certain situations.

S

ervice-now reference fields allow you to add custom UI macros (which generally appear as icons) next to the input element for the field. A couple of common out-of-box examples of this are the ‘Show related incidents’ macro next to the ‘Caller’ field on the incident form and the ‘Show CI map’ icon next to the ‘Configuration item’ field. The main problem with these are that they are ONLY available to reference fields. So, if you want to do the same thing against a choice or string field you’re out of luck.

There is a way around this limitation though using JavaScript DOM manipulation. In Service-now terms, you can add the equivalent of a UI macro to any non-reference field by creating an onLoad client script to add the icon and corresponding onclick (or other) event. Here’s a simple example of an onLoad client script that you could use on the Incident table to display a macro next to the ‘Number’ field.



function onLoad() {
    //Add a UI macro to a non-reference field
    //Set the name of the field in the 'field' variable
    var field = 'number';
    //Append the table name to get the field id
    field = g_form.tableName + '.' + field;

    try{
    //Create the image element and add to the dom
    $(field).insert({
            after: '<a onclick="doSomething()" name="my_custom_macro" id="my_custom_macro"><img src="images/warning.gifx" alt="Show Macro" title="Show Macro" style="padding-right:4px"></a>'
        });
    }
    catch(e){
    //alert('Error');
    }
}

//onclick event to fire when the image is clicked
function doSomething() {
   alert('You clicked me!');
}

Catalog client script example

The procedure for catalog client scripts is very similar. This is one area where you still need to add UI macros to reference fields via a script. Here’s an example of adding a macro to a catalog variable via a catalog client script…

function onLoad() {
    //Add a UI macro to a non-reference field
    //Set the name of the field in the 'field' variable
    var field = 'caller_id';
    //Append the table name to get the field id
    field = g_form.getControl(field).id;
   
    try{
        //Create the image element and add to the dom
        $('lookup.' + field).insert({
        after: '<a onclick="doSomething()" name="my_custom_macro" id="my_custom_macro"><img src="images/warning.gifx" alt="Show Macro" title="Show Macro" style="padding-right:4px"></a>'
            });
    }
    catch(e){
        //alert('Error');
    }
}

//onclick event to fire when the image is clicked
function doSomething() {
   alert('You clicked me!');
}

Field lock example

Here’s another example of an onLoad client script that you could use on the Incident table to display a lock icon next to the ‘Category’ field. The lock icon will show/hide the ‘Subcategory’ field when it is clicked. You could use something like this to show/hide different elements with a click on the icon.

function onLoad() {
//Hide these fields by default
g_form.setDisplay('subcategory', false);

//Add a UI macro to a non-reference field
//Set the name of the field in the 'field' variable
var field = 'category';
//Append the table name to get the field id
field = g_form.tableName + '.' + field;

try{
//Create the image element and add to the dom
var img = document.createElement('img');
img.src = 'images/locked.gifx';
img.alt='Unlock Fields';
img.title='Unlock Fields';
img.id = 'customLock';
var link = document.createElement('a');
if (navigator.appName == 'Microsoft Internet Explorer'){
link.setAttribute('onclick', Function('toggleLockFields()'));
}
else{
link.setAttribute('onclick', 'toggleLockFields()');
}
link.name='lock_fields_macro';
link.id='lock_fields_macro';
link.appendChild(img);
document.getElementById(field).parentNode.appendChild(link);
}
catch(e){
//alert('Error');
}
}

//onclick event to fire when the image is clicked
function toggleLockFields() {
//Toggle the lock icon
var lock = document.getElementById('customLock');
if(lock.src.indexOf('images/locked.gifx') > -1){
//Show the hidden fields
g_form.setDisplay('subcategory', true);

//Change lock to 'unlocked
lock.src = 'images/unlocked.gifx';
lock.alt='Lock Fields';
lock.title='Lock Fields';
}
else{
//Hide all lock fields
g_form.setDisplay('subcategory', false);

//Change lock to 'locked'
lock.src = 'images/locked.gifx';
lock.alt='Unlock Fields';
lock.title='Unlock Fields';
}
}
I recently wrote a post describing the details of lock icon behavior throughout the tool. Check it out here!