I’ve tried many times without success to adjust the template code to Google Apps Script. This code doesn’t work to Google Apps Script as wished. thanks in advance…

Code.gs

    function doGet() {
  return HtmlService.createTemplateFromFile('Main')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function onLogin(form) {
  if (form.username == "xxx") {
    var template =  HtmlService.createTemplateFromFile('Response');

    //Setup any variables that should be used in the page
    template.firstName = "Your name is here";
    template.username = form.username;

    return template.evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
  } else {
    throw "You could not be found in the database please try again.";
  }
}

function include(filename) {
  return HtmlService.createTemplateFromFile(filename)
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .getContent();
 }

Main.html

<?!= include('CSS'); ?>
<script>
  function loadPage(htmlOut) {
    var div = document.getElementById('content');
    div.innerHTML = htmlOut;
    document.getElementById('errors').innerHTML = "";
  }
  function onFailure(error) {
    var errors = document.getElementById('errors');
    errors.innerHTML = error.message;
  }
</script>
<div id="errors"></div>
<div id="content">
  <?!= include('Login'); ?>
</div>

CSS.html

<style>
  p b {
    width: 100px;
    display: inline-block;
  }
</style>

Login.html

<script>
  function onLoginFailure(error) {
    var loginBtn = document.getElementById('loginBtn');
    loginBtn.disabled = false;
    loginBtn.value = 'Login';
    onFailure(error);
  }
</script>
<div class="loginPanel">
  <form>
    <p>
      <b>Username: </b>
      <input type="text" name="username"/>
    </p>
    <input type="button" id="loginBtn" value="Login" onclick="this.disabled = true; this.value = 'Loading...';google.script.run
      .withSuccessHandler(loadPage)
      .withFailureHandler(onLoginFailure)
      .onLogin(this.parentNode)"/>
  </form>
</div>

Response.html

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1.1", {packages:["bar"]});
      google.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

This is the published app. Type in to username: xxx.

Answer

For a working example of your code, click the following link:

Apps Script – Visualization after Login

The Apps Script file with code:

Shared Apps Script File

I see that you want to have a chart displayed after the log in. And the HTML file for the chart has a <script> tag with:

google.load("visualization", "1.1", {packages:["bar"]});

I don’t think that the evaluate method will create the chart in the server before it’s sent back to the browser.

Also, there is this line:

google.setOnLoadCallback(drawStuff);

Because the google.load() function is not running, there is no callback. So, the drawStuff() function is never getting called when the HTML is being injected.

You can’t dynamically add <script> tags to HTML and have it run. You’ll need to add all the <script> tags to the Main.html page when the app first runs. It is possible to create a new function, and then run that function at any time after the page has first loaded. You’d need to use

var myFunc = new Function('a', 'b', 'return a + b');
myFunc(a,b);

Mozilla new function

There is also another problem. You need to remove:

this.disabled = true;

from the onclick attribute.

So, I would put the <script> tags for the visualization stuff into the Main.html file.

Write a comment

Your email address will not be published. Required fields are marked *