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>
Related
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()
}
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.
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>
I've gone through most of the relating questions regarding this and haven't found a solution that helps me (I've applied them one by one). I have an HTML form that I am publishing as a web app through google. I need to prefill an input box with that parameter.
code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('html')
.evaluate();
}
html.html
<!DOCTYPE html>
<html>
<head>
</head>
<style>
</style>
<body>
<form>
<h1><center>Verification</center></h1>
Form ID:<input type="number" name="formid" id="formid" class="formid">
</form>
</body>
</html>
As I said, I've tried many suggestions in similiar questions, but can't seem to find one that works. The id is that I can type in my url + ?formid= and have that populate in the input. How can I make this happen as described?
Thank you!
When Web Apps is accessed with the URL of url + ?formid=###, you want to put the value of ### to the text box.
The URL is like https://script.google.com/macros/s/###/exec?formid=###.
If my understanding is correct, how about this answer? Please think of this as just one of several answers.
Modification point:
In this modification, I used google.script.url.getLocation() for retrieving the query parameter.
Modified script:
Please modify html.html as follows.
<!DOCTYPE html>
<html>
<head>
</head>
<style>
</style>
<body>
<form>
<h1><center>Verification</center></h1>
Form ID:<input type="number" name="formid" id="formid" class="formid">
</form>
<script>
google.script.url.getLocation(function(location) {
document.getElementById("formid").value = location.parameters.formid[0];
});
</script>
</body>
</html>
By above modification, when you accessed to Web Apps with https://script.google.com/macros/s/###/exec?formid=12345, 12345 is put to the text box.
Reference:
getLocation(function)
If I misunderstood your question and this was not the direction you want, I apologize.
Using Jquery:
<script>
$(function(){
google.script.run
.withSuccessHandler(function(v){
$('#formid').val(v);
})
.getTheValueOfV();
});
</scrip>
With Regular JavaScript
<script>
window.onload=function(){
google.script.run
.withSuccessHandler(function(v){
document.getElementById('formId').value=v;
})
.getTheValueOfV();
};
</script>
Code.gs:
function getTheValueOfV() {
var ss=SpreadsheetApp.getActive();
return ss.getRangeByName("TheRangeWhereYouFindtheValueofv").getValue();
}
You can put the script in the head or in the body your choice. If you use JQuery you need something like this in the head.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
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().