How to create custom Web Apps with Google Apps Script

by

How to create Web Apps with Apps Script

Web Apps with Apps Script

Web apps allow you to publish your script to the web, with a unique URL that others can then access and interact with. Best practice is to use a standalone script for web apps, although you can also create the same webapp within a bound script. For the web app to return results it uses the default functions within Apps Script of either a doGet(e) or doPost(e) function or both can be used on the same endpoint. The results will be returned depending on the method used to connect to the webapp. If you open the URL in a browser the method used is GET.

Using the HtmlService.createHtmlOutput() this will output the string content as html code into the web app.

The e argument represents an event parameter that contains information from the request URL parameters. For the Get method the parameters will be as below in the object response.

{“contextPath”:””,”parameter”:{“id”:”3″},”contentLength”:-1,”parameters”:{“id”:[“3″]},”queryString”:”id=3″}

The value of parameter and parameters are both objects that will contain any value parameter. The parameters can be added to the URL using the ? and a key with a value separated by an equal sign. You can add additional parameters using the & symbol to the request URL.

Create a custom response with data coming from a Spreadsheet. Using the parameter of id, retrieve the corresponding row value for the id value.

  1. Using doGet(e) retrieve the e parameters and run the code in the default function for the webapp
  2. Using a condition check if the property value of id is contained in the e parameters object. If it is then update the output html with the content from the spreadsheet row.
  3. Select the sheet with the data that you want to use. SpreadsheetApp.openById(id).getSheetByName()
  4. Using the getValues() retrieve the data in a nested array format. The row value can now be used to retrieve an item from the array, as each array nested within it represents a row of data from the spreadsheet. Return the data of the resulting row.
  5. Update the output html with the sheet data
  6. Create the return of the HTMLService and create the HTML output.

Leave a Comment