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 it’s 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:

  1. Disable the button and get the data from the client-side Javascript inside my sidebar’s html file.
  2. Do something awesome with it server-side.
  3. 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

code.gs

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 

Action Button Class - Google Apps Scriptaction button class disabled

 

 

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 hand-dandy Jquery code to disable the button (index.html line 20):

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

The hash (#) identifies the id of the button. The 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 what ever 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:

$("#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 it’s 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 it’s 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.

Leave a Reply