0

I am testing the app script platform and I have a doubt when using this code called from HTML file:

JSON.parse(<?= JSON.stringify(getDataFromSheet("tyreUse", "valueSearched")); ?>);

If I set the string value directly it works. If I try to pass a variable that is declared in it does not recognize it. How can I pass a JS variable to the app script function like next example?

let value_searched = "cars";
JSON.parse(<?= JSON.stringify(getDataFromSheet("tyreUse", value_searched)); ?>);
7
  • Just in case: stackoverflow.com/questions/60011619/… Commented Feb 17, 2022 at 22:53
  • Please add a minimal reproducible example. Commented Feb 17, 2022 at 22:54
  • I'm exactly using this example but changing "temp" by variable value: netlabe.com/… Commented Feb 17, 2022 at 23:05
  • This JSON.parse(<?= JSON.stringify(getDataFromSheet("tyreUse", value_searched)); ?>); is printing scriptlet in your HTML file, correct? You need to set value_searched in Code.gs before you evaluate your template. See this page developers.google.com/apps-script/guides/html/… toward the bottom. Commented Feb 18, 2022 at 0:17
  • There is no way to pass it from the client to the server side? with that parameter I can filter the results I want to get using a <select>html tag. I can't set it fixed value in the server side. Commented Feb 18, 2022 at 0:25

2 Answers 2

4

Scriptlets like <?= ?> are used in html templates to load data from the server into html pages prior to rendering. If you want to pass data back to a server side function then you can use google.script.run and there are restrictions on the data types that you can pass.

google.script.run

Sign up to request clarification or add additional context in comments.

Comments

3

Here is an example of getting data from spreadsheet dynamically. I typically build my page and then use an anonymous function of the form (function () {}()); to get the data from spreadsheet and populate the HTML elements with the values.

Create an HTML file HTML_Demo:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <input id="A8SBwf" type="text">
    <input id="gNO89b" type="button" value="Click Me" onclick="buttonOnClick()">
    <script>
      function buttonOnClick() {
        try {
          google.script.run.withSuccessHandler( 
            function(response) {
              document.getElementById("A8SBwf").value = response;
            }
          ).getCellA1();
        }
        catch(err) {
          alert(err);
        }
      }
    </script>
  </body>
</html>

Then in Code.gs create the getCellA1:

function getCellA1() {
  try {
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
    var range = sheet.getRange("A1");
    return range.getValue();
  }
  catch(err) {
    return err.message;
  }
}

2 Comments

Thank you very much, it's just what I wanted. To complement your answer, here is the detailed information from google. developers.google.com/apps-script/guides/html/…
@Pable, yes I do that when the css or script gets to be more complex

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.