Google Apps Script - Disable Enable Submit Button in Sidebar

Google Apps Script, Javascript, Jquery, HTML

I was working on a Google Apps Script project lately in Google Sheets that set up parameters in a sidebar and then ran the process once the user clicked the “Submit” button. The problem was that the process was taking a while and that “Submit” Button was ripe to be clicked multiple times by the impatient user before the server-side code could even finish its operation.

To fix this I needed to disable the submit button once it had been clicked and then enable it again once the server-side process was complete. Here, I need to:

Disable the button and get the data from the client-side Javascript inside my sidebar’s HTML file.
Do something awesome with it server-side.
Upon the completion of the server-side awesome, call back to the HTML file and enable the button again.

The Example

I have a very simple Google Sheets Side Bar with a “Submit” and “Cancel” button. When the “Submit” button is clicked it calls the function submittington (can he get any more creative? No. No he can’t).

This function then disables the “Submit” button sends a variable to the client-side code.gs and displays it stylishly in the sheet multiple times for the users viewing pleasure. After the code.gs function is executed, it calls back to the client-side submittington function and enables the button.

Behold!!! The example:

The Code

Let’s take a look at the whole code and then we will break it down.

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div class = "sidebar">
     <p>If you click "Submit", something cool will happen, so it will take a little bit of time to do on the server side. 
     So we will disable the "Submit" button until the server side code has completed it's task.
     <br>
     <input class="action" id="submit" type="button" value="Submit" onmouseup="submittington()"  >
     <button onclick="google.script.host.close()">Cancel</button>
    </div>
     
     <script>
     function submittington(){
       //On clicking the button it is disabled. 
       $("#submit").prop('disabled',true);
        var theWord = "bananas"
        
        //This functions is no called until the serverside script finishes.
        function enable(){
          $("#submit").prop('disabled',false);
        };
        
        /*Takes the varialbe to be used serverside.
        * Runs the script
        * Then calls the "enable" function.
        */
        google.script.run.withSuccessHandler(enable).processForm(theWord);
     };
     </script>
    
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>If you click "Submit", something cool will happen, so it will take a little bit of time to do on the server side.

So we will disable the "Submit" button until the server side code has completed it's task.

<br>

<button onclick="google.script.host.close()">Cancel</button>

</div>

function submittington(){

//On clicking the button it is disabled.

$("#submit").prop('disabled',true);

var theWord = "bananas"

//This functions is no called until the serverside script finishes.

function enable(){

$("#submit").prop('disabled',false);

};

/*Takes the varialbe to be used serverside.

* Runs the script

* Then calls the "enable" function.

google.script.run.withSuccessHandler(enable).processForm(theWord);

};

</script>

</body>

</html>

code.gs

/* 
 *Disable the Submit Button while serverside code is being run.
 */

var ui = SpreadsheetApp.getUi();
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();


// Create a menu item to access the sidebar.
function onOpen(e) {
  ui.createMenu("Do Something Cool")
    .addItem("Cool Sidebar","coolSidebar")
    .addToUi();
}

// Setup the sidebar
function coolSidebar(){
  var html = HtmlService
    .createHtmlOutputFromFile("index")
    .setTitle("Cool Stuff");
  ui.showSidebar(html);
};

// Processes the form Data
function processForm(input){
  var data = input
  timeWaster(input);
};

//Gets a range and fills it with the text, fills in the background and resizes.
function timeWaster(text){
  var range = sheet.getRange("A1:L60")
  range.clear();
  var rangeValues = range.getValues();
  range.setBackground("Yellow")
  for (i = 0; i < rangeValues.length; i++){
    for(j = 0; j < rangeValues[i].length; j++){
      Logger.log(i+" "+j);
      range.getCell(i+1,j+1).setValue(text).setFontColor("Orange").setFontSize(14); 
    };
  };
};

*Disable the Submit Button while serverside code is being run.

var ui = SpreadsheetApp.getUi();

var ss = SpreadsheetApp.getActiveSpreadsheet();

var sheet = ss.getActiveSheet();

// Create a menu item to access the sidebar.

function onOpen(e) {

ui.createMenu("Do Something Cool")

.addItem("Cool Sidebar","coolSidebar")

.addToUi();

}

// Setup the sidebar

function coolSidebar(){

var html = HtmlService

.createHtmlOutputFromFile("index")

.setTitle("Cool Stuff");

ui.showSidebar(html);

};

// Processes the form Data

function processForm(input){

var data = input

timeWaster(input);

};

//Gets a range and fills it with the text, fills in the background and resizes.

function timeWaster(text){

var range = sheet.getRange("A1:L60")

range.clear();

var rangeValues = range.getValues();

range.setBackground("Yellow")

for (i = 0; i < rangeValues.length; i++){

for(j = 0; j < rangeValues[i].length; j++){

Logger.log(i+" "+j);

range.getCell(i+1,j+1).setValue(text).setFontColor("Orange").setFontSize(14);

};

Code.gs onOpen() and coolSidebar()

When the file opens, the user will be greeted with a menu option created with the onOpen function (code.gs lines 10-15). Once clicked the coolSidebar function (code.gs lines 18-23) is called upon to create the sidebar from the index.html.

More on this here:

index.html Submit button

Line 13 of the index.html creates the button code:

<input class="action" id="submit" type="button"value="Submit" onmouseup="submittington()" >

When the mouse clicks the button and releases, it calls the submittington() function. The class "action" is specific to Google Apps Script custom CSS and enables the button to be formatted in such a striking and desirable blue that clicking the button is literally the only thing you can think about. We’ll also use the id, "submit", to disable and re-enable the button.

index.html submittington()

As soon as the submittington function is called, we use the following piece of handy-dandy Jquery code to disable the button (index.html line 20):

$("#submit").prop('disabled',true);

The hash (#) identifies the id of the button. Then it sets the properties, prop, to disable as true.

The in line 21 we do some Javascript stuff, in our case, the highly technical task of creating a…variable – gasp!!! You could put whatever you need to process client-side here.

index.html google.script.run

Jumping down to index.html line 32 we run our callback. First, we declare the JavaScript API class google.script.run. Let’s take a look at the whole line of code and break it down.

google.script.run.withSuccessHandler(enable).processForm(theWord);

This code really runs in reverse to the way it is displayed. Once it is run. It takes the object – in this case, theWord variable – and makes it an argument for the processForm(input) function in code.gs, line 26-29.

Once processForm has done it’s magic server-side, and successfully might I add, it calls the nested enable() function back in the index.html, line 24-26.

enable()

The enable() function then runs our familiar jquery:

Create and Publish Google Workspace Add-ons with Apps Script Course 300px

$("#submit").prop('disabled',false);

This references the "submit" id again and then access its properties setting disabled this time to false.

processForm and timeWaster

The processForm(input) function takes the input from the index and calls the timeWaster(text) that does exactly what the function describes: creates a bunch of silly on the screen so that we can see that the submit button is disabled while it’s doing its thing.

Conclusion

Disabling and enabling buttons and functionality while server-side processes occur can be done in the same way by referencing the div id and using the Jquery property call to change its values.

The withSuccessHandler(function) is a callback extension to the google.script.run Javascript API class. Once the server-side operation is complete, it calls back to the HTML file Javascript to execute a client-side function.

Got a more specific problem you need help with, but don’t have the time to develop the skills? Make an enquiry on my ‘Hire me!’ page. I occasionally pick up projects. If I'm unable to right now, I can still help you find a great trusted freelancer.