Working on an HTML integration with GAS, the following code is not doing anything but generating a white, seemingly empty form upon clicking "Add":
//GLOBALS
let ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var lastRow = ss.getLastRow();
var lastCol = ss.getLastColumn();
var ui = SpreadsheetApp.getUi();
var arrEndRow;
var icaoFindMatch = 0;
//Upon opening spreadsheet, menu items are added and a test is made to determine
//if there are any entries and if not, it will load an entry form
function onOpen(e) {
//creates custom menu
ui.createMenu('Catering Menu')
.addItem('Search Locations', 'menuItem1')
.addItem('Add Catering Info', 'menuItem2')
.addToUi();
//test if there is at least one entry
if (lastRow == 1){
loadForm(); //run entry form
} else {
SpreadsheetApp.getActiveSpreadsheet().toast("Use the 'Catering Menu' dropdown on the toolbar to search, add or modify existing catering info.","User Notice",-1);
}
}
function testMe(){
ui.alert("in TestMe");
}
//takes info entered on the uForm.html and enters it under the appropriate ICAO location
function addNewRow(rowData){
ui.alert("in addNewRow");
/*
var icaoResult = ui.prompt("Please input your ICAO");
var resultText = icaoResult.getResponseText();
*/
let icaoRangeInit = ss.getRange(2,1,lastRow-1,1).getValues();
let icaoArr = icaoRangeInit.filter((string) => string != "");
let icaoArrLast = icaoArr[icaoArr.length-1];<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Catering Entry Form</title>
</head>
<body>
<form>
<div class="form-floating mb-4">
<input type="text" class="form-control" id="floatingLocation" placeholder="ICAO Location">
<label for="floatingLocation">ICAO</label>
</div>
<div class="form-floating">
<input type="text" class="form-control" id="floatingName" placeholder="Name">
<label for="floatingName">Name</label>
</div>
<div class="form-floating">
<input type="number" class="form-control" id="floatingDistance" placeholder="Distance (mi)">
<label for="floatingDistance">Distance (mi)</label>
</div>
<div class="form-floating">
<input type="number" class="form-control" id="floatingDriveTime" placeholder="Drive Time (min)">
<label for="floatingDriveTime">Drive Time (min)</label>
</div>
<div class="form-floating">
<input type="text" class="form-control" id="floatingPhoneNum" placeholder="Phone #">
<label for="floatingPhoneNum">Phone Number</label>
</div>
<div class="form-floating">
<input type="text" class="form-control" id="floatingSite" placeholder="Website">
<label for="floatingSite">Website</label>
</div>
<div class="form-floating">
<input type="text" class="form-control" id="floatingDelivery" placeholder="Delivery?">
<label for="floatingDelivery">Delivery (Yes/No)</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Notes" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Notes</label>
</div>
<div>
<button class="btn btn-primary" id="AddtoWS">Add</button>
</div>
</form>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- script to take the values inputted in fields above and transfer to spreadsheet -->
<script>
function afterButtonClicked() {
google.script.run.testMe();
var icao = document.getElementById("floatingLocation");
var name = document.getElementById("floatingName");
var dist = document.getElementById("floatingDistance");
var driveTime = document.getElementById("floatingDriveTime");
var phoneNum = document.getElementById("floatingPhoneNum");
var site = document.getElementById("floatingSite");
var delivery = document.getElementById("floatingDelivery");
var notes = document.getElementById("floatingTextarea");
var rowData = {icao: icao.value, name: name.value, dist: dist.value, driveTime: driveTime.value, phoneNum: phoneNum.value, site: site.value, delivery: delivery.value, notes: notes.value};
//google.script.run.testMe();
}
document.getElementById("AddtoWS").addEventListener("click", afterButtonClicked); //tells the "Add" button what to do
</script>
</body>
</html>That's the entirety of the HTML which does everything from loading the sidebar and input fields, all the way to the button but it's not properly calling my Javascript in the Code.js
Also, I only pasted the top snippet of my Code.js because it's clear I'm not evening getting to where I can get the testMe() function called to check that the handshake between html and js is even working.
I've spent more hours trying to figure this out than I care to admit, any help would be greatly appreciated!
- Colin
