Display variable as html in Google App Script?

1
votes

Let's say we have a variable. This variable was created in google app script. On that app script project, you have two files. First, the .gs file, where the variable came from. Next, you have the html file. How do you transfer the variable to html?

GAS:
function doGet() {
    return HtmlService.createHtmlOutputFromFile('index');
}
function items() {
    var exmp = 45;
    document.getElementById("test").innerHTML = "You have " + exmp + " items";    

HTML:
<script>
    google.script.run.items();
</script>

<div id="test"></div>

However, this doesn't work. How can I make this work?

2
google-apps-scriptgoogle-sites

2 Answers

3
votes

If you read over the Private Functions section of the HTML service documentation, you'll find an example that does almost exactly what you're trying. The code below adapts that example to yours.

You need to keep the GAS server stuff separate from the HTML client stuff. For example, document.getElementById("test").innerHTML = ... means nothing in the context of the server / GAS code. Instead, the modification of the document will be done by Javascript on the client side - in this case, by a success handler.

A success handler is a client-side Javascript callback function that will receive the asynchronous response from your server function items().

Client-side calls to server-side functions are asynchronous: after the browser requests that the server run the function doSomething(), the browser continues immediately to the next line of code without waiting for a response.

This means that there is no waiting for the return code from the call to your server function... the browser just keeps going. You'll see this in this example, as the "More loading..." text gets displayed after the google.script.run call, but before the response is received.

What if items() needs to do something more advanced... like read info from a spreadsheet? Go ahead and change it... just make sure that you return the text you want displayed, and that what you're returning is going to be valid HTML (so the innerHTML operation is OK).

Code.gs

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

function items() {
  Utilities.sleep(5000);   // Added to allow time to see the div content change
  var exmp = 45;
  return( "You have " + exmp + " items" );    
}

index.html

<div id="test">Loading...</div>

<script type="text/javascript">
  function onSuccess(items) {
    document.getElementById('test').innerHTML = items;
  }

  google.script.run.withSuccessHandler(onSuccess).items();

  document.getElementById('test').innerHTML = "More loading...";
</script>
1
votes

You need first to create the HTML using the createHTMLOutput function In order for you to append strings youo have to use the var.append method

function items(){
  var email = Session.getActiveUser().getEmail();

  var output = HtmlService.createHtmlOutput(email);
  var string1 = HtmlService.createHtmlOutput('<p>You have </p>')
  string1.append(output);
  string2= HtmlService.createHtmlOutput('<p> items</p>')
  string1.append(string2);
  Logger.log(string1.getContent());
}

Reference