Apps Script - Use a Code.gs variable in HTML script

Question

Here, the task is to use a variable from Code.gs to be used in the HTML side.

The best idea I've had is using google.script.run to get access to Code.gs where I have stored a variable that I wish to use in the HTML script. Eg: Suppose there is a variable in the Code.gs side that turned out to be 1+1. Then I would very much have liked the following to work:

Code.gs

function getMyGSValue() {
  return 1+1
}

HTML

<script> 

google.script.run.withSuccessHandler(myGsValue => {
  myScriptVar = myGsValue
}).getMyGsValue()

// Here use MyScriptVar endlessly.

</script>

Which unfortunately fails to work. If it's of any help, I'm more interested in using string variables from the Code.gs side as these will be more likely the link to the images I want to display if particular conditions are met.

A related question follows:

Passing variable from Code.gs to html in Google App Script

But to be honest, It seemed to have its focus elsewhere.

Does this answer your question? [How to pass a parameter to html?](https://stackoverflow.com/questions/30033459/how-to-pass-a-parameter-to-html) — Kos, Sep 15 '22 at 18:28

score 2 · Answer 1 · answered Sep 15 '22 at 20:15

Doing it with google.script.run. I just used window.onload event to get the data from the server

html:

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
    <input type="text" id="txt1" />
<script> 
window.onload = () =>{
  //console.log("window.onload")
  google.script.run.withSuccessHandler((v) => {
  document.getElementById("txt1").value = v;
  }).getMyGsValue()
  //console.log("Code");
}
</script>
</body>
</html>

gs:

function getMyGsValue() {
  const ss = SpreadsheetApp.getActive();
  const sh = ss.getSheetByName("Sheet0");
  return sh.getRange("A1").getValue();
}
function launchmydialog() {
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile("ah2"),"Title");
}

Rubén · Answer 2 · 2022-09-15T22:09:32.730

If you need that the "variable" from the server side be ready when the web browser start parsing the web application, instead of using client-side code to retrieve the "variable", generate the client-side code with the "variable" that you need by generating first a HtmlTemplate, then assigns the variable to a HtmlTemplate property and finally evaluates it.

Below is an over simplistic example:

function doGet(e){
  const myServerVariable = 1 + 1;
  const template = `<body><script>const myClientVariable = <?!= tmpProp?> </script></body>`;
  return (
    HtmlService.createTemplate(template)
     .tmpProp = myServerVariable
    ).evaluate();
}

The above example is so simple that you could do the same by using regular JavaScript string manipulation. Anyway, <?!= tmpProp?> is a force-printing scriptlet, also there are standard scriptlets and printing scriptlets that might be more frequently used on .html files in Google Apps Script.

Be careful when using scriptlets to built the client-side code to not make them to take too much time to generate the client-side code as this will impact how fast the web app responds to the initial request.

By the other hand, if you want to keep using google.script.run, just declare a global variable, and update it in the withSuccessHandler callback

<script> 

var MyScriptVar;

google.script.run.withSuccessHandler(myGsValue => {
  MyScriptVar = myGsValue
}).getMyGsValue()

// Here use MyScriptVar endlessly.

</script>

Just consider the case that MyScriptVar will be undefined while the google.script.run finish it's execution.

https://developers.google.com/apps-script/guides/html/templates

Apps Script - Use a Code.gs variable in HTML script

2 Answers2