Learn more about creating web apps with Google Apps Script Do more with Web Apps

by

Learn more about creating web apps with Google Apps Script Do more with Web Apps

Do more with Web Apps

With web apps you can select the output content type.

Content Service – is ideal for outputting straight text content or MIME type content like JSON data. Content Service does not wrap the container with the iframe object like the HTML service does. Depending on how you want to access the data and the type of data Content Service vs the HTMLService will both output web app results.

Using the content service output JSON data into the web app.

  1. Create an object in your app script
  2. Using JSON.stringify(myObj) convert the object data into a string value
  3. Set the Mimetype for the returned results. .setMimeType(ContentService.MimeType.JSON);
  4. Return the object within the ContentService as text output. ContentService.createTextOutput()

With Apps Script you can create HTML as a string value and send it to the webapp as output.

Within the HtmlService you can also create html code from a file, the file is in the Apps Script menu under files. To create a new file, press the + in the files menu and select HTML file. Give the file a name, you don’t need to include the .html extension.

Using the HtmlService you can select the file and generate the output of the file as HTML.

How to use templated HTML

Render HTMl results from server side Apps Script code. Using the Scriptlets. To use scriptlets, use the syntax <?= … ?> this will output the results of their code into the client side html page.

Using the scriptlet tags output the value of the variable from Google Apps Script.

  1. Create a variable with the name val.
  2. Create the output object from the template html code. const output = HtmlService.createTemplate(html);
  3. Create some html code, you can also create code within the script tags as this will be evaluated and rendered into the web app page. Using the scriptlet syntax output the value of the variable into the client side code. Assign a value to the variable val into the output object.
  4. Using the variable from the Apps Script you can hard code it directly within the HTML output that is being created, as this is expecting a string value.
  5. Return the template output using evaluate() to construct the output.

How to use Apps Script code and functions directly into the client side code.

Within the web app output, you can use the scriptlets to get output object values from the server side. Assign the values to the output object in order to be able to retrieve them within the client side code. You can also invoke functions from the client side to return data within the Google Apps Script server side code.

  1. Create an html file called index2 Within the file use the scriptlet to assign a value to data variable from the response data coming from a function on google script side called fromSheet().
  2. Within the Apps Script code, create a function called fromSheet() which connects to a spreadsheet, gets the values from the sheet data and returns the array of data.
  3. Back in the client side index2 file, using for each loop through the returned data from the fromSheet() function.
  4. Output a value from the output object directly in the template using <?= ?>
  5. Using the scriptlet add several numbers together to produce an output value. <?= 5 + 5 + 510 ?>
  6. Using a condition with a value that comes from the output object, apply the different output results depending on the condition.
  7. Send an object into the output data, loop through the array of data outputting the results into the client side page within the scriptlet.

Leave a Comment