I am trying to develop a script in GAS for a displaying a loading dialog before running a script in google sheets. The code is as the following

function dispStatus(title, html, width, height) {
  // Display a modeless dialog box with custom HtmlService content.
  var title = typeof (title) !== 'undefined' ? title : 'No Title Provided';
  var width = typeof (width) !== 'undefined' ? width : 180;
  var height = typeof (height) !== 'undefined' ? height : 180;
  var html = typeof (html) !== 'undefined' ? html : '<p>No html provided.</p>';
  var htmlOutput = HtmlService
    .createHtmlOutput(html)
    .setWidth(width)
    .setHeight(height);
  SpreadsheetApp.getUi().showModelessDialog(htmlOutput, title);
}

Then we call this function before and after running a script

function Hello() {

dispStatus('Loading...', '<img src=https://media.giphy.com/media/{id}/giphy.gif width="120" height="110">', 120, 120)

//some code

dispStatus('Done!', '<img src=https://media.giphy.com/media/{id}/giphy.gif width="120" height="80"><script>var myVar = setInterval(myTimer ,1000);function myTimer() { google.script.host.close();}</script>', 120, 120)
}

The entire operation of getting a loading dialog and closing it after the script is over is working well. But when the dialog opens, the user is still able to edit the sheet in the background, which I want to avoid. What I am trying to achieve here is, the user cannot edit anything when the loading dialog is on display. I have done research on this, and there is a way to achieve this via HTML. But i am not being able to work on this myself as I am new to working with Html in GAS. Any help is much appricated

For example

References:

1. Communicate between sidebar and modal dialogue box in google script

CodePudding user response：

Although I'm not sure whether I could correctly understand your goal, in order to achieve your goal, how about using showModalDialog instead of showModelessDialog as follows?

From:

SpreadsheetApp.getUi().showModelessDialog(htmlOutput, title);

To:

SpreadsheetApp.getUi().showModalDialog(htmlOutput, title);

References:

• showModelessDialog(userInterface, title)

• showModalDialog(userInterface, title)

  Modal dialogs prevent the user from interacting with anything other than the dialog. By contrast, modeless dialogs and sidebars let the user interact with the editor.