Enhancing the Attachment User Experience in ServiceNow

To attach a file to a record in ServiceNow the user needs to click the “paperclip” button on the top right corner of the screen. The icon is small and thus I usually have clients wanting to make it bigger, move it, or somehow make it more obvious. Note that the code we go through below uses jQuery to manipulate the paperclip element in the DOM; normally it’s best to use the API but unfortunately we do not have any API methods so this is necessary. To do this it depends on where it is, if it is a UI Page or UI Macro (usually Catalog Item) then attachment dialog can be triggered in HTML as below:

Generate a Link on a Form in a UI Macro or UI Page:

 Click HERE To Attach Your File.

This solves the issue of making it more obvious and makes it more intuitive. If you wanted to simply make the icon bigger then that is fairly straightforward using jQuery and CSS:
Catalog Item

 function onLoad() { 
    jQuery('button.sc_paperclip').css("font-size","37px");
}

Task Form (Incident/Problem/Change, etc.)

 function onLoad() { 
    jQuery("button#header_add_attachment").css("font-size","35px");
}

So these methods work well in making the Attachment functionality more obvious, but what about if you wanted to automatically “trigger” the Attachment dialog functionality (shown when user clicks the paperclip) when something changes, then you can do so using the following:

Client Script

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }
    saveAttachment(g_form.getTableName(), g_form.getUniqueValue());
}