What is the idiom and syntax to use google.script.run in its variations to obtain a value from server-side function? Presumably the data is being returned but isn't handled or caught correctly. Having referenced the API a more specific link for reference is sought.
How is a variable value passed from Code.js to, here, WebApp.html using either google.script.run or a similar variant. Each button click should run loadFoo which calls getFoo and should dynamically change content each execution.
Server logs show that foo is being invoked:
ClientSide
getFoo
Web App
Oct 16, 2022, 9:13:25 PM
0.114 s
Completed
Cloud logs
Oct 16, 2022, 9:13:25 PM
Info
baz
but where does the value of foo go? Here, foo on the client log shows it as initialized and then undefined:
bar
userCodeAppPanel:13 undefined
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
var foo = "foo";
function loadFoo(){
foo = "bar";
console.log(foo);
foo = google.script.run.withSuccessHandler((success) => {
document.getElementById("successfulClick").innerHTML = success;
})
.getFoo();
console.log(foo);
document.getElementById("foo").textContent = foo;
}
</script>
</head>
<body>
<div id="foo">index</div>
<br> <br> <br> <br> <br> <br>
<input type="button" value="loadFoo" onclick="loadFoo()" />
</body>
</html>
code:
function getFoo() {
var foo = "baz"
Logger.log(foo);
return foo;
}
function getUrl() {
Logger.log("getUrl..");
var url = ScriptApp.getService().getUrl();
return url;
}
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('WebApp');
htmlOutput.foo = "foo" + getFoo();
htmlOutput.url = getUrl();
return htmlOutput.evaluate();
}
The getFoo function clearly returns a string. By what mechanism or technique is that value sent to the client HTML? Specifically, to a variable in loadFoo to at least log to the console.
