How to make a button in a Google Apps Script web app that executes a function in that project?

1
votes

I would like publish a web app coded in Google Apps Script in a Google Page that has a button that runs a certain function within that Apps Script project. It is assumed that only my Google Account would use that button and my goal is to create and process spreadsheets when the button is pressed (creating a new spreadsheet using data from another one).

How to do this? I managed to deploy and publish a web app and I've also managed it's interaction with a given spreadsheet (displaying data from a sheet so far). My issue is that I do not know where to start with coding a button that does things.

1
google-apps-script

1 Answers

2
votes

I believe your goal as follows.

  • You want to create new Spreadsheet when a button on Web Apps, which was created by Google Apps Script, is clicked.
  • From My issue is that I do not know where to start with coding a button that does things., you want to know the method for achieving above process.

In this case, I think that google.script.run can be used. When google.script.run is used, the communication between HTML side and Google Apps Script side can be run.

As a simple script for achieving above goal, I would like to introduce as follows.

Sample script:

HTML&Javascript side: index.html

Please copy and paste the following script to the script editor as index.html.

<button onclick="sample()">Create Spreadsheet</button>

<script>
function sample() {
  google.script.run.createSpreadsheet();
}
</script>
  • In this case, when a button is clicked, sample() is run.

Google Apps Script side: Code.gs

Please copy and paste the following script to the script editor as Code.gs.

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

function createSpreadsheet() {
  
  // do something for "creating a new spreadsheet using data from another one"

  SpreadsheetApp.create("sample name");
}

  • From I managed to deploy and publish a web app and I've also managed it's interaction with a given spreadsheet (displaying data from a sheet so far)., I think that you have already been able to deploy the Web Apps.

  • In this sample script, when you open the Web Apps, you can see a button. When you click the button, google.script.run.createSpreadsheet() is run. By this, createSpreadsheet() at Google Apps Script side is run. As the result, new Spreadsheet is created. (In this case, the created Spreadsheet is put to the root folder.)

Note:

  • When you modified the script of Web Apps, please redeploy the Web Apps as new version. By this, the latest script is reflected to the Web Apps. Please be careful this.
  • I think that the various sample scripts using google.script.run can be seen at Stackoverflow. These are useful for understanding how to use it.

References: