In this video, I demonstrate how to log in to a Google Web App using a Google Account but also control who has editor access through the Google Sheets Share.
How to Video:
Video Notes:
- Bootstrap Documentation
- Bootstrap Library CSS Link. Click Here
Code in Video:
function doGet(e) {
const userEmail = Session.getActiveUser().getEmail();
var htmlOutput = HtmlService.createTemplateFromFile('Index');
htmlOutput.email = userEmail;
return htmlOutput.evaluate();
}
function AddRecord(firstname, lastname, street, city, state, zip) {
const userEmail = Session.getActiveUser().getEmail();
var ss= SpreadsheetApp.getActiveSpreadsheet();
var dataSheet = ss.getSheetByName("DATA");
dataSheet.appendRow([firstname, lastname, street, city, state, zip, userEmail, new Date()]);
return 'Record Added';
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />
<base target="_top">
<script>
function onFailure(error) {
document.getElementById('display').innerHTML = "ERROR: " + error.message;
}
function onSuccess(message) {
document.getElementById("firstname").value = '';
document.getElementById("lastname").value = '';
document.getElementById("street").value = '';
document.getElementById("city").value = '';
document.getElementById("state").value = '';
document.getElementById("zip").value = '';
document.getElementById('display').innerHTML = message;
}
function AddRow()
{
document.getElementById('display').innerHTML = "";
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var street = document.getElementById("street").value;
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
var zip = document.getElementById("zip").value;
google.script.run.withSuccessHandler(onSuccess).
withFailureHandler(onFailure).
AddRecord(firstname, lastname, street, city, state, zip);
}
</script>
</head>
<body>
<div style="padding: 10px;" >
<h1>Web App Login</h1>
<span>Logged In: <?= email ?></span>
<hr>
<form>
<div class="form-row">
<div class="form-group col-md-3">
<label for="firstname">First Name</label>
<input type="text" id="firstname" class="form-control" />
</div>
<div class="form-group col-md-3">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="street">Street</label>
<input type="text" id="street" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="city">City</label>
<input type="text" id="city" class="form-control" />
</div>
<div class="form-group col-md-2">
<label for="state">State</label>
<input type="text" id="state" class="form-control" />
</div>
<div class="form-group col-md-1">
<label for="zip" >Zip</label>
<input type="text" id="zip" class="form-control" />
</div>
</div>
<div class="form-group col-md-12">
<input type="button" value="Add Record" class="btn btn-primary" onclick="AddRow()" />
<span id="display" ></span>
</div>
</form>
</div>
</body>
</html>
Related Posts
![Web App Report Google Sheets](https://codewithcurt.com/wp-content/uploads/2022/04/Web-App-Report-GS-WS-150x150.png)
![Embed Map with Marker Google Web App](https://codewithcurt.com/wp-content/uploads/2022/04/Embed-Map-with-Marker-GS-WS-150x150.png)
![Create Custom HTML Form Google Sheets](https://codewithcurt.com/wp-content/uploads/2022/02/Create-Custom-Web-App-GS-WS-150x150.png)
![Bootstrap Sidebar Form Google Sheets](https://codewithcurt.com/wp-content/uploads/2022/01/Bootstrap-Sidebar-Form-GS-WS-150x150.png)
![Link Web App Pages](https://codewithcurt.com/wp-content/uploads/2022/01/Link-Web-App-Pages-WS-150x150.png)
![Create Charts in Google Web App](https://codewithcurt.com/wp-content/uploads/2021/12/Create-Charts-in-Web-App-WS-150x150.png)
![Create Date Picker on Web App](https://codewithcurt.com/wp-content/uploads/2021/12/Create-Date-Picker-on-Web-App-WS-150x150.png)
![Call Apps Script Function From Web App](https://codewithcurt.com/wp-content/uploads/2021/12/Call-Apps-Script-Function-From-Web-App-WS-150x150.png)
![Create Web App Form on Google Sheets](https://codewithcurt.com/wp-content/uploads/2021/12/Create-Web-App-Form-on-GS-WS-150x150.png)
![Display Pictures Web App](https://codewithcurt.com/wp-content/uploads/2021/12/Display-Pictures-Web-App-WS-150x150.png)
![Autocomplete Field Google Web App](https://codewithcurt.com/wp-content/uploads/2021/11/Autocomplete-Web-App-WS-150x150.png)
![JQuery Tablesorter Web App](https://codewithcurt.com/wp-content/uploads/2021/11/JQuery-Tablesorter-Web-App-WS-150x150.png)
![JSON Web App](https://codewithcurt.com/wp-content/uploads/2021/11/JSON-Web-App-WS-150x150.png)
![](https://codewithcurt.com/wp-content/uploads/2021/11/Deploy-Google-Web-App-WS-1-150x150.png)
![Multi Select Web App Google Sheets](https://codewithcurt.com/wp-content/uploads/2021/11/Multi-Select-Web-App-GS-WS-150x150.png)
![File Loader Google Web App](https://codewithcurt.com/wp-content/uploads/2021/02/File-Loader-Web-App-WS-150x150.png)
![Sort Google Sheet Web App](https://codewithcurt.com/wp-content/uploads/2021/02/Sort-Google-Sheet-Web-App-WS-150x150.png)
![Using Bootstrap Modal](https://codewithcurt.com/wp-content/uploads/2021/01/Bootstrap-Modal-WS-150x150.png)
![CRUD Google Web App](https://codewithcurt.com/wp-content/uploads/2021/01/CRUD-Web-App-WS-150x150.png)
![Filter Google Sheet in Web App](https://codewithcurt.com/wp-content/uploads/2021/01/Filter-Google-Sheet-in-Web-App-WS-150x150.png)