JavaScript Popup Boxes in ServiceNow

///JavaScript Popup Boxes in ServiceNow

JavaScript Popup Boxes in ServiceNow

Standard JavaScript provides 3 different types of popup boxes:  Alert box, Confirm box, and Prompt box.  Since ServiceNow supports standard JavaScript, these popup boxes can be used anywhere in the application where client-side JavaScript is supported.  They will most commonly be used in an ‘onSubmit’ client script or a UI action with the ‘Client’ checkbox checked.  Below are some examples of how each of these popups could be used within the context of a ServiceNow implementation.

Alert Box

An alert box is often used if you want to make sure information comes through to the user.  When an alert box pops up, the user will have to click “OK” to proceed.

This script could be used in an ‘onChange’ client script on the Incident table to alert the user of a change to the ‘Priority’ field.

function onChange(control, oldValue, newValue, isLoading) {
    if (!isLoading)
    alert('You changed priority from ' + oldValue + ' to ' + newValue);
}

If you had a longer message in your alert box, you could make the message a multi-line message like this…

alert('You changed the priority from ' + '\n' + oldValue + ' to ' + newValue + '\n' + 'Longer message text...');


Javascript Alert Popup

Confirm Box

A confirm box is often used if you want the user to verify or accept something.  When a confirm box pops up, the user will have to click either “OK” or “Cancel” to proceed.  If the user clicks “OK”, the box returns true. If the user clicks “Cancel”, the box returns false.

This script could be used in an ‘onSubmit’ client script to ask the user if they really wanted to proceed with the record submission.

function onSubmit() {
   var priority = g_form.getValue('priority');
   if (priority == 1)
      return confirm('Submit a priority one ticket?');
}


JavaScript Confirm Popup

Prompt Box

A prompt box is often used if you want the user to input a value before continuing with an action.  When a prompt box pops up, the user will have to click either “OK” or “Cancel” to proceed after entering an input value.  If the user clicks “OK” the box returns the input value. If the user clicks “Cancel” the box returns null.

This script could be used in a client-side UI action on the Incident table. Make sure that you check the ‘Client’ checkbox and add ‘promptUser()’ (or whatever your function name is called) in the ‘OnClick’ field of your UI action.

function promptUser(){
   var con = prompt("This is really dangerous. \nType 'Continue' if you really want to perform this action.");
   if(con == 'Continue'){
      g_form.setValue('comments', 'Dangerous action performed.');
      gsftSubmit(gel('sysverb_update_and_stay'));
      //gsftSubmit(gel('sysverb_update'));
   }
   else{
      return false;
   }
}


JavaScript Prompt Popup

Additional Alert/Info/Error Message Options

Each of the methods above use standard JavaScript. They’re quick and simple, but sometimes they don’t provide all of the flexibility you need. For example, you can’t change the formatting of text other than to add line breaks in text strings.

ServiceNow provides some other options that you can consider however…

g_form Form and Field messages

I like using form and field messages in place of alerts sometimes because I think it gives a cleaner look than an alert popup. These are very easy to use and, in the case of form messages, support any HTML you want to throw into them. Here’s a quick example, you can view the full messages cheat sheet here.

//Form header info and error messages
g_form.addInfoMessage('<font color="green">addInfoMessage (Green)</font>');
g_form.addErrorMessage('<b>addErrorMessage (Bold)</b>');

//Field info and error messages
g_form.showFieldMsg('caller_id', 'showFieldMsg Info Message', 'info');
g_form.showFieldMsg('caller_id', 'showFieldMsg Error Message', 'error');

Client-side Info and Error Messages

GlideDialog Popup Windows

I’ve written quite a bit of information on some of the cool things you can do with GlideDialog Windows. These allow for pretty much all the functionality you can dream up, but that does come with whatever complexity is required to produce the solution. GlideDialog isn’t going to be a good replacement for standard JavaScript popups, but they might fit the bill when you’ve got a more complex requirement.

By | 2018-07-09T15:01:32-06:00 December 29th, 2009|Categories: Client scripts|Tags: , , , , |11 Comments

About the Author:

11 Comments

  1. Andrew Smith October 26, 2011 at 4:50 am - Reply

    Hi, is there any way you can change the font colour or font size on an alert?

    Thanks

    • Mark Stanger October 26, 2011 at 8:51 am - Reply

      Unfortunately, JavaScript limits you in this respect. You can only control the type of alert box and arrange your text into multiple lines if needed. For more flexibility you should consider a GlideDialogWindow or a g_form info message. I’ve updated this page with more information on these options.

  2. Sharee February 24, 2012 at 7:38 pm - Reply

    Is there a way to make an alert or prompt “pop” on change if the user is list editing? It’s working fine from within my form but lets them list edit without the popup.

  3. Roderick November 12, 2012 at 4:48 pm - Reply

    Is there a way to change the text of the Confirm popup to Yes & No instead of Ok & Cancel?

    • Mark Stanger November 13, 2012 at 6:02 am - Reply

      There’s no way to change those on a standard javascript confirm popup. If you wanted to change the button text, you would have to use an entirely different type of dialog, using ServiceNow popups. That’s quite a bit more complex but there are examples that will get you started on SNGuru if you search for ‘GlideDialog’.

  4. Morgan Glines March 11, 2013 at 7:13 pm - Reply

    Could you please advise if there’s a way of doing this in Workflow? I’d like to prompt the user, then store that value on the scratchpad for use with tasks that are created later on.

  5. Sonia April 10, 2015 at 8:09 am - Reply

    How can I run the OnSubmit client script (confirm box) above only when the record is new? (like current.operation = insert or current.isNewRecord() GlideRecord functionality)

  6. MG July 6, 2016 at 2:57 pm - Reply

    Good note on the “prompt” function:

    If you input a second variable, it will default text into the prompt box.

    Example:
    var releasename = prompt(“What is your new release called?”, “Default value”);

    When the pop-up box appears, “Default value” will already be entered in there.

Leave A Comment