Removing Form Buttons

Home/Scripting/Client scripts/Removing Form Buttons

Removing Form Buttons

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.

Remove Buttons-Roles View
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.

It can’t be emphasized enough that these modifications are not something that you’re going to need to apply on every form in your system. They are really designed for edge cases where there is no other real solution available. If at all possible, you should use the standard ‘Condition’ field (for role-specific or other criteria) or the ‘UI Action Visibility’ related list (for view-specific criteria) on a UI action and stick to the out-of-box functionality in these cases.

Removing a single button

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.

//Remove the 'Submit' button
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…

//Remove the top 'Submit' button
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

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.

//Remove all buttons except for the 'Update' button
var items = $$('BUTTON').each(function(item){
   if(item.id != 'sysverb_update' && item.id != ''){
      item.hide(); 
   }
});

Disabling the form context menu

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.

function onLoad() {
   //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());
   }
}
By | 2016-07-08T00:33:59+00:00 April 22nd, 2010|Categories: Client scripts|Tags: , , |69 Comments

About the Author:

Mark has worked in the IT industry since 2002 and with ServiceNow since 2007. He is the founder and creator of SN | Guru and the co-founder of Crossfuze, one of the worlds leading ServiceNow consulting partners. Prior to co-founding Crossfuze, he worked for ServiceNow as a Senior Architect on the Professional Services team. He has personally led dozens of successful implementations encompassing every part of the ServiceNow platform. He is also responsible for designing and developing groundbreaking ServiceNow solutions and best practices in the form of various applications, turnkey solutions, and integrations during his tenure at ServiceNow, Crossfuze and, of course, SN | Guru. These solutions are used today by ServiceNow administrators and consultants alike in hundreds of ServiceNow instances around the world!

