Google Apps Script Web Apps_ Comprehensive Guide
Google Apps Script Web Apps_ Comprehensive Guide
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
1
Deploying the Web App 3
Working with HTML, CSS, and JavaScript 3
Example: HTML File in Web App 3
Server-Client Communication 4
Example: Call a Server-Side Function 4
Advanced Examples 4
Example 1: Form Submission Web App 4
Example 2: Display Data from Google Sheets 5
Exercises 6
Exercise 1: Create a Welcome Web App 6
Solution: 6
Exercise 2: Create a Feedback Form 7
Solution: 7
Exercise 3: Display the Current Date 7
Multiple-Choice Questions 8
Question 1: 8
Question 2: 8
Question 3: 8
Best Practices 9
Google Apps Script allows you to create web apps to interact with users via a browser interface.
This guide covers creating, deploying, and managing web apps using Google Apps Script, with
examples, exercises, and multiple-choice questions.
A web app built with Google Apps Script is a web-based application that runs in the Google
Cloud and can interact with Google Workspace applications, databases, and external APIs. It
provides a user-friendly interface via HTML, CSS, and JavaScript.
● Custom Interfaces: Use HTML, CSS, and JavaScript to design interactive UIs.
● Google Integration: Access Google services like Sheets, Docs, and Drive.
● Scalability: Deployed on Google's cloud infrastructure.
● Secure Access: Control who can access the app via permissions.
2
3. Write a doGet or doPost function to handle requests.
4. Deploy the app.
Explanation:
function doGet() {
return HtmlService.createHtmlOutputFromFile("Index");
}
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Web App</title>
</head>
<body>
<h1>Welcome to My Web App</h1>
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
3
<button onclick="google.script.run.showAlert()">Click Me</button>
</body>
</html>
Explanation:
Server-Client Communication
function showAlert() {
return "You clicked the button!";
}
Index.html:
<script>
function showAlert() {
google.script.run
.withSuccessHandler((message) => {
alert(message);
})
.showAlert();
}
</script>
Explanation:
Advanced Examples
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
4
Code.gs:
function doGet() {
return HtmlService.createHtmlOutputFromFile("Form");
}
function saveData(name, email) {
const sheet =
SpreadsheetApp.openById("SPREADSHEET_ID").getSheetByName("Sheet1");
sheet.appendRow([name, email]);
}
Form.html:
<!DOCTYPE html>
<html>
<body>
<form onsubmit="submitForm(event)">
<input type="text" id="name" placeholder="Name" required>
<input type="email" id="email" placeholder="Email" required>
<button type="submit">Submit</button>
</form>
<script>
function submitForm(event) {
event.preventDefault();
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
google.script.run.saveData(name, email);
alert("Data submitted!");
}
</script>
</body>
</html>
function doGet() {
return HtmlService.createHtmlOutputFromFile("Display");
}
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
5
function getData() {
const sheet =
SpreadsheetApp.openById("SPREADSHEET_ID").getSheetByName("Sheet1");
return sheet.getDataRange().getValues();
}
Display.html:
<!DOCTYPE html>
<html>
<body>
<h1>Data from Google Sheets</h1>
<table id="data-table" border="1"></table>
<script>
google.script.run.withSuccessHandler((data) => {
const table = document.getElementById("data-table");
data.forEach((row) => {
const tr = document.createElement("tr");
row.forEach((cell) => {
const td = document.createElement("td");
td.textContent = cell;
tr.appendChild(td);
});
table.appendChild(tr);
});
}).getData();
</script>
</body>
</html>
Exercises
Write a web app that displays "Welcome to Apps Script!" with a button that shows an alert.
Solution:
Code.gs:
function doGet() {
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
6
return HtmlService.createHtmlOutputFromFile("Welcome");
}
function sayHello() {
return "Welcome to Apps Script!";
}
Welcome.html:
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to Apps Script!</h1>
<button
onclick="google.script.run.withSuccessHandler(alert).sayHello()">Click
Me</button>
</body>
</html>
Write a web app that collects feedback (name and comments) and saves it to Google Sheets.
Solution:
Write a web app that displays the current date and time.
Solution:
Code.gs:
function doGet() {
return HtmlService.createHtmlOutputFromFile("DateTime");
}
function getCurrentDateTime() {
return new Date().toLocaleString();
}
DateTime.html:
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
7
<!DOCTYPE html>
<html>
<body>
<h1 id="datetime"></h1>
<script>
google.script.run.withSuccessHandler((dateTime) => {
document.getElementById("datetime").textContent = dateTime;
}).getCurrentDateTime();
</script>
</body>
</html>
Multiple-Choice Questions
Question 1:
1. doPost()
2. doGet()
3. handleRequest()
4. doRequest()
Answer: 2. doGet()
Question 2:
Question 3:
1. HtmlService.createResponse()
2. HtmlService.createHtmlOutput()
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
8
3. HtmlService.getHtml()
4. HtmlService.createOutput()
Answer: 2. HtmlService.createHtmlOutput()
Best Practices
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis