A dialog box during function execution

Ihor Stefurak

unread,

Feb 8, 2022, 11:48:06 AM2/8/22

to Google Apps Script Community

I have an IMPORTCSV() function to import .csv files.

Sometimes files are big, so importing takes 1-2 mins. I would like to show a dialog box to the user during the function execution.

Something like:
- when the user starts importing we show a dialog box with some text
- when the process is done we close the dialog box

No progress bar, just a popup notification.

Have you seen any tutorials? I can't find it.

Thanks.

Edward Ulle

unread,

Feb 8, 2022, 12:44:03 PM2/8/22

to Google Apps Script Community

You can use HTML Service. This is just an example you can edit as you need. The dialog will remain open as long as importCSV takes to finish.

First add the following to your Code.gs file:

function onOpen() {
  var menu = SpreadsheetApp.getUi().createMenu("Test");
  menu.addItem("Dialog","showDialog");
  menu.addToUi();
}

function showDialog() {
  try {
    var html = HtmlService.createTemplateFromFile('HTML_Dialog').evaluate();
    SpreadsheetApp.getUi().showModalDialog(html,"Show Dialog");
  }
  catch(err) {
    SpreadsheetApp.getUi().alert(err);
  }
}

function importCSV() {
  Utilities.sleep(5000);
}

Then create your HTML_Dialog html file:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello there</h1>
    <script>
      (function () {
        google.script.run.withSuccessHandler( function () {
          google.script.host.close();
        }).importCSV();
      }());
    </script>
  </body>
</html>

Ihor Stefurak

unread,

Feb 9, 2022, 6:25:23 AM2/9/22

to Google Apps Script Community

Thanks, that's great.

How can I pass a parameter to the HTML_Dialog html file? The function importCSV() should have a URL — importCSV(URL). Any ideas?

Edward Ulle

unread,

Feb 9, 2022, 9:36:05 AM2/9/22

to Google Apps Script Community

Where does the URL come from? For example:

function importCSV() { // called from google.script.run

var url = SpreadsheetApp.getActiveSpreadsheet().getRange("A1").getValue();

importCSV_2(url); // another function in Code.gs

Ihor Stefurak

unread,

Feb 9, 2022, 10:27:38 AM2/9/22

to Google Apps Script Community

It comes from a user via an input box on the sidebar. The user adds a URL and clicks a submit button. How to pass it from there?

Edward Ulle

unread,

Feb 9, 2022, 10:45:36 AM2/9/22

to Google Apps Script Community

I'm only showing the changes but this will work.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello there</h1>

    <input id="urlInput" type="text">
    <input id="urlButton" type="button" onclick="urlOnClick()">
    <script>
      function urlOnClick() {
        var url = document.getElementById("urlInput").value;
        google.script.run.withSuccessHandler( function (response) {
          alert("You typed "+response);
          google.script.host.close();
        }).importCSV(url);
      }
    </script>
  </body>
</html>

function importCSV(url) {
  Utilities.sleep(5000);
  return url;
}

Ihor Stefurak

unread,

Feb 9, 2022, 10:53:06 AM2/9/22

to Google Apps Script Community

Unfortunately, what you suggested works with 1 dialog box but I need to pass a parameter from 1 dialog box to another (that shows for execution process only):

1. A user opens the add-on's sidebar.
2. Pastes an URL and clicks submit.

3. We take the URL and open a dialog box for importcsv() execution.

4. Once the import is done we close the dialog box.

Can you help?

Ihor Stefurak

unread,

Feb 9, 2022, 11:47:46 AM2/9/22

to Google Apps Script Community

I figured it out.

SIDEBAR HTML

<a onclick="google.script.run.showImportingDialog(URL)">URL</a>

SCRIPT
function showImportingDialog(oneByOneURL) {
  try {
    var html = HtmlService.createTemplateFromFile('mytemplate').evaluate().getContent();
    var html2 = HtmlService.createTemplate(html + "<script>\n" + "(function () {google.script.run.withSuccessHandler( function () { google.script.host.close();}).importListFromBatch(URL);}());\n</script>").evaluate().setHeight(50).setWidth(500); 
    SpreadsheetApp.getUi().showModalDialog(html2,"Please wait");
  }
  catch(err) {
    SpreadsheetApp.getUi().alert(err);
  }
}

function importListFromBatch(URL) {

}

MYTEMPLATE HTML

Stabdard

Thanks for helping me!

Reply all

Reply to author

Forward