69 Comments

  1. alli June 16, 2010 at 10:25 pm - Reply

    Hi,

    what if I want to show all but one button

    what should be the value of

    ref.style.display =

    thanks

    • Mark Stanger June 17, 2010 at 1:56 am - Reply

      There’s an example above that shows exactly how to show all but one button.

      • alli June 17, 2010 at 8:03 pm - Reply

        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

        • Mark Stanger June 17, 2010 at 8:12 pm - Reply

          Okay. What you’ll want then is this…

          ref.style.display = ”;

          or this…

          ref.show();

          • alli June 24, 2010 at 7:33 pm - Reply

            that worked. thanks a lot Mark

  2. Brian Broadhurst March 18, 2011 at 1:55 am - Reply

    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

  3. ankush April 29, 2011 at 2:15 am - Reply

    Nice article Mark !!!!

    Came handy in my project 🙂

  4. Blair June 3, 2011 at 2:23 am - Reply

    Mark,

    That worked wonderfully. Thank you very much for your assistance.

  5. sapna sharma November 22, 2011 at 5:48 am - Reply

    I want to remove the green arrow icon
    BACK button from my form
    but I am unable to get button name

    • Mark Stanger November 22, 2011 at 8:16 am - Reply

      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…

      $$('img[id="sysverb_back"]')[0].hide();
  6. Andy Lark November 24, 2011 at 10:12 am - Reply

    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

    • Mark Stanger November 26, 2011 at 11:31 am - Reply

      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.

  7. Edmand March 6, 2012 at 7:21 pm - Reply

    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.

    • Mark Stanger March 6, 2012 at 8:24 pm - Reply

      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.

  8. Edmand Looi March 7, 2012 at 7:01 am - Reply

    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.

    • Mark Stanger March 7, 2012 at 7:05 am - Reply

      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.

  9. Joe Jogmen June 19, 2012 at 10:00 pm - Reply

    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();
    }
    });

    • Mark Stanger June 19, 2012 at 10:37 pm - Reply

      Give this a try…

      //Remove the ‘Submit’ link
      var items = $$('.navigation_link').each(function(item){
      alert(item.innerHTML);
      if(item.innerHTML == 'Submit'){
      item.hide();
      }
      });
      • Joe Jogmen June 19, 2012 at 10:48 pm - Reply

        That works like a charm. As always you rock, thanks!!

      • David Field May 20, 2013 at 8:30 am - Reply

        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?

      • David October 15, 2013 at 10:54 am - Reply

        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?

  10. Taylor Chiu September 10, 2012 at 12:40 pm - Reply

    This may have been made obvious on another page, but how would I go about putting a button on a form? Thanks.

  11. Taylor Chiu September 10, 2012 at 1:44 pm - Reply

    Thank you! To be more specific, is it possible to add a knowledge search icon to a variable on a record producer?

  12. Shaun Oelofsen February 13, 2013 at 7:24 pm - Reply

    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

    • Mark Stanger February 14, 2013 at 6:36 am - Reply

      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.

  13. Chris Haslage April 4, 2013 at 12:55 pm - Reply

    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.

    • Mark Stanger April 4, 2013 at 12:57 pm - Reply

      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.

      • Chris Haslage April 4, 2013 at 12:58 pm - Reply

        Will that work for just this one form? That’s what I’m ultimately looking to do for this form.

        • Mark Stanger April 4, 2013 at 1:01 pm - Reply

          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.

          • Chris Haslage April 4, 2013 at 1:03 pm - Reply

            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.

  14. Tom Joad April 5, 2013 at 4:33 am - Reply

    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

    • Mark Stanger April 5, 2013 at 7:09 am - Reply

      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

      • Tom Joad April 5, 2013 at 8:16 am - Reply

        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?

  15. Tom Joad April 5, 2013 at 8:25 am - Reply

    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

  16. Samir Vyas April 11, 2013 at 1:26 pm - Reply

    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();
    }
    });
    }

    • Mark Stanger April 11, 2013 at 3:39 pm - Reply

      Should just have to change.hide() to .show() to re-display the button.

  17. Gretta April 23, 2013 at 10:57 am - Reply

    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?

    • Mark Stanger April 24, 2013 at 4:25 am - Reply

      It’s not currently possible.

      • Sergej February 13, 2014 at 10:47 am - Reply

        Did someboy find a way to disable/hide ui action in the context menu?

  18. deb August 16, 2013 at 7:37 am - Reply

    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?

    • Mark Stanger August 16, 2013 at 11:20 am - Reply

      Can you try changing your ‘if’ statement to look like this and let me know if that helps?

      if(item.id != ‘IncNoti’ && item.id != ”){

  19. genna September 16, 2013 at 1:44 am - Reply

    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?

  20. David October 15, 2013 at 10:47 am - Reply

    Hello,

    Does anybody knows how to hide the list dropdown menu called “Actions on selected rows..” and the check boxes? Thanks!

    • Michael January 16, 2014 at 6:43 am - Reply

      I’m looking for the same thing. Any info would be greatly appreciated…

  21. Ayush Saxena July 7, 2014 at 5:35 am - Reply

    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”.

  22. Michael August 22, 2014 at 3:15 pm - Reply

    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:

    function onLoad() {
        //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!!

    • Mark Stanger August 22, 2014 at 4:41 pm - Reply

      Give this a try instead and see if it works better for you.

            //Disable all form section header context menus
            $$('tr.header').each(function(elmt) {
               Event.observe(elmt, 'contextmenu', clearMenus());
            });
      • Michael August 25, 2014 at 6:16 pm - Reply

        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?

        • Mark Stanger August 25, 2014 at 10:46 pm - Reply

          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.

          //Hide the back icon on old and new SN UI
          $('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();
      • Hari October 28, 2015 at 1:25 am - Reply

        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’ ..

      • Rewanth July 6, 2016 at 5:33 pm - Reply

        Hi Mark,

        I did try this and its not hiding the context menu 🙁

        Regards,
        Rewanth

        • Mark Stanger July 8, 2016 at 12:39 am - Reply

          I’ve updated for later ServiceNow builds. Give the updated script a try.

  23. Michael August 26, 2014 at 3:28 pm - Reply

    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.

    • Mark Stanger August 26, 2014 at 3:50 pm - Reply

      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.

      • Michael August 26, 2014 at 4:20 pm - Reply

        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.

        • Michael August 26, 2014 at 5:29 pm - Reply

          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.

          • Michael August 26, 2014 at 6:01 pm - Reply

            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!

  24. Kelvin Jones January 6, 2015 at 4:59 am - Reply

    Awesome Article, exactly what I needed.

    Thanks Mark.

  25. June Ralph February 20, 2015 at 8:20 am - Reply

    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 ????

    function onLoad() {
        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();  
       }
    });
        }
    }
  26. David Martin April 29, 2015 at 11:04 am - Reply

    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
    }

    • David Martin April 29, 2015 at 11:21 am - Reply

      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.

    • Hiroto Sakai May 17, 2017 at 9:58 am - Reply

      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
      }

  27. Asha Patil May 10, 2017 at 3:28 am - Reply

    Nice Article. Very useful

Leave A Comment