Saturday, February 11, 2017

Make a website with google apps script: use variables in html page

We have made a website that displays "Hello World" in the previous post. Now we will use a variable and show its value in a html page.

In Google apps script, you can use variables in html as follows:
<? ?> (used to write any code of google apps script.)
<?= ?> (used to output a value of a variable. The value is automatically escaped.)
<?!= ?> (used to output a value of a variable. The value is not escaped.)

We will learn how they can be used in practice.

1. Go to your spreadsheet and then code editor. Open the html file called "index".


2. Write code as follows:

For your copy and paste:
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?
      var value = "test";
    ?>
    <h1><?= value  ?> </h1>
  </body>
</html>
Save all and click "Manage version" from the "File" tab. Make a new version.



...then publish the new version as follows:

Please note that you need to choose "2" as "Project version". Otherwise the update will not be reflected.

3. Access to the web app that you have published just now. Now you see the value of the variable is being displayed.