Is it possible to add client-facing graphics to update them on script progress?

Davis Jones

unread,

Jun 5, 2019, 7:21:34 PM6/5/19

to Google Apps Script Community

Hi GAS folks,

I've built a script for my team that takes a little while (~12 seconds) to load, because it's doing some heavy lifting on open. Is there any way that I can create some kind of progress bar or visual to let them know what's happening and, if possible, use some kind of progress graphic?

This is what I'm talking about:

I'd love to build something custom instead of this "running script" dialog that comes up.

Darren D'Mello

unread,

Jun 6, 2019, 8:11:48 AM6/6/19

to google-apps-sc...@googlegroups.com

You can use the toast method of SS

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-apps-script-community.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/629d889e-3fe4-4241-a492-ff7c5b275e30%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Clark Lind

unread,

Jun 6, 2019, 8:16:22 AM6/6/19

to Google Apps Script Community

I'm sure there are a few ways to do this.I use the html service to display a modal dialog... I have a script that takes at least a minute on good days, and 3-4+ on busy-server days. So this is just a reminder.The script continues to run in the background.

My main script calls this function at the beginning:

function main() {
  showDialog();

  rest of script...
}

The show dialog function is pretty straight forward: call/create the html, set your height, width, and window title. In my case, this is in Sheets, so I add it to the Sheets UI:

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Modal')
    .setWidth(230)
    .setHeight(105);
  SpreadsheetApp.getUi() 
    .showModalDialog(html, 'Updating...');
}

The html file (called "Modal"), can be simplified to get rid of the CSS, but I like the look of MaterializeCSS. You can use whatever you prefer. You could even have a simple image link to an animated gif (hosted somewhere online).

This is simply my solution :) The modal dialog just displays, "This could take awhile."

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    
  </head>

  <body>
    <h5>This could take awhile.</h5>
    <p> <button class="btn-small waves-effect waves-light" type="submit" 
        onClick="google.script.host.close()" >Close<i class="material-icons right">play_circle_outline</i></button><P><P>

  </body>

Hope that gives you some ideas! You can test it out by just calling the showDialog() function from the script window. If you are not familiar with the Html service, you create the html file by going to File --> New --> HTML File (don't give it an .html ending, that is done automatically).

Clark

Clark Lind

unread,

Jun 6, 2019, 8:21:01 AM6/6/19

to Google Apps Script Community

And of course, there are simple, elegant solutions... like Toast. ;)

On Thursday, June 6, 2019 at 8:11:48 AM UTC-4, miscellaneousmailer wrote:

You can use the toast method of SS

On Thu, Jun 6, 2019, 4:51 AM Davis Jones <da...@eazl.co> wrote:

Hi GAS folks,

I've built a script for my team that takes a little while (~12 seconds) to load, because it's doing some heavy lifting on open. Is there any way that I can create some kind of progress bar or visual to let them know what's happening and, if possible, use some kind of progress graphic?

This is what I'm talking about:

I'd love to build something custom instead of this "running script" dialog that comes up.

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-community+unsub...@googlegroups.com.

Faustino Rodriguez

unread,

Jun 6, 2019, 7:10:05 PM6/6/19

to Google Apps Script Community

I wanted something like that to show the % progress of the script process

- I tried the SpreadsheetApp.getActiveSpreadsheet().toast(msg), but it keeps showing up and down, as the code updates the progress (not a good experience)

I believe (and still plan to do it someday) that, to get a % progress client-side, there must be a server-client communication

Here two ways that it might be done

+ when client-side starts the long server process, it would also start a second server process within a setTimeout to query the server how is going there
- the long process update the % progress in the user's CacheService with a specific key

- the query process just get that % and return it client side to show it there

- this would have a low overhead

+ Other approach could be using Firebase realtime database as "the cache"

- but this has a higher cost in performance, time and even money if too much usage

On Wednesday, June 5, 2019 at 7:21:34 PM UTC-4, Davis Jones wrote:

Davis Jones

unread,

Jun 7, 2019, 9:24:53 AM6/7/19

to Google Apps Script Community

Fantastic... this is a great start for me! I also love the look of Materialize, so this is perfect. I appreciate the head start on this CW!

Davis Jones

unread,

Jun 7, 2019, 12:15:35 PM6/7/19

to Google Apps Script Community

I've been playing around with this solution and it's almost perfect. However, I'd like to close this dialog box when a sidebar successfully loads. When I use

google.script.host.close()

I find that this causes both the modal dialog and my sidebar to close. Is there a way to close just the modal dialog?

On Thursday, June 6, 2019 at 7:16:22 AM UTC-5, cwlind wrote:

Davis Jones

unread,

Jun 7, 2019, 12:25:29 PM6/7/19

to Google Apps Script Community

Got this sorted. For others' reference, you need to call the server-side sidebar display function with a success handler from a script in the modal HTML. Like this:

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <script>
  window.onload = function() {    
    //console.log('window.onload ran!');

    google.script.run
      .withSuccessHandler(closeDialog)
      .mySidebarFunction() // initiates loading your sidebar
  };

  window.closeDialog = function() { // closes your modal html when the sidebar loads
    google.script.host.close();
  };
</script>

  </head>

  <body>
    <h5>This could take awhile.</h5>
    <p> <button class="btn-small waves-effect waves-light" type="submit" 
        onClick="google.script.host.close()" >Close<i class="material-icons right">play_circle_outline</i></button><P><P>
  </body>

Rock on!

Clark Lind

unread,

Jun 7, 2019, 3:03:49 PM6/7/19

to Google Apps Script Community

Glad to be of help and you got it sorted out!

Clark Lind

unread,

Jun 7, 2019, 3:23:15 PM6/7/19

to Google Apps Script Community

I do use Toast in another script. Instead of a fixed progress indicator, I call it at the beginning of each high-level step in the process... so I get Toasts like:
"Started script..."
"Creating Folders..."
"Creating Document..."
"Adding Doc to folders..."

"Creating Calendar Event..."

"Sending Emails..."
"Finished!"

Each stage lets me know where it is at.

Reply all

Reply to author

Forward