Google Sheets web app register several options - google-apps-script

I've taken an example from a book to adapt it. the thing is that the original code has radio check (to enable only one option) and I'd like to have them as checkbocxes (to register several choices). I've made the changes in the HTML code and it looks fine but the spreadsheet still registers one of the choices instead of all of them.
Could you please let me know what I'm missing?
Here's the HTML of the project
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form method="post" action="<?= pubUrl ?>">
<h4>Where will you go for vacation?</h4>
<? for (var i in places) { ?>
<input type="checkbox" name="places"
value="<?= places[i] ?>" /><?= places[i] ?><br />
<? } ?>
<br />
<input type="submit" value="SUBMIT" />
</form>
</body>
</html>
And here's the GAS (google Script)
function doGet() {
// Replace with your spreadsheet's ID.
var ss = SpreadsheetApp.openById("1hpYbBbpVfxsciVCpZGBcqHPeBo2Wuj7U1Y9CaxsI9go");
var SheetPlaces = ss.getSheetByName("Places");
var data = SheetPlaces.getDataRange().getValues();
// Remove header row.
data.shift();
var places = [];
// Populate the places array with the first column's data.
data.forEach(function(row){
places.push(row[0]);
});
var template = HtmlService.createTemplateFromFile("form.html");
//Assign the published URL to the template object in the doGet
template.pubUrl = "https://script.google.com/macros/s/AKfycbx90heH12wfP4-kVZCOkEpI7Bi5wqpDAf-ndLrf3bPPYSwwEp5Q/exec";
//o
//template.pubUrl = ScriptApp.getService().getUrl();
// Assign the places array to the template object.
template.places = places;
var html = template.evaluate();
return HtmlService.createHtmlOutput(html);
}
function doPost(e){
// Replace with your spreadsheet's ID.
var ss = SpreadsheetApp.openById("1hpYbBbpVfxsciVCpZGBcqHPeBo2Wuj7U1Y9CaxsI9go");
var SheetResponses = ss.getSheetByName("Responses");
// Create a 'Responses' sheet if it does not exist.
if(!SheetResponses){ SheetResponses = ss.insertSheet("Responses");
}; SheetResponses.appendRow([e.parameter.places]); return ContentService.createTextOutput( "Your response submitted successfully. Thank you!" );
}
function createForm() {
var ThisSpreadsheet = SpreadsheetApp.getActive();
var SheetPlaces = ThisSpreadsheet.getSheetByName("Places");
// Load 'Places' sheet data as a 2-dimensional array.
var data = SheetPlaces.getDataRange().getValues();
// remove the header row
data.shift();
var places = [];
// Populate the places array with the first column's data
data.forEach(function(row){
places.push(row[0]);
});
// Create a new form
var form = FormApp.create("Vacation Form");
form.addMultipleChoiceItem()
.setTitle('Where will you go for a vacation?')
.setChoiceValues(places)
.showOtherOption(true)
}
Also, here's the web app url
https://script.google.com/macros/s/AKfycbx90heH12wfP4-kVZCOkEpI7Bi5wqpDAf-ndLrf3bPPYSwwEp5Q/exec
Thanks for your help!

Related

How can I create a web app where I can read text from a sheet based on dropdown selections?

