Getting Form Data from a Sidebar in Google Apps? - google-apps-script

Question

I am trying to get data from using a form in a sidebar, but I can't use normal way in javascript where I get it from the document in javascript.
i.e.
var form = document.getElementById("treasurerForm");
So, how should I go about getting data from a form in a sidebar?

Answer 1

You have to communicate between the sidebar (client-side) and the Google Apps Script (server-side). You can do this by using google.script.run in your sidebar javascript.
function openSidebarForm() {
var htmlOutput = HtmlService.createHtmlOutputFromFile("sendForm");
htmlOutput.setSandboxMode(HtmlService.SandboxMode.IFRAME).setTitle("Form");
var ui = SpreadsheetApp.getUi();
ui.showSidebar(htmlOutput);
}
function processForm(data) {
// here you can process the data from the form
Browser.msgBox(data);
}
And add a html file to the project named sendForm.html
<script>
function sendForm() {
var data = document.forms[0].elements[0].value;
google.script.run.withSuccessHandler(ready).processForm(data);
document.getElementById("all").innerHTML = "Processing..";
}
function ready() {
document.getElementById("all").innerHTML = "Processed!"
}
</script>
<div id="all">
<form id="form"><input type="text"></form>
<button onclick="javascript:sendForm();">Submit</button>
</div>
A button within a form automatically triggers the submit of the form, and here we want only the javascript to do the work. So we have put it outside the form.
The sendForm() function takes the value of the first element of the form. Then it runs a function in your google script. By putting google.script.run. before the function name you can do this. The withSuccessHandler(functionName) will run a callback function in your sidebar after the function has completed.
You can also type in your HTML as a string and then use HtmlService, which is much less elegant, but it will also work if you have problems adding a html file to your project.
function openSidebarForm() {
var html = '<script>function sendForm() {'
+ 'var data = document.forms[0].elements[0].value;'
+ 'google.script.run.withSuccessHandler(ready).processForm(data);'
+ 'document.getElementById("processing").innerHTML = "Processing.."; }'
+ 'function ready() {'
+ 'document.getElementById("all").innerHTML = "Processed!" }'
+ '</script>'
+ '<div id="all"><div id="processing"></div>'
+ '<form id="form"><input type="text"></form>'
+ '<button onclick="javascript:sendForm();">Submit</button></div>';
htmlOutput = HtmlService.createHtmlOutput(html).setSandboxMode(HtmlService.SandboxMode.IFRAME).setTitle("Form");
var ui = SpreadsheetApp.getUi();
ui.showSidebar(htmlOutput);
}
function processForm(data) {
// here you can process the data from the form
Browser.msgBox(data);
}
Good luck !