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:

Disable Enable Button in Sidebar Google Apps Script

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.

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.

Looking to learn more about Google Apps Scripts in a more structured format? Udemy has some great courses that can get you from the basics to a real Google Apps Script pro.

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. Alternatively, Fiverr’s your best bet to find a skilled Google Apps Script developer to solve your problem quickly and professionally. *

*The above affiliate links have been carefully researched to get you to what you specifically need. If you decide to click on one of these links it will cost you just the same as going to the site. If you decide to sign up, I just get a little pocket money to help pay for the costs of running this website.