Saturday, August 5, 2017

Google Sheet Script to Navigate various HTML Pages

Here is the Google Sheet Script to Navigate various HTML Pages by passing the needed data via URL parameter.

Screencast:












Following is the code for "Code.gs":

function doGet(e) {
  var htmlPage,count;
  e.parameter.page==null ? htmlPage="index" : htmlPage = e.parameter.page;
  e.parameter.count==null ? count=0 : count = e.parameter.count;
  var html = HtmlService.createTemplateFromFile(htmlPage);
  html.counter = count;
  var htmlx = html.evaluate();
  return htmlx;
};

function getScriptUrl() {
  var url = ScriptApp.getService().getUrl();  
  return url;
};

Following is the code for "index.html":

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?var url = getScriptUrl();?>
    Hello I'm Index!
    <br><br>
      <a href='<?=url?>?page=apple&count=<?!= ((counter*1)+1) ?>'>
        <input name="apple" id="apple" type="button" value="Apple Page"></a>
      <br><br>
      <a href='<?=url?>?page=google&count=<?!= ((counter*1)+1) ?>'>
      <input name="google" id="google" type="button" value="Google Page"></a>
      <br><br>
      You have clicked
    <input type="text" id="label" name="label" value="<?!= (counter*1) ?>" readonly="readonly"
    style="text-align:center;width:20px;font-weight:bold;border:none;background:transparent;"/>
    times
  </body>
</html>

Following is the code for "apple.html":

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?var url = getScriptUrl();?>
    Hello I am Apple!
    <br><br>
      <a href='<?=url?>?page=index&count=<?!= ((counter*1)+1) ?>'>
        <input name="index" id="index" type="button" value="Index Page"></a>
      <br><br>
      <a href='<?=url?>?page=google&count=<?!= ((counter*1)+1) ?>'>
      <input name="google" id="google" type="button" value="Google Page"></a>
      <br><br>
      You have clicked
    <input type="text" id="label" name="label" value="<?!= (counter*1) ?>" readonly="readonly"
    style="text-align:center;width:20px;font-weight:bold;border:none;background:transparent;"/>
    times
  </body>
</html>

Following is the code for "google.html":

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?var url = getScriptUrl();?>
    Hello I am Google!
    <br><br>
      <a href='<?=url?>?page=apple&count=<?!= ((counter*1)+1) ?>'>
        <input name="apple" id="apple" type="button" value="Apple Page"></a>
      <br><br>
      <a href='<?=url?>?page=index&count=<?!= ((counter*1)+1) ?>'>
      <input name="index" id="index" type="button" value="Index Page"></a>
      <br><br>
      You have clicked
    <input type="text" id="label" name="label" value="<?!= (counter*1) ?>" readonly="readonly"
    style="text-align:center;width:20px;font-weight:bold;border:none;background:transparent;"/>
    times
  </body>
</html>