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.)
Related
This question already has answers here:
UiApp has been deprecated. Please use HtmlService instead
(1 answer)
Uploading file to spreadsheet shows "UiApp has been deprecated. Please use HtmlServices instead"
(1 answer)
Closed 6 months ago.
I'm not a programmer or anything so please excuse any mistake.
I'm trying to use a code in Apps Script to facilitate data entry on a google sheets that I found online. The problem is the original creator used UiApp which has been deprecated.
I've been scouring the internet for anyway of making the change to Html but with no result.
I was hoping one of you could help me out!
Thank you
function doGet() {
var sheet = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1J_Fi7-hJuZkA2UftqM1Q-SG5NWxdQZkhLGjLIlVowTc/edit?usp=sharing'); //the spreadsheets url in which you want to change
var app = UiApp.createApplication(); //creates the application
var ss = sheet.getSheets()[0]; //gets the first sheet in the spreadsheet
var myPanel = app.createVerticalPanel(); //creates a vertical panel
var scroll = app.createScrollPanel().setPixelSize(200, 600); //creates a scrolling panel with the dimensions in its parameter
var panel3 = app.createVerticalPanel(); //creates a vertical panel
var panel4 = app.createVerticalPanel(); //creates a vertical panel
var panel = app.createVerticalPanel(); //creates a vertical panel
var panel2 = app.createAbsolutePanel().setSize('100%','100%').setId('absPanel'); //creates an absolute panel that covers the whole application
var periodKey = sheet.getSheetByName('Periods');//gets the sheet titled periods
var periodKeyValues = periodKey.getDataRange().getValues();//gets the values in the sheet
var guildKey = sheet.getSheetByName('Guilds');//gets the sheet titled Guilds
var guildKeyValues = guildKey.getDataRange().getValues();//gets the values in that sheet
Here is a simple example of how to build a table using HTML Service using a template and then using google.script.run to send new data to the spreadsheet.
My spreadsheet Sheet1 looks like this.
Code.gs
function doGet() {
try {
let html = HtmlService.createTemplateFromFile("HTML_Test");
let spread = SpreadsheetApp.openById("1uqq7UeFgYBM_Onzcq0o9ZuHLcmMEotN8hlmo83Ipt0A");
let sheet = spread.getSheetByName("Sheet1");
let data = sheet.getDataRange().getDisplayValues(); // data includes dates
html.data = data;
return html.evaluate();
}
catch(err) {
Logger.log(err);
}
}
function addRow(values) {
try {
let spread = SpreadsheetApp.openById("1..your id here...A");
let sheet = spread.getSheetByName("Sheet1");
let row = [ values.id, values.name, values.date ];
sheet.appendRow(row);
return row;
}
catch(err) {
Logger.log(err);
}
}
HTML_Test
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
table, th, td {
width: 10%;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="inputFields">
ID:<input id="idField" type="text"><br>
Name:<input id="nameField" type="text"><br>
Date:<input id="dateField" type="text"><br>
<input id="submitButton" type="button" value="Submit" onclick="submitOnClick()">
</div>
<div id="tableDiv">
<table id="myTable">
<? for( var i=0; i<data.length; i++ ) { ?>
<tr>
<? for( var j=0; j<data[0].length; j++ ) { ?>
<td>
<?= data[i][j] ?>
</td>
<? } ?>
</tr>
<? } ?>
</table>
</div>
<script>
function submitOnClick() {
try {
let id = document.getElementById("idField").value;
let name = document.getElementById("nameField").value;
let date = document.getElementById("dateField").value;
// make sure its a valid date
if( isNaN(Date.parse(date)) ) throw "invalid date";
google.script.run.withSuccessHandler(
function(values) {
let table = document.getElementById("myTable");
let row = table.insertRow(-1);
for( let i=0; i<values.length; i++ ) {
let cell = row.insertCell(i);
cell.innerHTML = values[i];
}
}
).addRow({ id: id, name: name, date: date });
}
catch(err) {
alert(err);
}
}
</script>
</body>
</html>
My form looks like this
References:
HTML Service
google.script.run
Javascript and HTML DOM
New to Google scripts. Trying to create a form with a dropdown list populated with one of the google sheets.
I found a couple of examples of this on the web and tried to create a dropdown list on a sidebar from Sheets. the spreadsheet has a tab named 'CARS'. Separately, I ran the Code.gs which generates the values for the dropdown list and it is working.
However, the sidebar does not show the dropdown list. Here are the two files (HTML and gs) I am using. Thanks.
Code.gs
function getList() {
console.log('cars')
var ss = SpreadsheetApp.getActiveSpreadsheet();
var carSheet = ss.getSheetByName("CARS");
var LastRow = carSheet.getLastRow();
console.log(LastRow)
return carSheet.getRange(2,1,LastRow - 1, 2).getValues();
}
function startForm() {
var form = HtmlService.createHtmlOutputFromFile('dropdownList');
SpreadsheetApp.getUi().showSidebar(form);
}
function addMenu() {
var menu = SpreadsheetApp.getUi().createMenu('Custom');
menu.addItem('Dropdown List', 'startForm');
menu.addToUi();
}
function onOpen(e)
{
addMenu();
}
dropdownList.html
<!DOCTYPE html>
<script>
function loadCars() {
google.script.run.withSuccessHandler(function(ar))
console.log('in loadcars')
{
var carsSelect = document.getElementById("cars");
console.log(ar)
let option = document.createElement("option");
option.value = "";
option.text = "";
carsSelect.appendChild(option);
ar.forEach(function(item,index)
{
let option = document.createElement("option");
option.value = item[1];
option.text = item[0];
carsSelect.appendChild(option);
});
}).getList();
};
function onSelect()
{
var carID = document.getElementById("cars").value;
document.getElementById("carValue").innerHTML = carID;
};
</script>
<html>
<head>
<h1>something</h1>
<base target="_top">
</head>
<body>
<select id="cars" onChange="onSelect()" ></select><br>
<span id>"carValue"</span>
<script>loadCars();</script>
</body>
</html>
Upon further review of the code in dropdowList.html found two errors. I had typed ="carValue" instead of <span id = "carValue>. The other error was
google.script.run.withSuccessHandler(function(ar))
instead of
google.script.run.withSuccessHandler(function(ar)
essentially causing the function not to run properly.
Sorry for the trouble
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
I have this google test sheet with dummy data that I have created for testing purposes
https://docs.google.com/spreadsheets/d/1Hxjr1ai6KWWJyyQLPJ2GRWYgQftyBxJmiKEu25Co2aQ/edit#gid=0
Crypto Data Image
By using google app script I have created a google web app with a HTML drop down box (select in HTML) that gets data from the above google sheet.
https://script.google.com/macros/s/AKfycbzYDDLg6YDNLBo-3jKQpcedU9jLJbxbOUDMh5YayKtVaurN2COq/exec
The google web app successfully displays the users selection from the drop down box in a HTML paragraph tag but the web app fails to display the data array for the selected cryptocurrency. The error message is "undefined".
I have just been doing this google app script stuff for a couple of weeks and I have a hard time understanding why the user selected array with data is not displayed on the HTML page.
My next step will be to try to plot the data the user selects from the HTML drop down box but before I can do that I need to visually confirm that the data is actually there.
If I select nano in the dropdown box this the data I get from the google apps script Logger.log:
[19-02-22 12:02:15:237 PST] The number of columns in sheet = 5
[19-02-22 12:02:15:238 PST] Crypto currencies in sheet = Bitcoin,Ethereum,Nano,Status,,,,,,,,,,,,,,,,,,,,
[19-02-22 12:02:15:241 PST] Dropdown box selection = Nano
[19-02-22 12:02:15:244 PST] Data to plot =0.9,0.8,0.7,0.8,
That tells me that the google app script is working but what is not working is the display of the data in the HTML paragraph tag on the website.
Code.gs
function getSelectList()
{
// puts crypto currency names in dropdown box on website
var ss = SpreadsheetApp.openById("1Hxjr1ai6KWWJyyQLPJ2GRWYgQftyBxJmiKEu25Co2aQ");
var sheet = ss.getSheetByName("Sheet1");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("A2:A" + lastRow);
var data = myRange.getValues();
return data;
}
function Selection(crypto_name)
{
var ss = SpreadsheetApp.openById("1Hxjr1ai6KWWJyyQLPJ2GRWYgQftyBxJmiKEu25Co2aQ");
var sheet = ss.getSheetByName("Sheet1");
var name = sheet.getRange('A2:A101').getValues();
var Nc = sheet.getLastColumn();
Logger.log("The number of columns in sheet = " + Nc);
Logger.log("Crypto currencies in sheet = " + [name]);
Logger.log("Dropdown box selection = " + crypto_name);
for (i = 0; i < name.length; i++)
{
if(name[i]== crypto_name)
{
var TS = sheet.getRange(i+2,2,1,Nc).getValues();
Logger.log("Data to plot =" + [TS]);
}
}
return TS ;
}
function doGet()
{
return HtmlService.createHtmlOutputFromFile("Web");
}
Web.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="MyBox" onchange="GetMyBox(this)"> </select>
<script>
(function()
{
google.script.run.withSuccessHandler( function (selectList)
{
var select = document.getElementById("MyBox");
for( var i=0; i<selectList.length; i++ )
{
var option = document.createElement("option");
option.text = selectList[i][0];
select.add(option);
}
}
).getSelectList();
}());
function GetMyBox(sel)
{
var crypto_name = sel.value;
document.getElementById("demo1").innerHTML = crypto_name;
var data = google.script.run.Selection(crypto_name);
document.getElementById("demo2").innerHTML = data;
}
</script>
<p id="demo1"></p>
<p id="demo2"></p>
</body>
</html>
This isn't intended to be a complete answer I just took your code and reformatted it a bit based upon what I think you're trying to accomplish. I didn't look at your code precisely but I'm pretty sure you still have some debugging to do.
In the html it looked like you want to use the JQuery ready function so I added some JQuery references to the head. If that wasn't your plan then you might want to change to window.onload.
html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<select id="MyBox" onchange="GetMyBox(this)"> </select>
<script>
$(function() {
google.script.run
.withSuccessHandler(selectList)//You can just put the name of the function in this way
.getSelectList();
});
function GetMyBox(sel) {
var crypto_name = sel.value;
google.script.run
.withSuccessHandler(function(data){//you put an anonymous function this way
document.getElementById("demo2").innerHTML = data;
}
.Selection(crypto_name);
}
function selectList(data){
var select = document.getElementById("MyBox");
for( var i=0; i<data.length; i++ ) {
var option = document.createElement("option");
option.text = data[i][0];
select.add(option);
}
</script>
<p id="demo1"></p>
<p id="demo2"></p>
</body>
</html>
Google Script:
function getSelectList() {
// puts crypto currency names in dropdown box on website
var ss = SpreadsheetApp.openById("1Hxjr1ai6KWWJyyQLPJ2GRWYgQftyBxJmiKEu25Co2aQ");
var sheet = ss.getSheetByName("Sheet1");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("A2:A" + lastRow);
var data = myRange.getValues();
return data;//this is a 2d array it might be what you want for select options
}
function Selection(crypto_name) {
var ss = SpreadsheetApp.openById("1Hxjr1ai6KWWJyyQLPJ2GRWYgQftyBxJmiKEu25Co2aQ");
var sheet = ss.getSheetByName("Sheet1");
var name = sheet.getRange('A2:A101').getValues();
var Nc = sheet.getLastColumn();
Logger.log("The number of columns in sheet = " + Nc);
Logger.log("Crypto currencies in sheet = " + [name]);
Logger.log("Dropdown box selection = " + crypto_name);
for (i = 0; i < name.length; i++) {
if(name[i]== crypto_name) {
var TS = sheet.getRange(i+2,2,1,Nc).getValues();
Logger.log("Data to plot =" + [TS]);
}
}
return TS ; //this is a 2d array so it's not ready for html yet
}
After spending some time on the problem I figured it out. I will therfore answer my own question since no one is willing to provide a good answer to the question. I think it is important that a working solution to the problem is clearly presented so that anyone in the furure can easily find a solution to a similar question.
function GetMyBox(sel)
{
var crypto_name = sel.value;
document.getElementById("Tag1").innerHTML = crypto_name;
google.script.run.withSuccessHandler(callback).Selection(crypto_name);
}
function callback(whatToWrite)
{
document.getElementById("Tag2").innerHTML = whatToWrite;
}
</script>
<p id="Tag1"></p>
<p id="Tag2"></p>
I am trying to create a dynamically dependent dropdown, and for this I would like to have some layers of dependencies: first you choose between sheets, then between columns, and then between rows. I have a script now running in a Templated HTML file in Google Apps Script, which looks like this:
<?
var sheet = SpreadsheetApp.openById("1c7IwmyBrbNq5xwzo-7EyFewCx31WpfP4EzLpkHawffI").getSheetByName("test");
var lastRow = sheet.getLastRow();
var categoryRange = sheet.getRange("C2:C"+lastRow);
var category = categoryRange.getValues();
?>
Category: <select name="category">
<? for (var i = 0; i < category.length; ++i) { ?>
<option><?!= category[i] ?></option>
<? } ?>
</select>
<br/>
What I am trying to do now is to get an array or a list of some sort of all the sheets in a given spreadsheet, and then list them in a dropdown, with the names of the sheets.
From there I will have to find a way to make the dependencies, but then the selected sheet in the dropdown would set the sheet for the next dropdown or something?
To use in HTML the best practice is to load the page, run a function that return the info you need, and from that construct the HTML, here the sever side function:
function getSheetsNames(){
var sheetsName = [];
var sheets = ss.getSheets();
for( var i = 0; i < sheets.length; i++ ){
sheetsName .push(sheets[i].getName() )
};
return sheetsName;
}
If need help calling the server side function from HTML read best practices:
https://developers.google.com/apps-script/guides/html/best-practices#load_data_asynchronously_not_in_templates
Okay with great help from the user Kriggs the solution to getting sheets pushing them to a list of some sorts is as follows:
Page.html
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getSheetsNames();
});
function showThings(sheetsName) {
var list = $('#things');
list.empty();
for (var i = 0; i < sheetsName.length; i++) {
list.append('<li>' + sheetsName[i] + '</li>');
}
}
</script>
<?!= include('JavaScript'); ?>
JavaScript.html
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
Code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('Page')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function getSheetsNames(){
var ss = SpreadsheetApp.openById("Spreadsheet ID here");
var sheetsName = [];
var sheets = ss.getSheets();
for( var i = 0; i < sheets.length; i++ ){
sheetsName .push(sheets[i].getName() )
};
return sheetsName;
}
All of the above together will generate Page.html where a list, of all the sheets in your spreadsheet, will be created. This was really useful for me, hope everyone can use this. I will continue to work out how to do the dependent dropwdown :)