CODEWITHSUNDEEP
htmlgoogle-apps-scriptweb-applications
Teed Ferguson
Teed Ferguson

Reputation: 317

How do I pass a variable from GAS to HTML and back?

I am using GAS to create a web app. I have a doGet that generates the HTML page for the web app and a button on the web app that triggers a script. When I create the HTML page, there is a variable that I need to send to the web app that is then sent back to the script. That variable isn't used in the HTML page other than just transferring it.

Here is a minimal example of what I want to do: My doGet() creates the HTML and passes the variable foo to the page

function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile("page");
  var foo = "12345";
  htmlOutput.foo = foo;
  return htmlOutput.evaluate().setTitle('Sample');
}

The HTML page has a button that, when clicked, should pass the variable foo back to GAS to run the function checkOut

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <button id="btn" onclick="doStuff()">Click Here</button>
  <script>
    function doStuff(){
      google.script.run.checkOut(foo);
    }
  </script>
</body>
</html>

In this example, checkOut just displays foo

function checkOut(foo){
  Logger.log(foo);
}

I don't want foo displayed anywhere on the HTML page, but what should I add in order to get it sent back to GAS?

TIA

Upvotes: 0

Views: 1057

Answers (2)

SputnikDrunk2
SputnikDrunk2

Reputation: 4058

SUGGESTION

As what the TheWizEd has commented, you can also achieve your goal using the withSuccessHandler(). You may check this tweaked script below using a different implementation:

Code.gs

function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile("page");
  return htmlOutput.evaluate().setTitle('Sample');
}

function setupFoo(){ //Define a value for the "foo"
  return "12345";
}

function checkOut(foo){
  Logger.log(foo);
}

page.html

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <button id="btn" onclick="doStuff()">Click Here</button>
  <script>
    function onSuccess(foo) {
        google.script.run.checkOut(foo); //on Success will pass back the foo value to GAS function "checkOut"
      }

      function doStuff(){
        google.script.run.withSuccessHandler(onSuccess).setupFoo(); //Run "setupFoo" function & pass its returned value to the "withSuccessHandler" function named "onSuccess"
      }
  </script>
</body>

</html>

Demonstration

  • After clicking the Click Here button on the web app, checkOut will log the foo value:

enter image description here

Upvotes: 1

Tanaike
Tanaike

Reputation: 201758

I believe your goal is as follows.

  • You want to use a value of foo in the function of checkOut at Google Apps Script side.
  • From That variable isn't used in the HTML page other than just transferring it. and I don't want foo displayed anywhere on the HTML page, you want to achieve this without including the value of foo in the HTML data.

In this case, how about the following modification?

Modified script 1:

In this modification, the value of foo is used with the scriptlets. This has already been mentioned in the comment.

In this method, the value of foo is shown in the HTML data like google.script.run.checkOut("12345"). I'm worried that this might not your expected situation from I don't want foo displayed anywhere on the HTML page. How about this?

Google Apps Script side:

function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile("page");
  var foo = "12345";
  htmlOutput.foo = foo;
  return htmlOutput.evaluate().setTitle('Sample');
}

function checkOut(foo){
  Logger.log(foo);
}

HTML & Javascript side:

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <button id="btn" onclick="doStuff()">Click Here</button>
  <script>
    function doStuff(){
      google.script.run.checkOut("<?!= foo ?>");
    }
  </script>
</body>
</html>

Modified script 2:

In this modification, the value of foo is used as the background side (Google Apps Script side).

In this method, the value of foo is not shown in the HTML data.

Google Apps Script side:

function doGet(e) {
  var foo = "12345";

  PropertiesService.getScriptProperties().setProperty("sampleKey", foo);
  var htmlOutput = HtmlService.createHtmlOutputFromFile("page");
  return htmlOutput.setTitle('Sample');
}

function checkOut(){
  var foo = PropertiesService.getScriptProperties().getProperty("sampleKey");
  Logger.log(foo);
}

HTML & Javascript side:

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <button id="btn" onclick="doStuff()">Click Here</button>
  <script>
    function doStuff(){
      google.script.run.checkOut();
    }
  </script>
</body>
</html>

References:

Upvotes: 0

Related Questions