This question already has answers here:
How to view the logging of Google Web App when other users are executing it?
(2 answers)
Closed 1 year ago.
I am trying to replicate a simple Web app tutorial video, but can't get google.script.run.function to create a log in my code.gs. Here is my code:
Code.gs
function doGet(){
return HtmlService.createHtmlOutputFromFile("clock");
}
function userClicked(){
Logger.log("Log clicked");
console.log("Console click");
}
clock.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>test</h1>
<div id="replace">___</div>
<button id="submit">Submit</button>
<script>
document.getElementById("submit").addEventListener("click",doSubmit);
function doSubmit(){
google.script.run.userClicked();
document.getElementById("replace").innerHTML = "clicked";
}
</script>
</body>
</html>
When I run userClicked within the editor, the execution logs show up fine. Also, when the button is clicked in the webapp, the "clicked" text shows up just fine. Also, both doGet and userClicked show up in my Executions. The problem is that the logs do not show up in my execution logs when run from the webapp. I have a found a couple threads similar to this, but it never seems to get resolved.
UPDATE: I also tried adding withSuccessHandler and the results are the same - the functions both run fine in the Executions, but no log shows up in the Executions Log (also true of "Logs" if I test in the legacy version). The new html is this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>test</h1>
<div id="replace">___</div>
<button id="submit">Submit</button>
<script>
document.getElementById("submit").addEventListener("click",doSubmit);
function onSuccess(){
document.getElementById("replace").innerHTML = "success";
}
function doSubmit(){
google.script.run.withSuccessHandler(onSuccess).userClicked();
}
</script>
</body>
</html>
What works then is if you create a function and call that function with your server function, so:
function logHi(){
console.log("hi")
}
// And then use it
function userClicked(){
logHi()
}
Related
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
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:
HTML Service: Templated HTML
Properties Service
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:
I am using GoogleSheets HTMLService. I am calling google.script.run from my Html page's script. But it is always going to FailureHandler. What is wrong in it? Please see the code below. When I run it, it always shows the alert Failed. Also, the logger does not show any error. It is also not showing the console log "Inside Hello" in the hello() function. Do we also need to do some browser settings (I am using chrome - javascript allowed).
[UPDATED]
After replacing Logger.log with console.log, I am seeing it as Transport Error.
modeDialog.gs
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile("test");
html.setWidth(90).setHeight(1);
var ui = SpreadsheetApp.getUi().showModalDialog(html, "Opening ..." );
}
function hello() {
console.log("Inside Hello");
return "hello";
}
test.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onSuccess(str) {
window.alert("executed");
}
function onFailure(error) {
window.alert("failed");
Logger.log(error);
}
google.script.run.withSuccessHandler(onSuccess).withFailureHandler(onFailure).hello();
</script>
</head>
<body>
<div id="failureContent"></div>
Hello world
</body>
</html>
As I mentioned that it was working earlier in Chrome and is currently working in FireFox, I tested it again after changing my chrome settings to default by going to Chrome > Settings > Advanced > Reset and clean up > Restore settings to their original defaults.
It is working fine after that. So setting this as the answer.
I ran it this way:
GS:
function openDialog() {
SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile("ah3"), "Opening ..." );
}
function hello() {
return "hello";
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello world
<script>
window.onload=function(){
google.script.run
.withSuccessHandler(function(str){window.alert("executed");})
.withFailureHandler(function(error){window.alert("failed");})
.hello();
}
console.log('MyCode');
</script>
</body>
</html>
I just like to use onReadyState function or onload to run most javascript so that html is already loaded. Not that it makes much difference in this trivial example. Also I tend to put the scripts in the body rather than in the head.
I have followed code snippets and directions given at https://developers.google.com/apps-script/guides/html/communication#index.html
And added following codes in my scripts project:
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function doSomething() {
Logger.log('I was called!');
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
google.script.run.doSomething();
</script>
</head>
</html>
But my function doSomething is not getting called. This is a fresh google scripts project that I have started and published it as web app.
I have seen similar issue reported in this thread and this thread. I have tried the measures mentioned there, but still facing the issue. Also, I see that there is no accepted answer there, so posting this question again. I don't know how to bring those questions back to life.
Thanks,
Mukesh
You can test it a lot easier in a dialog.
GS:
function doSomething() {
SpreadsheetApp.getActive().toast('I was called!');
return 'I called';
}
function openDialog() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah3'), "Testing")
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
</script>
</head>
<body>
<script>
window.onload=function(){
google.script.run
.withSuccessHandler(function(msg){
window.alert(msg);//display returned message
google.script.host.close();//close the dialog
})
.doSomething();//The call to the server
}
</script>
</body>
</html>
This question already has answers here:
How can I test a trigger function in GAS?
(4 answers)
How to view the logging of Google Web App when other users are executing it?
(2 answers)
Closed 1 year ago.
I am trying to create a webapp using Google Apps Script.
However, when I deploy my project(in a new version) as webapp and then view Log, it shows "No functions have been run in this editor session" message.
The HTML Code is saved as "page.html" (as expected by the function). Please help me
function doGet(e)
{
return HtmlService.createHtmlOutputFromFile("page");
Logger.log(e);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1> Hello 3 </h1>
</body>
</html>
You have 2 small issues,
1.- Your doGet(e) is executing the return statement before you actually log the e event. and so Logger.log(e); is not executed.
2.- The Apps script Logger class only works in the apps script session. (You would have to execute the function from within the editor to see this log). Also keep in mind that doGet(e) when run from within the editor will have a null e, but when making a GET request to your deployed webapp it will not be null.
Solution:
function doGet(e){
// Log the event in StackDriver
console.log(e);
return HtmlService.createHtmlOutputFromFile("page");
}
Here's a quick dialog:
GS:
function showDialog() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile("page"), 'test');
}
function sayHowdy() {
return "Howdy";
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1> Hello 3 </h1>
<input id="msg" type="text" readonly />
<input type="button" value="Say Hello" onClick="sayHello()" />
<script>
function sayHello() {
google.script.run
.withSuccessHandler(function(msg){
document.getElementById('msg').value=msg;
})
.sayHowdy()
}
</script>
</body>
</html>
Below is my HTML file in Google App Script.
It creates a dialogue box on a spreadsheet. When the ok button is pressed I want it to run a function that I have created in App script and also close the dialogue box.
When I am clicking OK the app script code is not running. What can I do better?
Thanks.
<!DOCTYPE html>
<html>
<head>
<h3>Welcome</h3>
<meta charset="utf-8">
<title>SEOMango</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Ok" class="create ok_button"
onclick="close1();" id="ok_button"/>
<!--JQUERY-->
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
function close1()
{
google.script.host.close();
google.script.run.withSuccessHandler.doSomething();
}
</script>
</body>
</html>
try something like this:
function close1()
{
google.script.run.withSuccessHandler(end).doSomething();
}
function end()
{
google.script.host.close();
}
You first need to execute you function on google side doSomethingthen if it is successful call end() function with google.script.host.close() inside of it to close your sidebar/dialog box.
as #tehhowch mentionned it you are here closing your Html page before executing your function doSomething().