Apps Script Web app Data transfer from ClientSide to ServerSide WebApp Sheet data and more

by

Apps Script Web app Data transfer from ClientSide to ServerSide WebApp Sheet data and more

ClientSide to ServerSide WebApp

Google web apps can run client side code that can easily be used to connect to server side Apps Script functionality. To execute server-side functions from client-side code, use google.script.run. google.script.run is an asynchronous client-side JavaScript API available in web app HTML-service pages that can call server-side Apps Script functions.

In this example we will demonstrate how to send data objects from the Apps Script server side into the client side and use the data object within JavaScript. Also how we can send data from the client side input field values to the server side script to then be used to update and append content into a selected spreadsheet.

  1. Setup the doGet() method to create the web app output page. Create an object with some data and add it to the html object that is created from the template file index HtmlService.createTemplateFromFile(‘index’)
  2. Create the template file index in the file menu of the Google Apps Script editor.
  3. Add the data object from the server side using a scriptlet adding it into a Javascript variable called data. const data = <?!= JSON.stringify(data) ?>;
  4. Create page elements, and select those with JavaScript. Create 2 input fields, and a button that can be used to invoke the function call sending data to the server side function. Add an event listener to the button
  5. When the button is pressed, gather the input field data and create an object that will be the argument of the google script function sending to the function on the server side.
  6. Using the google script service run a function in the Apps Script called testFun sending the data from the frontend to it. google.script.run.withSuccessHandler(onSuccess).testFun(temp);
  7. Create a function that will receive the response data on the client side,the function that was used in the withSuccessHandler argument. Add an update to the page.
  8. Get the input field values and create a function called testFun() on the server side within the google Apps Script. Connect to a spreadsheet and append the row of data to the sheet. Get the value of the last row and return that to the client side within the return response value.

Leave a Comment