I am trying to make a pop-up box with several multiple-choice answers to select.
I used this example:
google apps script : a select drop down list in google sheet
Which was a good starting point for 1 question, and I tried expanding on it to get multiple answers but failed expanding it.
Here's my test file:
https://docs.google.com/spreadsheets/d/1BRCqpvfRl64a7ISyuohxUJLWKbqX9Fz6NPCrL2iKEm0/
It contains script code triggered by a simple button press;
function start() {
var spreadsheet = SpreadsheetApp.getActive();
spreadsheet.getRange('A1:B1').activate();
spreadsheet.getActiveRangeList().clear({contentsOnly: true, skipFilteredRows: true});
spreadsheet.getRange('A10').activate();
// START HTML POP-UP
dropDownModal()
};
// -------------------------------------------------------------------------
function dropDownModal() {
var htmlDlg = HtmlService.createHtmlOutputFromFile('dropdown.html')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(350)
.setHeight(175);
SpreadsheetApp.getUi()
.showModalDialog(htmlDlg, 'Box title');
};
function writeChoice(selection1) {
const writeResponseLocation1 = "A1";
SpreadsheetApp
.getActiveSpreadsheet()
.getSheets()[0]
.getRange(writeResponseLocation1)
.setValue(selection1);
}
function writeChoice(selection2) {
const writeResponseLocation2 = "B1";
SpreadsheetApp
.getActiveSpreadsheet()
.getSheets()[0]
.getRange(writeResponseLocation2)
.setValue(selection2);
}
// -------------------------------------------------------------------------
and this dropdown.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
function onSuccess1() {
google.script.host.close();
}
function submit1() {
const choice1 = document.getElementById('choice1').value;
const choice2 = document.getElementById('choice2').value;
google.script.run
.withSuccessHandler(onSuccess1)
.writeChoice(choice1)
.writeChoice(choice2);
}
function setup1() {
const button = document.getElementById('submitbutton1');
button.addEventListener("click", submit1)
}
</script>
<body onload="setup1()">
<p>
Text 1.
</p>
<form>
<select id="choice1">
<option value="choice 1-A">choice 1-A</option>
<option value="choice 1-B">choice 1-B</option>
<option value="choice 1-C">choice 1-C</option>
</select>
<br><br>
<select id="choice2">
<option value="choice 2-A">choice 2-A</option>
<option value="choice 2-B">choice 2-B</option>
<option value="choice 2-C">choice 2-C</option>
</select>
<br><br>
<button id="submitbutton1">Hit it 1</button>
</form>
</body>
</html>
and it's writing the answer from Question 1 into the location intended for Question 2.
Can someone please help find where I went wrong?
Thanks
You have two functions with the same name writeChoice
It is not enough to change the name of the function parameters (selection1, selection1), indeed those are only placeholders.
Instead you need to either create two different funcitons with two different names (sample 1) or pass writeResponseLocation as a second parameter (sample 2).
Furthermore, with google.script.run you can only call one Apps Script function at a time. You can call the second one e.g. within your success handler.
Sample 1:
Code.gs
...
function writeChoice1(selection1) {
const writeResponseLocation1 = "A1";
SpreadsheetApp
.getActiveSpreadsheet()
.getSheets()[0]
.getRange(writeResponseLocation1)
.setValue(selection1);
}
function writeChoice2(selection2) {
const writeResponseLocation2 = "B1";
SpreadsheetApp
.getActiveSpreadsheet()
.getSheets()[0]
.getRange(writeResponseLocation2)
.setValue(selection2);
}
...
html
<script>
function onSuccess1() {
const choice2 = document.getElementById('choice2').value;
google.script.run
.withSuccessHandler(onSuccess2)
.writeChoice2(choice2);
}
function onSuccess2() {
google.script.host.close();
}
function submit1() {
const choice1 = document.getElementById('choice1').value;
google.script.run
.withSuccessHandler(onSuccess1)
.writeChoice1(choice1);
}
function setup1() {
const button = document.getElementById('submitbutton1');
button.addEventListener("click", submit1)
}
</script>
...
Sample 2:
Code.gs
...
function writeChoice(selection, writeResponseLocation) {
SpreadsheetApp
.getActiveSpreadsheet()
.getSheets()[0]
.getRange(writeResponseLocation)
.setValue(selection);
}
...
html
<script>
function onSuccess1() {
const choice2 = document.getElementById('choice2').value;
google.script.run
.withSuccessHandler(onSuccess2)
.writeChoice(choice2, "B1");
}
function onSuccess2() {
google.script.host.close();
}
function submit1() {
const choice1 = document.getElementById('choice1').value;
google.script.run
.withSuccessHandler(onSuccess1)
.writeChoice(choice1, "A1");
}
function setup1() {
const button = document.getElementById('submitbutton1');
button.addEventListener("click", submit1)
}
</script>
...
Think I found a solution here fiddling together with a friend.
// =========================================================================
//
// EMPTY CELLS A1 and A2 before re-run
//
function start() {
var spreadsheet = SpreadsheetApp.getActive();
spreadsheet.getRange('A1:B1').activate();
spreadsheet.getActiveRangeList().clear({contentsOnly: true, skipFilteredRows: true});
spreadsheet.getRange('A10').activate();
// START HTML POP-UP
dropDownModal()
};
// -------------------------------------------------------------------------
function dropDownModal() {
var htmlDlg = HtmlService.createHtmlOutputFromFile('dropdown.html')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(350)
.setHeight(175);
SpreadsheetApp.getUi()
.showModalDialog(htmlDlg, 'Box title');
};
function writeChoice1(selection1) {
const writeResponseLocation1 = "A1";
SpreadsheetApp
.getActiveSpreadsheet()
.getSheets()[0]
.getRange(writeResponseLocation1)
.setValue(selection1);
}
function writeChoice2(selection2) {
const writeResponseLocation2 = "B1";
SpreadsheetApp
.getActiveSpreadsheet()
.getSheets()[0]
.getRange(writeResponseLocation2)
.setValue(selection2);
}
// =========================================================================
And the
dropdown.html :
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
function onSuccess() {
google.script.host.close();
}
function submit() {
const choice1 = document.getElementById('choice1').value;
const choice2 = document.getElementById('choice2').value;
google.script.run
.writeChoice1(choice1)
google.script.run
.withSuccessHandler(onSuccess)
.writeChoice2(choice2)
}
function setup() {
const button = document.getElementById('submitbutton');
button.addEventListener("click", submit)
}
</script>
<body onload="setup()">
<p>
Text 1.
</p>
<form>
<select id="choice1">
<option value="choice 1-A">choice 1-A</option>
<option value="choice 1-B">choice 1-B</option>
<option value="choice 1-C">choice 1-C</option>
</select>
<br><br>
<select id="choice2">
<option value="choice 2-A">choice 2-A</option>
<option value="choice 2-B">choice 2-B</option>
<option value="choice 2-C">choice 2-C</option>
</select>
<br><br>
<button id="submitbutton">Submit entries</button>
</form>
</body>
</html>
This all works.
The one thing I was hoping to understand and hopefully someone here can explain.
Why can I not
google.script.run
.withSuccessHandler(onSuccess)
.writeChoice1(choice1)
.writeChoice2(choice2)
And why does even in the working version
.withSuccessHandler(onSuccess)
.writeChoice2(choice2)
work, but this having the the closing after writing the choice not as such:
.writeChoice2(choice2)
.withSuccessHandler(onSuccess)
The confusing part is that I would assume close before writing would mean no write, so i switched them around somewhere early on in testing.
Happy the code works, but still wanting to learn if someone knows :)
Related
The script started to throw an error:
TypeError: Cannot read property 'fileName' of undefined at uploadFile(Code:16:25)
It was working a couple of months back, but now it doesn't, also it sometimes works when used in some other sheet.
Also this is not my code, and i am not a tech guy, i just used this code of someone else. if you could help please tell me what changes do i make in this code.
/* this is the index.html used to get the file to upload*/
<!DOCTYPE html>
<html>
<head>
<base target="_center">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form id="myForm" >
Select File:
<input type="file" name="myfile" accept="*" /><br>
File name: <input type="text" name="fileName" /><br><br>
<input type="button" value="Upload" onclick="upload(this.parentNode);" />
</form>
<script>
window.onload=func1;
function func1() {
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
});
}
function upload(obj){
google.script.run.withSuccessHandler(close).withFailureHandler(close).uploadFile(obj);
}
function close(e) {
console.log(e);
google.script.host.close();
}
</script>
</body>
</html>
/* code.gs function called when file is uploaded*/
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.createMenu('File')
.addItem('Attach...', 'showForm')
.addToUi();
}
function showForm() {
var app = SpreadsheetApp;
var html = HtmlService.createHtmlOutputFromFile('index');
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Upload File');
}
function uploadFile(obj) {
var newFileName = obj.fileName; //this is where debug shows the above error
var blob = obj.myfile;
var upFile = DriveApp.getFolderById('1BWcs7RBPDyJQm_R0FLEUxCfRlKTB0uwX').createFile(blob).setName(newFileName);
var fileUrl = upFile.getUrl();
var urlCell = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getActiveCell();
urlCell.setValue(fileUrl);
}
There seems to be a bug related to the curent upgrade of the Apps Script runtime to v8
While this is being fixed, you cannot disable V8 by going from the Apps Script Editor on
Run -> Disable new Apps Script runtime powered by V8
You can alternatively use a different method to upload your file
Sample how to upload your file with fileReader:
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_center">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form id="myForm" >
Select File:
<input type="file" name="myfile" accept="*" /><br>
File name: <input type="text" name="fileName" /><br><br>
<input type="button" value="Upload" onclick="upload(this.parentNode);" />
</form>
<script>
window.onload=func1;
function func1() {
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
});
}
function upload(obj){
var file = obj.myfile.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var obj2 = {
fileName: obj.fileName.value,
mimeType: file.type,
bytes: [...new Int8Array(e.target.result)]
};
google.script.run.withSuccessHandler(close).withFailureHandler(close).uploadFile(obj2);
};
reader.readAsArrayBuffer(file);
}
function close(e) {
console.log(e);
google.script.host.close();
}
</script>
</body>
</html>
code.gs
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.createMenu('File')
.addItem('Attach...', 'showForm')
.addToUi();
}
function showForm() {
var app = SpreadsheetApp;
var html = HtmlService.createHtmlOutputFromFile('index');
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Upload File');
}
function uploadFile(obj) {
var newFileName = obj.fileName;
var blob = Utilities.newBlob(obj.bytes, obj.mimeType, newFileName);
var upFile = DriveApp.getFolderById('1BWcs7RBPDyJQm_R0FLEUxCfRlKTB0uwX').createFile(blob);
var fileUrl = upFile.getUrl();
var urlCell = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getActiveCell();
urlCell.setValue(fileUrl);
}
Note:
Your error message TypeError: Cannot read property 'fileName' of undefined at uploadFile implies that you tried to run the function uploadFile manually form the editor - without passing it a file as obj parameter - this will lead to the error since without a file there is no fileName (and no fiel data).
The way your code is designed, uploadFile needs to be called from the html form after you upload a file.
What I'm Trying To Do
I'm trying to add HTML to a modal dialog box in google Forms using a click event to trigger a google.script.run.withSuccessHandler() call to supply the new HTML in order to get additional user input.
GS Code
function onOpen(e) {
FormApp.getUi().createMenu("My Menu").addItem('Set Up Invites', 'setUpInvite').addToUi();
}
function setUpInvite() {
//this is the main function
var ui = HtmlService.createHtmlOutputFromFile("Index")
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle("Setup");
FormApp.getUi().showModalDialog(ui, "Setup");
}
function getEventQAnswer(answer) {
var html;
switch(answer)
{
case "yes":
//TODO
//get the event info
return "";
break;
case "no":
//create the event
html = HtmlService.createHtmlOutputFromFile("createEvent.html")
return html;
break;
}
}
HTML Index Page
On this page I'm trying to change the get the functions to work onclick. I tried initially onchange, but it still didn't work. It starts with getSelectAnswer which gets the value from the select question, then calls the GS function getEventQAnswer which gets the proper HTML from the server side and delivers it to function addHTMLChoice. However, at present, it doesn't seem to do anything.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script>
//document.getElementById("eventQ").addEventListener("onchange", getSelectAnswer);
document.getElementById("eventQ").onclick.getSelectAnswer();
function addHTMLChoice(html) {
var div = document.getElementById('eventInfo');
div.innerHTML = html;
}
function getSelectAnswer() {
var e = document.getElementById('eventQ');
var val = e.options[e.selectedIndex].value;
google.script.run.withSuccessHandler(addHTMLChoice).getEventQAnswer(val);
}
</script>
<form>
<div>
<select id="eventQ">
<option value="yes">Yes</option>
<option value="no">No, create one now</option>
</select>
</div>
<div id="eventInfo">
</div>
</form>
</body>
</html>
This is the createEvent.html I'm trying to return in test.
<div>
<input id="datetime" name="datetime" type="datetime-local">
<p>hi</p>
</div>
The server-side code can only return certain type of parameters, described here. Since you are trying to return an html object it is not passed to the client side (your Modal dialog). Hence, modify your server-side like so:
function getEventQAnswer(answer) {
var html;
switch(answer)
{
case "yes":
//TODO
//get the event info
return "";
break;
case "no":
//create the event
html = HtmlService.createHtmlOutputFromFile("createEvent.html").asTemplate().getRawContent()
return html;
break;
}
}
Note the conversion into RawContent.
Also, I find it easier to setup onchange event trigger to obtain the choice, like so:
<form>
<div>
<select id="eventQ" onchange ='getSelectAnswer()'>
<option value="yes">Yes</option>
<option value="no">No, create one now</option>
</select>
</div>
The final html index code will be:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script>
//document.getElementById("eventQ").addEventListener("onchange", getSelectAnswer);
//document.getElementById("eventQ").onclick.getSelectAnswer();
function addHTMLChoice(html) {
console.log("success")
console.log(html)
var div = document.getElementById('eventInfo');
div.innerHTML = html;
}
function getSelectAnswer() {
console.log("getting selected Answer")
var e = document.getElementById('eventQ');
var val = e.options[e.selectedIndex].value;
console.log(val)
google.script.run.withSuccessHandler(addHTMLChoice).withFailureHandler(failed).getEventQAnswer(val);
}
function failed(e){
console.log("Failed")
console.log(e)
}
</script>
<form>
<div>
<select id="eventQ" onchange ='getSelectAnswer()'>
<option value="yes">Yes</option>
<option value="no">No, create one now</option>
</select>
</div>
<div id="eventInfo">
</div>
</form>
</body>
</html>
Note, the use of console.log to debug on the client side. This would be useful in future for your own debugging.
Hope that helps.
Problem description:
I want to create an add-on on my google sheet (g-1). When the user opens the add-on, I want to immediately read another google spreadsheet (g-2) and populate dropdowns on g-1 based on those columns.
I have enabled the Googlesheet Api
in Code.js:
function readSpreadsheet() {
var questions = Sheets.Spreadsheets.Values.get("_ID_", "SHEET!A2:k").values
if (!questions) {
return 'No data found.';
} else {
return questions
}
}
the function above works, because if I add that to the title on the add-on I see the correct number of columns:
HtmlService.createHtmlOutputFromFile('QuestionBank').setTitle(readSpreadsheet().length)
or I can print the first row
readSpreadsheet()[0]
............
So far so good.
Now in my html file, QuestionBank.html,
Problem #1. I am not able to call readSpreadsheet, it returns undefined. var question_rows returns undefined.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
/**
read all rows, upon clicking on sync button. But this is not necessary if I can populate the dropdowns on load
**/
$(function() {
$('#sync').click(readSpreadsheet);
});
function readSpreadsheet() {
this.disabled = true;
$('#error').remove();
var question_rows = google.script.run
.withSuccessHandler(
function(textAndTranslation, element) {
element.disabled = false;
})
.withFailureHandler(
function(msg, element) {
element.disabled = false;
})
.withUserObject(this)
.readSpreadsheet();
for (var row = 0; row < question_rows.length; row++) {
alert(question_rows[row])
}
}
</script>
Problem #2: I have several dropdowns that I want their value to be unique value of the g-2 columns. I want those dropdowns to be populated when the add-on opens.
<select class="filter">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
so instead of Volvo, etc, I want the first column of my data, unique values
Problem #3: if on load is not possible, I can include a button to read the data and populate the dropdowns
<button class="sync-button" id="sync">sync</button>
How about the following answers?
Answer for Problem #1
google.script.run doesn't return values. When it uses values from google.script.run, in your case, textAndTranslation of withSuccessHandler is the returned value. So you can modify readSpreadsheet() as follows.
function readSpreadsheet() {
this.disabled = true;
$('#error').remove();
google.script.run
.withSuccessHandler(withSuccessHandler)
.withFailureHandler(
function(msg, element) {
element.disabled = false;
})
.withUserObject(this)
.readSpreadsheet();
}
function withSuccessHandler(textAndTranslation, element) {
element.disabled = false;
var question_rows = textAndTranslation;
for (var row = 0; row < question_rows.length; row++) {
alert(question_rows[row])
}
}
Answer for Problem #2
You can achieve it by putting google.script.run in $(function() {}). The sample is as follows. This is a sample. So please modify the variables to yours.
<select class="filter"></select>
<script>
$(function() {
google.script.run.withSuccessHandler(sample).readSpreadsheet();
});
function sample(data) {
for (var i=0; i < data.length; i++) {
$('.filter').append($('<option>').html(data[i]).val(data[i]));
}
}
Answer for Problem #3
Of course, you can set values to <select class="filter"></select> using a button.
If I misunderstand your questions, I'm sorry.
I have a sheet with a column of group names, and things they need to report that they did or didn't do. I'm having trouble creating a script that would get the column of names to make a multiple choice question AND direct to the correct next page based on the answer.
Names Option1 Option2 Option 3 Option4
Frank Something1 Something2 Something3
Hank AnotherThing AnotherThing1 AnotherThing3 Anotherthing4
Bob Foo Bar
First question is Multiple Choice with column 1 with the answers.
Depending on the answer I need it to direct to a new section with the other columns with content on the same row as the chosen answer.
Choose Frank and submit to be sent to a Checkbox question with 3 options.
Anyone have the faintest on how to do this? I can make the questions manually but when it comes to directing the GO_TO_PAGE part I can't get that to work.
Thanks in advance!
Here's a possible approach to your problem. I'm using a sidebar which could just as easily be a dialog if you want to make it wider and could ultimately be a webapp.
Take a look at the dialog or sidebar and you'll see that you get a drop down list of name from your spreadsheet and when you select a name and click on GetToDoList then you get a list of to do items from your spreadsheet along with buttons that have links to different sheets that I've included in your spreadsheet.
Code.gs:
function getNames()
{
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('ToDoList');
var rg=sh.getDataRange();
var vA=rg.getValues();
var names=['Select Name'];
for(var i=1;i<vA.length;i++)
{
names.push(vA[i][0]);
Logger.log('%s',vA[i][0]);
}
return names;
}
function loadToDoSideBar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('todolist').setTitle('ToDoLists');
SpreadsheetApp.getUi().showSidebar(userInterface);
}
function getToDoList(name)
{
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('ToDoList');
var rg=sh.getDataRange();
var vA=rg.getValues();
var hl='';
for(var i=0;i<vA.length;i++)
{
if(vA[i][0]==name)
{
for(var j=1;j<vA[i].length;j+=2)
{
if(vA[i][j] && vA[i][j+1])
{
hl+=Utilities.formatString('<br /><label>%s<input class="btn1" type="button" value="%s" onClick="goToSheet(\'%s\')" /></label>',vA[i][j],'Go to' + vA[i][j+1],vA[i][j+1]);
}
}
}
}
return hl;
}
function goToSheet(name)
{
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName(name).activate();
}
todolist.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
google.script.run
.withSuccessHandler(updateSelect)
.getNames();
});
function updateSelect(vA)
{
var select = document.getElementById("sel1");
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i],vA[i]);
}
}
function getToDoList()
{
var name=$('#sel1').val();
google.script.run
.withSuccessHandler(updateToDoList)
.getToDoList(name)
}
function updateToDoList(hl)
{
document.getElementById('viewlist').innerHTML=hl;
}
function goToSheet(name)
{
google.script.run.goToSheet(name);
}
console.log('My Code');
</script>
<style>
div.scroll{background-color: #ffffff;width: 250px;height:100%;display:block;margin:0 0 0 5px;padding:0 0 0 10px;}
#sel1 option{width:250px;}
.type{color:#ff0000;font-weight:500;}
.date{color:#080b58;font-weight:500;}
.note{font-weight:500;}
.btn1{margin:10px 10px 10px 10px;vertical-align:25%;}
body{margin:5px 5px 5px 10px;width:275px;}
</style>
</head>
<body>
<select id="sel1" style="width:125px;height:35px;margin:10px 0 10px 0;">
<option value="" selected></option>
</select>
<input type="button" value="GetToDoList" onClick="getToDoList()" />
<br /><div id="viewlist" class="scroll"></div>
</body>
</html>
Here's what I did with your data. I just added another column between each value for the Locations or Links (not sure what you want). But the code shows you how you can incorporate links to different sheets into the solution.
And this is what the dialog looks like:
I'm trying to get an array from a spreadsheet and use it to populate a dropdown. Here is my code
code.gs
function doGet() {
var page = HtmlService.createTemplateFromFile('Index');
return page.evaluate()
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function getArrayList(){
var ss = SpreadsheetApp.openById("1EjRFAYiMBw5BuNhFJRUVG4MpUjIIy8Oey5JLyiYxj3c");
var sheet = ss.getSheetByName("Nomes");
var values = sheet.getDataRange().getValues();
var array = [];
for each (var item in values){
array.push(item[0]);
}
return array
}
Index.html
<!DOCTYPE html>
<html>
<?!= include('jQuery'); ?>
<div class="demo" >
<form id="myForm">
<select id="selectNumber">
<option>Choose a number</option>
</select>
</form>
<?!= include('JavaScript'); ?>
</div>
</html>
JavaScript.html
<script>
var options = google.script.run.getArrayList();
console.log(options);
$('#selectNumber').empty();
$.each(options, function(i, p) {
$('#selectNumber').append($('<option></option>').val(p).html(p));
});
</script>
jQuery.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
If instead of using var options = google.script.run.getArrayList(); on the JavaScript.html file, I pass a literal array var options = ["1","2","3"]; my code works like a charm.
I know that the problem is that google.script.run is returning Undefined, but I don´t know what I´m doing wrong. Can someone please help me?
Is this useful for you?
google.script.run.function() doesn't return values. So options of var options = google.script.run.getArrayList(); is Undefined. Use withSuccessHandler() to get the returned values from getArrayList(). Below is the updated JavaScript.html.
<script>
google.script.run.withSuccessHandler(sample).getArrayList();
function sample(options) {
$('#selectNumber').empty();
$.each(options, function(i, p) {
$('#selectNumber').append($('<option></option>').val(p).html(p));
});
}
</script>
values is an array of arrays. To get all of the data you need to do something like:
var a=[];
for(var i=0;i<values.length;i++)
{
for(var j=0;j<values[0].length;j++)
{
a.push(values[i][j]);
}
}
or just return values