Edit / Update: I copied the exact same code into another Apps Script project and it works. Unfortunately I want to use this widget on this specific shared spreadsheet. There must be something with the configuration. Does anyone know what this might be? I don't see anything relevant in system settings and my file order and appscript.json
files are the same.
I am trying to get user input from an HTML modal back into my appscript code. The modal displays a calendar where a user selects a date and hits submit. All I want to do is retrieve the date that the user clicked and run another function in appscript. I was using SpreadsheetApp.getUi().prompt()
before and that worked well but I want to be a bit fancier and have a calendar display (I didn't see an option in the appscript ui library to display a calendar). If there is a better way to do this, that would be much appreciated!
Here is my HTML:
<html>
<head>
<title>HTML</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css"
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script>
$(function () {
$("#datepicker").datepicker({
beforeShowDay: function (d) {
var day = d.getDay();
return [day != 0 && day != 2 && day != 3 && day != 4 && day != 5 && day != 6];
},
});
});
</script>
</head>
<body align="center">
<form id="Form" onsubmit="runThis()">
<input type="text" id="datepicker" value="YYYY-MM-DD"/>
<input type="submit" value="Submit">
</form>
<script>
function runThis() {
alert("Hi!");
google.script.run.doSomething();
}
</script>
</body>
</html>
Here is my appscript code:
function calendar() {
var html = HtmlService.createHtmlOutputFromFile("CalendarInput");
SpreadsheetApp.getUi().showModalDialog(html, "Choose the Monday start date from the calendar:");
}
function doSomething() {
getMasterSpreadsheet().toast("hello");
console.log("woohoo!");
return true;
}
When I hit "submit" in the HTML modal, the alert "Hi" shows up so I know it is running the function runThis()
in the HTML code. But it isn't running doSomething()
. I checked my execution history and doSomething()
isn't there. When I run doSomething()
in the console, I successfully get the toast and log. I also tried wrapping it in a success/failure handler (even though my understanding is that this is only for the case where you want to pass info from server back to client) and it fails with
NetworkError: Connection failure due to HTTP 500
I know this has been asked before but I've looked at all the other answers and nothing is working for me. Any idea why this isn't working? Thanks so much.
Solved! I was using the Head (development) version of my imported libraries. Deleting them, deploying them and re-adding them as a versioned deployment fixed my issue. I solved this on accident because I was having an issue creating new triggers which gave the error: Script authorization failed. Please check your pop-up blocker settings and try again
, which versioned libraries also fixed. I hadn't had any problems using the HEAD of libraries before but I guess it can cause some random issues. However, I don't understand why this caused these issues. If anyone has an explanation that would be much appreciated. Thank you!