Form buttons and context menus are usually a desirable piece of functionality to include on your form. I have seen scenarios before however, where I needed to limit the options available to a user so that they could really only perform one action. The first options that I would consider in these situations is to simply modify the ‘Condition’ field (for role-specific or other criteria) or the ‘UI Action Visibility’ related list (for view-specific criteria) on the particular UI action that I wanted to remove from the user’s view. This is obviously the best and simplest method since it falls in line with the design of the product and doesn’t really require any unusual override of other system behavior.
But what if you need to disable something like the ‘Submit’ button on just a single view of a single form? What if you wanted an easy way to disable everything BUT one button based on a change to a particular field? Modifying the UI action condition in these scenarios might not make sense because you don’t want to include a one-off condition for just a single use case or (in the onChange scenario), the UI action conditions are only evaluated on form load so they wouldn’t apply anyway.
This article shows a couple of client script functions that allow you to remove (show/hide) any button (or all but one button)…and, if necessary, disable the form header right-click context menu entirely.
Removing a single button is accomplished by using this code in an ‘onLoad’ or ‘onChange’ client script. The code gets all of the button elements on a form, iterates through them, and remove any button on the form that has ‘Submit’ as the button text. If your UI action has an ‘Action name’ value specified, you could also remove the button by targeting that ID value specifically. I chose this method because it also works on multi-section forms where you may have multiple sets of the same buttons on a form.
var items = $$('BUTTON').each(function(item){
if(item.innerHTML.indexOf('Submit') > -1){
item.hide();
}
});
To only remove the top button and leave the button at the bottom of the form you can simply have your script exit after the first button is hidden like this…
var items = $$('BUTTON').each(function(item){
if(item.innerHTML.indexOf('Submit') > -1){
item.hide();
throw $break; //Exit after hiding the first 'Submit' button
}
});
Removing all but one button can be accomplished in a similar way to the previous example. This example shows one way you could use the button ID value (as defined in the UI action ‘Action name’ field). This code could be used in a client script to get all of the button elements on a form, iterate through them, and remove any button on the form that doesn’t have ‘sysverb_update’ as the button ID value.
var items = $$('BUTTON').each(function(item){
if(item.id != 'sysverb_update' && item.id != ''){
item.hide();
}
});
The need to disable the entire form section header context menu is extremely rare but may come in useful in certain situations. You can set up an onLoad client script like this to accomplish it.
//Disable the context menu for non-admins
if(!g_user.hasRole('admin')){
//Disable all form section header context menus
$$('tr.header').each(function(elmt) {
Event.observe(elmt, 'contextmenu', clearMenus());
});
//Geneva and Beyond!
var headerID = g_form.getTableName() + '.form_header';
Event.observe($(headerID), 'contextmenu', clearMenus());
}
}
Hi,
what if I want to show all but one button
what should be the value of
ref.style.display =
thanks
There’s an example above that shows exactly how to show all but one button.
Hi Mark,
what I wanted to do was have a reverse on hiding the button, I’m using UI policy run scripts and I have Execute if true script running fine, but I don’t know how to show what I hid and put it in the Execute if false script.
thanks
Okay. What you’ll want then is this…
ref.style.display = ”;
or this…
ref.show();
that worked. thanks a lot Mark
Just came across this post, and it is exactly what I need for a current client requirement. In fact, I have also extended it to change the text on one of the buttons so that ESS users see the same button with a different name. Thanks Mark.
Brian
Nice article Mark !!!!
Came handy in my project 🙂
Mark,
That worked wonderfully. Thank you very much for your assistance.
I want to remove the green arrow icon
BACK button from my form
but I am unable to get button name
That one works a little bit differently. For what it’s worth, I’ve never seen a good reason to do this and it isn’t something I would ever recommend. You can hide it like this though…
Hi, I have used this script in a Client Script and it does indeed stop the right click on the header for non-admins BUT it appears to have disabled the right click on the field names for everybody 🙁 Does anyone know why this is or how I get that functionality back for admins
Thanks, Andy
Hey Andy,
Thanks for pointing this out. I actually think there’s a much better way to disable these now. I’ve updated the code above with the better solution. Please give it a try and let me know how it goes.
Mark,
I am trying to hide some button at the page level, like hidding the Printer icon that is on all our page? Could I use the same method here to hide the buttons/icons at the page level? Thanks.
These scripts are designed to work with UI action buttons. The print icon (and others in the parent frame) can be hidden but they would use a different logic. I don’t have a pre-built script for those.
Mark,
Thanks for the information. Where would I find information on how to disable buttons at the parent frame level. I have looked at ServiceNow Wiki site but didn’t find any clear direction on how to do this. Thanks for your help and any direction you may provided.
I don’t think there is any information on removing those. They’re embedded buttons so there’s not a good, simple way to remove them.
How would you extend/update to remove a Related Link rather than a button? I took a stab and swapped BUTTON with LINK – to no avail…
//Remove the ‘Submit’ button
var items = $$(‘LINK’).each(function(item){
if(item.innerHTML == ‘Submit’){
item.hide();
}
});
Give this a try…
var items = $$('.navigation_link').each(function(item){
alert(item.innerHTML);
if(item.innerHTML == 'Submit'){
item.hide();
}
});
That works like a charm. As always you rock, thanks!!
Hi Mark,
I’ve used a variation on this to remove all links as follows;
//Remove the ‘Submit’ link
var links = $$(‘.navigation_link’).each(function(link){
link.hide();
}
Which works perfectly.
Unfortunately the ‘Related Links’ heading is still present, how would I remove that?
This should work…
It does indeed.
Many thanks.
Would you know how to hide the “Actions on selected rows..” drop down and the the check boxes on the incident lists or any other?
This may have been made obvious on another page, but how would I go about putting a button on a form? Thanks.
Buttons are controlled by UI actions. You can check out the ServiceNow wiki for details.
http://wiki.servicenow.com/index.php?title=UI_Actions
Thank you! To be more specific, is it possible to add a knowledge search icon to a variable on a record producer?
That’s completely different. In order to do that, you have to manipulate the HTML using a catalog client script. I’ve posted a script here that you can use as an example.
https://servicenowguru.wpengine.com/scripting/client-scripts-scripting/mandatory-knowledge-search-ticket-creation/
Hi Mark,
The disabling of the context menu using the script above works great in Firefox, but it causes the page on IE8 to break.
If there any way for this to be cross-browser compatible?
Thanks
There is, and I’m sorry I didn’t have it posted. I’ve actually had a fix for this for quite some time. I just updated the article with the updated script. Please let me know how it works.
What about JUST removing the bottom buttons and keeping the top list? I want to have as minimal space between the form and related lists as possible.
That can be done with a global system property. Navigate to ‘System Properties – UI Properties’ and un-check the ‘Show buttons at end of form (Submit, Update, etc.)’ property.
Will that work for just this one form? That’s what I’m ultimately looking to do for this form.
No, that’s global. I don’t have a client script that hides just those buttons on a single form but It can probably be done. It would be a bit of a hack though.
Thanks anyhow! 🙂 I was just thinking if there was a class called “header” on the top buttons, we can look for any buttons on this form that isn’t in “header” and then remove those.
On this form it would be okay to do, otherwise it would be possibly detrimental.
Does anybody know how to hide the close icon on a popup window…the id is popup_close_image. I tried a few things like:
document.getElementById(‘popup_close_image’).style.display = “none”;
or gel(‘popup_close_image’).hide(); but it thinks the object is null for some reason
Not sure what you’re referring to exactly, but when you’re rendering a popup dialog, you can use something like this to hide the close decoration.
dialog.removeCloseDecoration(); //Remove the dialog close icon
Thanks Mark. I’m referring to we have various views on different forms. One of them is a resolve incident popup window(o dialog) we need to remove the close icon on the top right hand side corner…I’ve tried using a onLoad script but like I said before it doesn’t seem to find the object to hide it…
I’m not sure where/how I’d implement your solution? on the onLoad?
Found out how to do it. In case somebody else needs it:
var diag = new GlideDialogForm(‘Resolve Incident’, table);
diag.removeCloseDecoration();
diag.render();
This goes into an onLoad script
Thank you
Is it possible to show a hidden button? I was able to hide Submit button from the form depending on a category selected. If user selects another category I want to show hidden Submit button. I am using following to hide Submit button
if (newValue == ‘xyz’ || newValue == ‘abc’ || newValue == ‘def’) {
var items = $$(‘BUTTON’).each(function(item){
if(item.innerHTML.indexOf(‘Submit’) > -1){
item.hide();
}
});
}
Should just have to change.hide() to .show() to re-display the button.
It is possible to remove some of functionality of the context menu.
If you remove the ‘Submit’ button from the form but you also want to remove the ability to submit using the context menu, is it possible?
It’s not currently possible.
Did someboy find a way to disable/hide ui action in the context menu?
I’m using the following script to hide the standard ‘Save’ and ‘Save and Exit’ buttons:
function onLoad() {
//Remove the ‘Submit’ button
var items = $$(‘BUTTON’).each(function(item){
if(item.id != ‘IncNoti’){
item.hide();
}
});
}
It works great EXCEPT when the page renders, the top bar (where you right-click for context – not sure what the formal name for that is) drops down and covers the top row of fields on the form. It happens in all browsers. Any thoughts?
Can you try changing your ‘if’ statement to look like this and let me know if that helps?
if(item.id != ‘IncNoti’ && item.id != ”){
Is it possible to Save a task as Draft using the SAVE button for example. Then Submit button would be used when it’s complete/final?
Hello,
Does anybody knows how to hide the list dropdown menu called “Actions on selected rows..” and the check boxes? Thanks!
I’m looking for the same thing. Any info would be greatly appreciated…
Hi,
I tried script to hide context menu for users without admin role. It worked fine with a small glitch. I made a global client script i.e. a client script on global table but after execution it leaves me with an error “Stack over at line 10”.
Hi Mark,
I used this solution to hide the form context menu, the back button and the reference icon on the “Request for” field on the Requested Item form for our ESS implementation using the following code based on your examples:
//Disable the context menu for non-admins and non-itil users
if(!g_user.hasRole('admin') && !g_user.hasRole('itil')){
//Disable all form section header context menu items
$$('form')[0].select('tr.header').each(function(elmt) {
Event.observe(elmt, 'contextmenu', clearMenus());
});
//remove green back button
$$('img[id="sysverb_back"]')[0].hide();
//remove reference icon on Request for user field
$$('img[id="view.sys_user"]')[0].hide();
}
}
This worked fine in Calgary, but when we upgraded to Eureka, it quit working. Is there a way to get this to work in Eureka?
Thanks!!
Give this a try instead and see if it works better for you.
$$('tr.header').each(function(elmt) {
Event.observe(elmt, 'contextmenu', clearMenus());
});
Thanks Mark! That worked great for the context menu.
The green back button and reference icon for any reference variables still show. Is there a way to hide those?
I don’t know exactly what you’re trying to hide or where it is, but this worked for me on the Request item form in a ServiceNow demo instance.
$('sysverb_back').hide();
$$('.icon-chevron-left')[0].hide();
//Hide the reference icon for the Request 'Requested for' field
$('view.sc_req_item.request.requested_for').hide();
is there a way to hide just a single option from the context menu instead of the complete context menu? like if i just want to hide the ‘Save as template’ ..
There’s no way to do this as far as I know.
Hi Mark,
I did try this and its not hiding the context menu 🙁
Regards,
Rewanth
I’ve updated for later ServiceNow builds. Give the updated script a try.
Thanks again! The code for the new SN UI hid the back button.
Sorry I wasn’t more specific on the variables. I am trying to hide the reference icon for any reference variables on the Request Item form for end users. We have reference variables for user, location, and other tables on our various catalog items. If the reference icon is displayed, the end user can click on it and drill into the records which may be confusing. We just want to display a clean Request Item record with the variable values to the end user.
I don’t have a script to hide the reference icons but I can tell you that your script wouldn’t have done that even before your upgrade. The line to hide reference icons in the script you provided only targets a single element. You would need to change that to loop through all of the targeted elements to remove the icons.
That is correct. It only removed the reference icon from the first variable which was a reference to the sys_user table. I wasn’t sure if it was easy to remove the rest of them as well.
Each of these statements will remove the first occurrence of that reference variable type in Calgary:
$$(‘img[id=”view.sys_user”]’)[0].hide(); // reference variable to sys_user table
$$(‘img[id=”view.cmn_location”]’)[0].hide(); // reference variable to cmn_location table
$$(‘img[id=”view.cmn_department”]’)[0].hide(); // reference varialbe to cmn_department table
I’m just having trouble getting them to work in Eureka.
Finally got it. Even though there is only one reference variable of each type on the form, looping through the elements works rather than targeting the first element. This is what worked:
// remove reference icon from all variables referencing sys_user table
$$(‘img[id=”view.sys_user”]’).each(function(img){
img.hide();
});
Thanks for all of your help!
Awesome Article, exactly what I needed.
Thanks Mark.
Hi, I need help, I have the following client script that I want to hide 3 options in the state field and the Resolve Incident button based on the severity field and if the person has the severity_manager role. Hiding the options works but hiding the Resolve Incident button doesn’t. We want only Severity Managers to be able to Resolve/Close these tickets. Can anyone tell me what is wrong with my code ????
var isTRC = g_user.hasRole('severity_manager');
var severity = g_form.getValue('severity');
var state = g_form.getValue('state');
// alert(isTRC);
if (!isTRC && (severity == '1' || severity == '2'|| severity == '3'|| severity == '4'|| severity == '10')){
g_form.removeOption('state', 6);
g_form.removeOption('state', 7);
g_form.removeOption('state', 9);
//Remove the 'Resolve Incident' button
var items = $$('BUTTON').each(function(item){
if(item.innerHTML.indexOf('resolve_incident') > -1){
item.hide();
}
});
}
}
These may come in useful for someone in Eureka, removes the various options on the left of the bar.
function onLoad() {
$$(‘.icon-chevron-left’)[0].hide(); //Back Button
$$(‘.icon-menu’)[0].hide(); // Context Menu
$$(‘.pointerhand’)[0].hide(); // Current View and record number
$$(‘.icon-label’)[0].hide(); // tag button
}
Hi Mark
I’ve just done some further testing, this works as Admin but the bottom 2 are not removed for anyone else. Any ideas why this might be doing this.
On Application [Global], this worked fine in Istanbul P3a. But if not [Global], I couldn’t hide the Back Button.
Does anyone know why this difference occurs?
Thanks.
function onLoad() {
$$(‘.icon-chevron-left’)[0].hide(); // Back Button
}
>> $ (Prototype), $$ (Prototype selector)
Fortunately, I reached a self-solve. Thanks to the great pioneers!
http://sncommander.com/some-common-hurdles-in-scoped-apps-in-servicenow/
Nice Article. Very useful