I was trying to implement a dialoag in Google Spreadsheet using container-bounded app script. This is a very simple implement, I just want user can add new item by submitting content in dialog, and search the cell with non-white background color and export them in pdf.
Unluckily I’ve met some problem with implementation of adding new Item.
Here are the source code from Code.gs:
function addMenuItem() {
SpreadsheetApp.getUi()
.createMenu('My Functions')
.addItem('Show Dialog', 'showModal')
.addToUi();
}
function showModal() {
const userInterface = HtmlService.createHtmlOutputFromFile('modal').setSandboxMode(HtmlService.SandboxMode.NATIVE);
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'My modal');
}
function processForm(formObject) {
var formName = formObject.name;
SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1').appendRow([formName]);
}
And code from modal.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Comic Neue', cursive;
}
input {
font-size: 18px;
outline: none;
padding: 5px;
margin-bottom: 10px;
}
button {
cursor: select;
outline: none;
font-size: 18px;
padding: 7px 15px;
background-color: #57ff87;
border-radius: 5px;
box-shadow: 0 2px 3px #5555;
}
button:active {
filter: brightness(1.2);
box-shadow: 0 2px 3px #5550;
}
</style>
<script>
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler().processForm(formObject);
}
</script>
</head>
<body>
<h1>Hello, and Welcome!</h1>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<input name="name" type="text" />
<input type="submit" value="Submit" />
</body>
</html>
when I try to call client side function using google.script.run. nothing happend, and there are errors pop out in the console while openning the dialog:
Error code = 10, Path = /wardeninit, Message = The…ansport or processing of this request., undefined', name: 'TransportError', stack: 'TransportError: Error code = 10, Path = /wardenini…1922652-warden_bin_i18n_warden__en_gb.js:215:356)'
And When I click submit in the dialog, new error pop out saying Uncaught.
I’ve tried many different ways to solve this problem, but still can’t fix it.
Very appreicate for any help!