Display Spreadsheet data in Sites with Html Servic

Question

I displaying What I want to do with similar to this tutorial but instead of using UI Services to display the table, I would like to use HTML Services. Someone from this question mentioned that you could use Templated HTML to display Spreadsheet data in html. Could anyone elaborated on this topic? A simple example like this would very helpful because I'd like to see a demonstration on it works.

Thank you!

Answer 1

There is a simple example of using templated HTML to display a table from spreadsheet data available in the documentation, here.

I've published a running copy, utilizing the same data from Waqar's tutorial, for an easy comparison. The source spreadsheet is here, as is the script. (Edit: script is also provided below.)

Code.gs

// All code in this script is copied from
// https://developers.google.com/apps-script/guides/html-service-templates

function doGet() {
  return HtmlService
      .createTemplateFromFile('index')
      .evaluate();
}

function getData() {
  return SpreadsheetApp
      .openById('0AvF9FEyqXFxAdEplRHp5dGc4Q1E3OXMyV2s4RktiQWc')
      .getDataRange()
      .getValues();
}

index.html

<? var data = getData(); ?>
<table border='1px solid black'>
  <? for (var i = 0; i < data.length; i++) { ?>
    <tr>
      <? for (var j = 0; j < data[i].length; j++) { ?>
        <td><?= data[i][j] ?></td>
      <? } ?>
    </tr>
  <? } ?>
</table>