I am trying to create a role description generator which reads pre-written text from a Google Sheet and assembles it in blocks in a web app through selections (team, role, seniority level, etc.) in dropdown menus.
This is an example of what the data in the sheet looks like:
Team name
Team description
A-team
Description
B-team
Description
...
...
So far, for the team selection, I have created the dropdown menu which reads the data from the sheet, and pulls the names of each team into a dropdown list. But my problem is loading the corresponding team description text into the HTML page. I just can't seem to get it to work.
When pressing the generate button, what should happen is that the description for A-team is loaded, but instead I get [object MouseEvent].
Any suggestions? Thanks in advance! :)
Here's my code:
Code.gs
var url = "*spreadsheet URL*";
function doGet(e) {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
//get the data for the dropdown list
function valuesForList(list) {
//define the data
var ss = SpreadsheetApp.openByUrl(url)
var teamsSheet = ss.getSheetByName('Data');
var lastRow = teamsSheet.getLastRow();
var teamsRange = teamsSheet.getRange(1, 3, lastRow, 1);
//create a named range
ss.setNamedRange('teamsList', teamsRange);
//get the values from the range
var listValues = ss.getRangeByName(list).getValues();
return listValues;
}
//the function to show the data on the index.html
function PostInfo (userInfo){
//load the data
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Teams");
var data = ws.getRange(2,1,ws2.getLastRow(),2).getValues();
var teamList = data.map(function(r){ return r[0]});
var teamDesc = data.map(function(r){ return r[1]});
var position = teamList.indexOf(userInfo.teams);
if(position > -1){
return teamDesc[position];
} else {
return "Unavailable";
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
<script>
function onListSuccess(list) {
var listLength = list.length;
for (i=0; i<listLength;i++) {
var dropdown = document.getElementById("teams");
var opt = document.createElement("option");
dropdown.options.add(opt);
opt.text = list[i][0];
opt.value = list[i][0];
}
}
function onListSelect(teamDesc){
var text = teamDesc.toString().split(",");
document.getElementById('est').innerHTML = text;
}
</script>
</head>
<body>
<div id="main">
<h1>Role Description Generator</h1>
<p>
<label for="teams">Team:</label>
</p>
<p>
<select name="teams" id="teams" tabindex="2"></select>
</p>
<button id="btn">Generate</button>
<div>
<label for="est">Team description:</label>
<p id="est" name="est"></p>
</div>
</div>
</body>
<script>
function populateList(){
google.script.run.withSuccessHandler(onListSuccess).valuesForList('teamsList');
}
document.getElementById("teams").addEventListener("change", doStuff);
document.getElementById("btn").addEventListener("click", onListSelect);
function doStuff(){
var userInfo = {};
userInfo.teams = document.getElementById("teams").value;
google.script.run.PostInfo(userInfo);
}
window.addEventListener('load', populateList);
</script>
</html>
Modification points:
In your script, when the dropdown list is changed, doStuff() is run. But in this case, google.script.run.PostInfo(userInfo) runs only the function of PostInfo at Google Apps Script. By this, the returned value is not used.
And, when the button is clicked, onListSelect is run. But in this case, teamDesc of onListSelect(teamDesc) is the event object. By this, such value of [object MouseEvent] is shown. I thought that this might be the reason of your issue.
By the way, when I saw your Google Apps Script, I noticed that PostInfo has a modification point. When var data = ws.getRange(2,1,ws2.getLastRow(),2).getValues(); is run, I think that an error occurs. Because ws2 is not declared. In your case, is that ws? I thought that this might be due to your miscopy.
When you want to show the value from PostInfo when the button is clicked, how about the following modification?
Modified script:
HTML&Javascript side:
From:
document.getElementById("teams").addEventListener("change", doStuff);
document.getElementById("btn").addEventListener("click", onListSelect);
function doStuff(){
var userInfo = {};
userInfo.teams = document.getElementById("teams").value;
google.script.run.PostInfo(userInfo);
}
To:
document.getElementById("btn").addEventListener("click", doStuff);
function doStuff(){
var userInfo = {};
userInfo.teams = document.getElementById("teams").value;
google.script.run.withSuccessHandler(onListSelect).PostInfo(userInfo);
}
Google Apps Script side:
From:
var ws = ss.getSheetByName("Teams");
var data = ws.getRange(2,1,ws2.getLastRow(),2).getValues();
To:
var ws = ss.getSheetByName("Teams");
var data = ws.getRange(2,1,ws.getLastRow(),2).getValues();
Note:
In this modidication, it supposes that the Google Apps Script works fine and returns the correct values. Please be careful this.
Reference:
Class google.script.run

How to implement DatePicker in my Google Apps Scripts

I would like to make the two dates start_date_cal and end_date_cal chosen by the user who is running the script below.
By reading a lot about how to do that, I have found plenty about Html Services, but I couldn't successed in implementing it in my code.
function main_cotisations() {
var cell_col_number = "";
var cell_row_number = "";
var ss = SpreadsheetApp.getActive();
var sheet = ss.getSheetByName('2019-2020');
//ss.setActiveSelection('A3');
ss.getRange('A3').activate();
// Get active cell and get value of it
var cell = ss.getCurrentCell();
var cellValue = cell.getValue();
var start_date_cal = new Date('December 12, 2019 19:00:00 +1100');
var end_date_cal = new Date('December 12, 2019 22:30:00 +1100');
// Start the loop
while (cellValue != ""){
cellValue = cell.getValue();
if (cellValue != "") {
var infos_user = {};
infos_user.prenom = sheet.getRange(cell.getRow(),cell.getColumn()+2).getValue();
infos_user.mail = sheet.getRange(cell.getRow(),cell.getColumn()+3).getValue();
infos_user.solde_a_payer = sheet.getRange(cell.getRow(),cell.getColumn()+8).getValue();
infos_user.url_calendar = 'https://www.google.com/calendar/render?action=TEMPLATE&text=Penser+aux+capitations+: '+infos_user.solde_a_payer+'F&location=Ducos&dates='+getRelativeDate(start_date_cal)+'%2F'+getRelativeDate(end_date_cal);
if (sheet.getRange(cell.getRow(),cell.getColumn()+9).isChecked() == false) {
sendmail_paiement(infos_user);
}
};
cell = cell.offset(1, 0);
};
var infos_globales = {};
infos_globales.solde_global = sheet.getRange(cell.getRow()-1,cell.getColumn()+8).getValue();
infos_globales.nb_user_hospitalier = sheet.getRange(cell.getRow()-1,cell.getColumn()+9).getValue();
infos_globales.nb_user_retard =sheet.getRange(cell.getRow()-1,cell.getColumn()+10).getValue();
}
//***********************************************************************************************************************
function getRelativeDate(given_date) {
//{given_date = Utilities.formatDate(temp_date, "GMT", "yyyyMMdd'T'HHmmss'Z'");}
temp = Utilities.formatDate(given_date, "GMT", "yyyyMMdd'T'HHmmss'Z'");
return temp.toString();
}
function sendmail_paiement(infos_user) {
var templ = HtmlService
.createTemplateFromFile('tpl_mail_exceptionnel');
templ.infos_user = infos_user;
var message = templ.evaluate().getContent();
if (infos_user.solde_a_payer>0) {
MailApp.sendEmail(
infos_user.mail,
"Rappel de capitations",
'',
{htmlBody: message,}
);
}
}
I would appreciate some help here.
It could be implemented by developing an WebApp from there you could create a form with a date picker and a submit button to send the date back to the apps script and execute your code.
I've done a little demo:
Go apps script and make a new project:
function doPost(e) {
Logger.log(e.parameter.start);
Logger.log(e.parameter.end);
return HtmlService.createHtmlOutput("Hi there, <br> When you click submit doPost() function is called. <br> By calling e.parameter.start you'll get the desired dates <br> Like:" +e.parameter.start+ "<br>Now check the logs. <br> Good luck");
}
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index');
}
Now, on apps script, press File --> New --> Html file --> Name it 'index'
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form action="PASTE_YOUR_WEBAPP_LINK_HERE" method="post">
<label for="start">Start date:</label>
<input type="date" id="start" name="start"
value="2019-10-21"
min="2019-01-01" max="2020-12-31">
<input type="date" id="end" name="end"
value="2019-10-22"
min="2019-01-01" max="2020-12-31">
<input type="submit" value="Submit">
</form>
</body>
</html>
Go to Publish --> Deploy as Web App
Copy the link and post it inside the index HTML file, were it says PASTE_YOUR_WEBAPP_LINK_HERE
Now you can visit your deployed WebApp:
Anytime you click submit you'll call doPost() function.
So, now you can paste your code inside doPost() function, you can use the dates from the datepicker and execute any apps script you wish.
Hope this helps.

Can one create an Interactive web app with GAS?

Broken down to its most elemental, what I want to do from a web app context is:
Ask for some data from user.
Display some data to user.
Ask for some more data from user.
Use all that data in a web app.
More specifically, I am trying to build a Google Script web app that does the following:
Presents an html page where the user can input a user ID number.
Takes that number and finds the last line on a spreadsheet belonging
to that user.
Displays that last line number to the user (this is
the first point at which I am stumped—see below for what I have
tried).
Presents a 2nd html input page where the user can either
accept the last line info displayed to them, or enter an alternate
number (and some other info).
All of that info is then used to
create a Google Doc and add info about that Google Doc on a new row
in a Google spreadsheet.
I have tried:
(a) Class PromptResponse [ui.prompt]
(b) alert(Prompt)
(c) showModalDialog
(d) show ModelessDialog
All of these failed as they apparently must be triggered from a bound app.
I considered the concept of having two doGet statements in a single webApp which led me to
Linking to another HTML page in Google Apps Script, but that seems to deal with a two-page SINGLE html rather than two separate html pages (which is what I think I need).
I also considered using the Browser.msgBox in the Class CacheService but that produced the same context error as (a) thru (d) above.
Lastly, I thought about—rather than displaying the user ID number from (1) above—saving the variable and inserting it later in the script (i.e., loading it in (4) above). That led me to the CacheService. But I could not see how to make that work and in any event, it’s not really what I want to do.
GS
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
function getSongId(objArgs){
// Get User's Catalog SS URL from Master Users List
var userId = objArgs.user;
var masterSSId = "ID";//This is the ID to the master users list SS.
var userSS = SpreadsheetApp.openById(masterSSId);//Open
var userSheet = userSS.getActiveSheet();
var nameOfUserRange = "User" + userId; //this constructs the user ID, like "user101"
Logger.log("nameOfUserRange = " + nameOfUserRange);
var userNamedRange = userSS.getRangeByName(nameOfUserRange); //this returns "Range" to pass its value on to future code lines
var cell = userNamedRange.activate(); //activates range and first cell in range
var namedUrlRange = userSS.getRange('SongsSheetUrl'); //this gets the SongSheetUrl named range
var userCol = namedUrlRange.getColumn(); //this gets col # of namedUrlRange
Logger.log("userCol = " + userCol);
var userSsUrl = cell.offset(0, userCol-1, 1, 1). getValue(); //this gets the user's Catalog SS URL
Logger.log("userSsUrl = " + userSsUrl);
var ss = SpreadsheetApp.openByUrl(userSsUrl);
var sheet = ss.getActiveSheet();
var lastRow = sheet.getLastRow();
var songId = lastRow+1;
Logger.log("songId = " + songId);
//some code here that displays songID to user
HTML "Index"
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<center> Enter your User ID below.
<input id="userId" type="text" placeholder="User ID"><br><br>
<button onclick="saveUserInput()">Continue</button>
</center>
<script>
window.saveUserInput = function() {
var user = document.getElementById('userId').value;
console.log('userId: ' + userId)
google.script.run
.withSuccessHandler(openPrompt)
.getSongId({user:user})
}
function openPrompt(results){
window.open(results.url, '_blank').focus();
}
</script>
</body>
</html>
songId Code
function getSongId() {
var masterSSId = "ID";//This is the ID to the master users list SS.
var userSS = SpreadsheetApp.openById(masterSSId);//Open
var userSheet = userSS.getActiveSheet();
var nameOfUserRange = "User" + userId; //this constructs the user ID, like "user101"
var userNamedRange = userSS.getRangeByName(nameOfUserRange); //this returns "Range" to pass its value on to future code lines
var cell = userNamedRange.activate(); //activates range and first cell in range
var namedUrlRange = userSS.getRange('SongsSheetUrl'); //this gets the SongSheetUrl named range
var userCol = namedUrlRange.getColumn(); //this gets col # of namedUrlRange
var userSsUrl = cell.offset(0, userCol-1, 1, 1). getValue(); //this gets the user's Catalog SS URL
var ss = SpreadsheetApp.openByUrl(userSsUrl);
var sheet = ss.getActiveSheet();
var lastRow = sheet.getLastRow();
var songId = lastRow+1;
}
As noted, I got "context" errors with everything I tried. BTW, I also created a web app that had 2 GS pages and 2 Index pages, and that just displayed both html pages on one page, and I still couldn't figure out how to display the User ID.
Finally, I spent a lot of hours, and used a lot of search terms, both at SO and the web in general trying to find someone else that has tackled this problem—and came up goose eggs.
Note: To respect "minimal, and verifiable," I have not included the script that asks for the 2nd set of info, but it is written and works.
Update: The following SO Question/Answer showed up to the right of this question: "Web apps+ remotely using script" after I posted it
It seems to in part solve my problem. At least it does display the user's User ID input, but I need it to display info I pull from a Google sheet based on the User ID (i.e., the songId). Using the doGet(e) approach, I still don't know where to put the getSongIdcode that gets the songId. I have added that code above.
Revised Code
gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getSongId(uObj) {
var userId = uObj.user;
var masterSSId = "ID";//This is the ID to the master users list SS.
var userSS = SpreadsheetApp.openById(masterSSId);//Open
var userSheet = userSS.getActiveSheet();
var nameOfUserRange = "User" + userId; //this constructs the user ID, like "user101"
Logger.log("nameOfUserRange = " + nameOfUserRange);
var userNamedRange = userSS.getRangeByName(nameOfUserRange); //this returns "Range" to pass its value on to future code lines
var cell = userNamedRange.activate(); //activates range and first cell in range
var namedUrlRange = userSS.getRange('SongsSheetUrl'); //this gets the SongSheetUrl named range
var userCol = namedUrlRange.getColumn(); //this gets col # of namedUrlRange
var userSsUrl = cell.offset(0, userCol-1, 1, 1). getValue(); //this gets the user's Catalog SS URL
var ss = SpreadsheetApp.openByUrl(userSsUrl);
var sheet = ss.getActiveSheet();
var lastRow = sheet.getLastRow();
var songId = lastRow+1;
Logger.log("songId = " + songId);
return songId;
}
html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<center>
Enter your User ID below.
<input id="userId" type="text" placeholder="User ID"><br>
<input type="button" value="Continue" onclick="saveUserInput()">
<div id="results"></div>
</center>
<script>
function saveUserInput() {
var user = document.getElementById('userId').value;
google.script.run
.withSuccessHandler(function(hl){
document.getElementById('results').innerHTML=hl;
})
.getSongId({user:user})
}
</script>
</body>
</html>
Try something simple first. Just to see that you can get the client and the server communicating:
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Enter your User ID below.
<input id="userId" type="text" placeholder="User ID"><br>
<input type="button" value="Continue" onclick="saveUserInput()">
<div id="results"></div>
<script>
function saveUserInput() {
var user = document.getElementById('userId').value;
google.script.run
.withSuccessHandler(function(hl){
document.getElementById('results').innerHTML=hl;
})
.getSongId({user:user})
}
</script>
</body>
</html>
Then use a simple getSongId() function:
function getSongId(uObj) {
return uObj.user
}
I would use this sort of doGet()
function doGet() {return HtmlService.createHtmlOutputFromFile('Index');
}
You html doesn't have any scriptlets that need to be evaluated. It's not really a template.
Then test the getSongId by itself and once that works you can return it to the div and later if you wish you can create another page.

How to Populate Google Sheet Cell with Selected Value from HTML UI?

I have created an HTML UI from a Google Sheet file I am working with. The UI pulls a list of vendors from my Vendor Database tab, allowing a user to select which vendor they'd like to place an order with from the HTML UI. Upon click of the Save button in the HTML UI, though, I'd like the file to populate cell B12 of the POTemplate tab with the user's selection, but am unsure how to do this. Right now, I have taken the following steps to make this happen, but with limited success:
APPS SCRIPT
This populates the HTML drop down list with vendor names from our Vendor Database tab in the active file:
function getVendors() {
var active = SpreadsheetApp.getActive();
var sheet = active.getSheetByName("Vendor Database");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("A2:A" + lastRow);
var data = myRange.getValues();
var optionsHTML = "";
for (var i = 0; i < data.length; i+=1) {
optionsHTML += '<option>' + data[i][0] + '</option>';
};
return optionsHTML;
This attempts to grab the vendor selected in the HTML UI and populate the preferred cell in our POTemplate tab, B12:
function save(formObj) {
var vendor = formObj.vendor;
var app = SpreadsheetApp;
var orderSheet = app.getActiveSpreadsheet().getSheetByName("POTemplate");
orderSheet.getRange(B12).setValue(vendor);
}
HTML Code
<html>
<head>
</head>
<body>
<form>
<div>
<select id="vendor">
<?!= getVendors(); ?>
</select>
<select>
<?!= getATTN(); ?>
</select>
</div>
</form>
<input type="button" value="Save PO" class="button button2"
onClick="google.script.run.save(this.parentNode)" />
</body>
</html>
You can also do it like this:
code.gs:
function getSelectOptions() {
var data = SpreadsheetApp.getActive().getSheetByName('Vender Database').getDataRange().getValues();
var options = [];
//the loop skips the first line
for (var i = 1; i < data.length; i++) {
options.push(data[i][0]);
}
return options;
}
//for the webapp
function doGet()
{
var output=HtmlService.createHtmlOutputFromFile('test');
return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
//for a dialog
function showDialog(){
var ui=HtmlService.createHtmlOutputFromFile('test');
SpreadsheetApp.getUi().showModelessDialog(ui, 'Get Options');
}
test.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
google.script.run
.withSuccessHandler(updateSelect)
.getSelectOptions();//this updates the select options everytime you load the page.
});
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]);
}
}
</script>
</head>
<body>
<select id="sel1"></select>
</body>
</html>
Saving the Selected Value in a Sheet
additional gs:
function savSelected(selected){
SpreadsheetApp.getActive().getSheetByName("POTemplate").getRange('B12').setValue(selected);
}
additional script function:
function savSelect(){
var selected=$('#sel1').val();
google.script.run.savSelected(selected);
}
additional html:
<select id="sel1" onChange="savSelect();"></select>
In your save() function, you need to surround "B12" in quotes.
function save(formObj) {
var vendor = formObj.vendor;
var app = SpreadsheetApp;
var orderSheet = app.getActiveSpreadsheet().getSheetByName("POTemplate");
orderSheet.getRange("B12").setValue(vendor);
}
In your HTML, you should not surround the google.script.run in quotes. Moreover, create a new function to make your life easier. You can modify the submitFormData() function in the HTML to include any other data that you might need to return.
<input type="button" value="Save PO" class="button button2"
onClick=submitFormData() />
<script>
function submitFormData() {
var vendor = document.getElementById("vendor").value;
var formObj = {};
formObj["vendor"] = vendor;
google.script.run.save(formObj);
}
</script>
(The getATTN() function wasn't provided, so I removed that from the HTML when testing this.)

In Google Script how can I get feedback from the user during runtime?

I'm attempting to get user feedback during runtime of a Google Script. I want the user to be able to select one or more students from a list of names and also select one or more standards from a list of standards.
I attempted to do this by creating an html popup screen with boxes. The popup works fine, but I can't gain access to the results of the popup.
Sample
Here are my current script files:
code.gs
// Use this code for Google Docs, Forms, or new Sheets.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Dialog')
.addItem('Open', 'doGet')
.addToUi();
}
function doGet() {
html = HtmlService
.createTemplateFromFile('Index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Dialog title');
}
function getStandards(){
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spreadsheet.getActiveSheet();
var dataRange = sheet.getRange(2,1,15,1);
var data = dataRange.getValues();
return data;
}
function getStudents(){
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spreadsheet.getActiveSheet();
var dataRange = sheet.getRange(2,2,15,1);
var data = dataRange.getValues();
return data;
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Standards? Students?
<br>
<select size="15" name="standards" multiple>
<? var data = getStandards();
for (var i = 0; i < data.length; i++) { ?>
<option><?= data[i] ?>
<? } ?>
</select>
<select size="15" name="students" multiple>
<? var data = getStudents();
for (var i = 0; i < data.length; i++) { ?>
<option><?= data[i] ?>
<? } ?>
</select>
<input type="button" value="Close"
onclick="google.script.host.close()" />
</body>
</html>
This is the form that is displayed, but I need to get the list of Standards and the list of Students when I hit the close button so that I can Create a bunch of new rows in my spreadsheet.
The target result would be to have 9 new rows added. One for each student/standard pair. Then I can add scores for each one.
Thanks!
I don't mean to sound weird but why not just use Google form? it automatically puts all the entries into the Google Sheet.
At some point before the .close() happens you'll want to add in some thing like:
<input type="button" value="Close"
onclick="
google.script.run.storeInput
(
[
document.getElementById("#standards").value,
document.getElementById("#students").value
]
)
google.script.host.close()" />
After adding an ID attribute to both selects and creating a function storeInput(arr) in .gs