ecently a colleague asked me for assistance with a customer request. The requirement was to pop up an information or alert message when a user clicked the ‘Edit’ button on the ‘Affected CIs’ related list. The alert message would give them some information or a warning, allow the user to confirm, and then continue on to the edit screen. ServiceNow gives you a lot of control over the behavior of some buttons with the configuration of UI actions. There are other buttons in the system, however, that you can’t easily control…including many related list buttons. In order to meet this requirement I created an ‘onLoad’ client script to attach an event listener and onclick function to the necessary button. Read on to see how it’s done!

Related List Event

There are two important pieces of this script that make it work. The first piece is to correctly identify the related list button that you want to respond to. For this script that requires two pieces of information, the button text (‘Edit…’) and the related list identifier.
The related list identifier is the tricky one to come up with. The surest way to find it is to use a dom inspector like firebug to identify it. It does follow a predictable pattern though so you can usually come up with the correct thing by piecing a few bits of information together like this…

<Parent form table name>.<Referenced table name>.<Connecting field name>_list

So, the ‘Parent incident’ related list on the incident table is referenced by this ID…

And the ‘Affected CIs’ related list on the change request table is referenced by this ID…

The second important piece of this script is the ‘Event.observe’ line (and the Firefox workaround above it). This is how we attach a new ‘onClick’ event to the button we’ve identified.

The full script looks like this. You can modify it for your own use by changing the buttonText and listID variables to identify the correct button. Then you tell it what to do when the button is clicked by putting your own client-side javascript inside of the ‘customOnClick’ function.

function onLoad() {
   //Attach an event listener to the 'Edit' button on the 'Affected CIs' related list
   var buttonText = 'Edit...';
   var listID = 'change_request.task_ci.task_list';
   //Find all buttons for the 'Affected CIs list'
   var buttons = $(listID).select('button');
   buttons.each(function(elmt) {
      if(elmt.innerHTML.indexOf(buttonText) > -1){
         //If the button text matches attach an event listener
         Event.observe(elmt, 'click', customOnClick);

function customOnClick(){
   alert('You clicked me!');