Cool Tip! Show and Hide Loading Dialog Frames

//Cool Tip! Show and Hide Loading Dialog Frames

Cool Tip! Show and Hide Loading Dialog Frames

H

ere’s a very cool (and simple) secret that allows you to show and hide loading dialog screens. These scripts can be run from anywhere in your system that supports client-side javascript.

You’ve probably seen these used in various places in your ServiceNow instance.

Long Loading Form Dialog

To show a loading dialog…

//Show the loading dialog immediately as the form loads
var loadingDialog = new GlideDialogWindow("dialog_loading", true);
loadingDialog.setPreference('table', 'loading');
loadingDialog.setTitle('Loading...'); //Set the loading dialog title here...
loadingDialog.render();

To hide that same loading dialog…

loadingDialog.destroy();

For a practical example of how this could be used, check out the ‘Restrict Report Table Selection by Role’ article here on SNGuru. That solution requires some pretty heavy client-side Javascript that could take a while to execute in certain circumstances. Because of this, it was important that I let the user know that there was something happening that they needed to wait on.

Another great example is a customization I created to deal with long-loading forms. The customization required that a loading dialog be displayed before the form loaded, and that the loading dialog be destroyed when everything on the form finished.

By | 2018-07-09T15:00:03-06:00 January 4th, 2011|Categories: System UI|Tags: , , , |15 Comments

About the Author:

15 Comments

  1. MikeShaw March 9, 2011 at 3:50 am - Reply

    ON my incident form I’m calling client scripts to show hide various fields but if I try using showLoadingDialog(); before the script its not showing it. Any reason why it is not shown on the form.

    • Mark Stanger March 9, 2011 at 6:53 am - Reply

      I’m not sure why this would happen, but I can’t reproduce it at https://demo.service-now.com. The best thing to do is try it out there and see what you get. If you’re still having an issue when you try it on the demo instance then post your code here and I’ll see if I can help.

  2. MikeShaw March 9, 2011 at 9:39 am - Reply

    I saw your script on Demo instance. And if there is a alert in the script then dialogBox is displayed. But if alert is removed and the script is modifed as below it does not show dialog box.

    function onLoad() {
     
       //Type appropriate comment here, and begin script below
     
       showLoadingDialog();
     
       g_form.setDisplay('category', false);
     
    //   alert('Hello');
     
       g_form.setDisplay('category', true);
     
    //   alert('Hello2');
     
        var s = 3;
     
        s=s*1000;
     
        var a=true;
     
        var n=new Date();
     
        var w;
     
        var sMS=n.getTime();
     
        while(a){
     
            w=new Date();
     
            wMS=w.getTime();
     
            if(wMS-sMS>s) a=false;
     
        }
     

     
       hideLoadingDialog();  
     
    }
    • Mark Stanger March 10, 2011 at 5:59 am - Reply

      The code is working, but it is blowing right by the dialog and hiding it before it gets a chance to display. It takes a second for the dialog to get initiated and by the time it does, your script has finished and closed the dialog.

  3. Slava October 17, 2011 at 2:16 am - Reply

    A very cool tip indeed! Is it by any chance possible to alter the title of the dialog window?

    • Mark Stanger October 17, 2011 at 7:24 am - Reply

      Good question. I haven’t tested this extensively, but it looks like you can by using the long-hand way of initiating the dialog and including ‘setTitle’. Let me know how this works…

      loadingDialog = new GlideDialogWindow("dialog_loading", true);
      loadingDialog.setPreference('table', 'loading');
      loadingDialog.setTitle('Hello World!'); //Set the loading dialog title here...
      loadingDialog.render();
      • Brian Broadhurst November 23, 2011 at 4:05 am - Reply

        I’ve tried this suggestion to change the dialogue window title, and it works great – Thanks Mark.

        Brian

  4. Rick June 20, 2012 at 2:24 pm - Reply

    Can the “showloadingdialog” be issued from a List Context UI Action? I have a UI action setup to execute a scheduled job and I wanted to display the Loading dialog for a few seconds while the import completed.

    Thanks for any help.

    Rick

    • Mark Stanger June 20, 2012 at 3:44 pm - Reply

      It can be. You just need to use a ‘Client’ type of UI action to call the function containing the loading dialog. I think the challenge will be hiding the loading dialog once it is loaded though. You’ll have to figure out when and how you can initiate that trigger. Maybe if you used a synchronous ajax call you could initiate the loading dialog, make the ajax call, and then wait until the call came back to hide the dialog, all in the same UI action script.

  5. Mani June 29, 2012 at 2:20 pm - Reply

    Hello Mark,

    This works great. Thanks for the solution.
    But for some users who uses IE this is not working, and these users use IE8. Did you see the issue before.

    • Mark Stanger June 29, 2012 at 2:30 pm - Reply

      I haven’t seen that issue but if I had to guess I would say it is because of a failure somewhere else in one of your client scripts. Check the event log to see if there are any errors.

      • Mani June 29, 2012 at 2:48 pm - Reply

        I checked event and error logs, but nothing is showing up there. Also, if there is a failure in some thing else, all the users should be affected. But only this specific user is affected and for this particular user it is working on other browsers but not on IE8. He is facing this error after this implementation.

  6. murtaza August 20, 2013 at 4:42 am - Reply

    How to modify the position and background color etc of Dialog?

  7. Drew Carpenter February 7, 2014 at 3:34 pm - Reply

    Hi Mark!
    we call showLoadingDialog() in a few places in our client scripts and it’s working great, but now I’m looking into how it works, and I can’t find a UI Page called “dialog_loading”. Should there be one?

    • Mark Stanger February 7, 2014 at 5:03 pm - Reply

      I haven’t dived into the specifics of it, but there isn’t always a UI page that corresponds with a dialog. A lot of times ServiceNow will store the logic in a back-end XML file by the same name. If it’s working and you don’t see a UI page it’s probably back-end XML.

Leave A Comment