Search code examples
javascripthtmlgoogle-apps-scriptdynamicweb-applications

Creating a very simple Dynamic Google Script Web App

OK I'm stuck at the beginning of setting up a dynamic stand-alone google script. I can't get the button to make any dynamic change to the html. I would figure that clicking the button will call the google script code function and would make a change to the resulting Index.html. What am I missing?

Code.gs:

function doGet() {
  return HtmlService
         .createHtmlOutputFromFile('Index')
         .setTitle('DynamicTest');
}

function DoSomething() {
  var obj = document.getElementById("status");
  alert("kachow");
  obj.innerText = "It's magic!";    
}

Index.html

<!DOCTYPE html>
<html>
  <body>
  <button id="submitButton">Submit</button>
  <br />
  <div id="status">Static</div>
  <br />
  <script>
  document.getElementById('submitButton').addEventListener('click', function() {
  google.script.run.DoSomething();
  });
  </script>  
  </body>  
</html>

Thanks!

Update Solution: Thanks @Tanaike for the solution! Here is the full code which also adds an pre-processing message as well as a post-processing message that is displayed after the google script app finishes the called function:

<!DOCTYPE html>
<html>
  <body>
  <button id="submitButton">Submit</button>
  <br />
  <div id="status">Static</div>
  <br />
  <script>
  document.getElementById('submitButton').addEventListener('click', function() { 
    var obj = document.getElementById('status');
    obj.innerText = 'Processing. Please wait...';
    google.script.run.withSuccessHandler(value => {
      var obj = document.getElementById("status");
      obj.innerText = value;
    }).DoSomething();
  });
  </script>
  </body>
</html>

Code.gs

function doGet() {
  return HtmlService
         .createHtmlOutputFromFile('Index')
         .setTitle('DynamicTest');
}

function DoSomething() {
  return "It's magic!";
}
Solution

  • Modification points:

    • In your script, it seems that DoSomething() is not Google Apps Script. I think that it's Javascript. I think that this is the reason of your issue. So when the following modification is done, I think that the script works.

        <!DOCTYPE html>
  <html>
    <body>
    <button id="submitButton">Submit</button>
    <br />
    <div id="status">Static</div>
    <br />
    <script>
    document.getElementById('submitButton').addEventListener('click', function() {
  //    google.script.run.DoSomething();
      DoSomething();
    });
    function DoSomething() {
      var obj = document.getElementById("status");
      alert("kachow");
      obj.innerText = "It's magic!";    
    }
    </script>  
    </body>  
  </html>

    • But I thought that you might want to communicate between Javascript side and Google Apps Script. So in this case, please modify as follows.

    Modified script:

    Code.gs： 
    function doGet() {
  return HtmlService
         .createHtmlOutputFromFile('Index')
         .setTitle('DynamicTest');
}

function DoSomething() {
  return "It's magic!";
}
    Index.html: 
    <!DOCTYPE html>
<html>
  <body>
  <button id="submitButton">Submit</button>
  <br />
  <div id="status">Static</div>
  <br />
  <script>
  document.getElementById('submitButton').addEventListener('click', function() {
    google.script.run.withSuccessHandler(value => {
      var obj = document.getElementById("status");
      alert("kachow");
      obj.innerText = value;
    }).DoSomething();
  });
  </script>
  </body>
</html>

    Reference: