Attach an event listener to a related list button

///Attach an event listener to a related list button

Attach an event listener to a related list button

R

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…
incident.incident.parent_incident_list

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

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!');
}
By | 2018-07-09T14:59:55-06:00 December 1st, 2011|Categories: Client scripts|Tags: , , |4 Comments

About the Author:

4 Comments

  1. Arlen December 2, 2011 at 7:15 am - Reply

    The idea behind this is great Mark – I can already think of few scenarios where this functionality will be useful 🙂

    Came across few odd experiences:
    – Firefox seems to ignore the ‘Alert’ and after a very brief pause continues executing (OK in Chrome)
    – The code above seems to execute on any button not just ‘Edit…’

    Have you come across this?

    • Mark Stanger December 2, 2011 at 11:26 am - Reply

      Good catch! There were a couple of issues here. The first was a misplaced parentheses causing the event to be attached to multiple buttons. The second is that Firefox handles this type of thing completely different from every other browser which means it was blowing past our custom event. I’ve updated the code above to handle both of these issues. Please give it a test and let me know if that works better.

  2. Ashwin July 25, 2013 at 10:06 am - Reply

    Hi Mark,

    I tried the above code to enable this functionality. However, it did pop up the alert message and once I confirmed it by clicking OK, but the slush bucket with affected ci’c did not show up.

    Below is my code

    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!’);

    var uri = action.getGlideURI();
    var path = uri.getFileFromPath();
    uri.set(‘sysparm_m2m_ref’, current.getTableName());
    uri.set(‘sysparm_stack’, ‘no’);
    action.setRedirectURL(uri.toString(‘sys_m2m_template.do’));
    }

    Highly appreciate your response.

    Regards,

    Ashwin

  3. Charles April 15, 2014 at 8:47 am - Reply

    Thanks for this. I was finally able to get it to work. The stumbling block I ran into is my listID didn’t look anything like the format above. I’m using two custom tables with a custom relationship. Via a DOM inspector I was able to find the name. It looks like this:

    list_nav_tablename.REL:sysidForRelationship

    Hopefully this helps someone else.

    Charles

Leave A Comment