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!
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…
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.
//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!');
}
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?
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.
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
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