Blank Form Page coming when navigating from index.html to Booking.html
5 views
Skip to first unread message
Samrat Singhal
5:05 AM (3 hours ago) 5:05 AM
to Google Apps Script Community
Hi All,
I am trying to create a small UI which consist 3 pages.
- 1 Index page with 2 buttons
- Bookings
- Expenses
- First button should open a booking details form
- Second button should open Expense form
ISSUE:
While clicking on any button only blank page is coming, i checked everything and tries so many ways but still it is not working.
Code.gs
Code.gs
function doGet(e) {
Logger.log(Utilities.jsonStringify(e))
if (e.parameter.page === "bookings") {
return HtmlService.createHtmlOutputFromFile('BookingsForm');
} else if (e.parameter.page === "expenses") {
return HtmlService.createHtmlOutputFromFile('ExpensesForm');
} else {
return HtmlService.createHtmlOutputFromFile('Index');
}
}
function submitBooking(form) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Bookings');
sheet.appendRow([form.bookingDate, form.guestName, form.guestNumber, form.roomNumber, form.source, form.checkin, form.checkout, form.paymentDone, form.pendingPayment]);
return 'Booking successfully submitted!';
}
function submitExpense(form) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Expenses');
sheet.appendRow([form.expenseDate, form.expenseDetails, form.incurredBy, form.amount, form.description]);
return 'Expense successfully submitted!';
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f9;
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
box-sizing: border-box;
text-align: center;
}
a {
display: block;
background-color: #007bff;
color: white;
border: none;
padding: 15px 20px;
margin: 10px;
font-size: 16px;
text-decoration: none;
border-radius: 5px;
}
a:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Choose an Option</h1>
<a href="?page=bookings">Bookings</a>
<a href="?page=expenses">File Expense</a>
</div>
</body>
</html>
BookingsForm.html
ExpensesForm.html
Thanks
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f9;
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
box-sizing: border-box;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
input[type="button"] {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
padding: 15px;
font-size: 16px;
}
input[type="button"]:hover {
background-color: #218838;
}
#output {
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Booking Form</h1>
<form id="bookingForm">
<label for="bookingDate">Booking Date:</label>
<input type="date" id="bookingDate" name="bookingDate">
<label for="guestName">Guest Name:</label>
<input type="text" id="guestName" name="guestName">
<label for="guestNumber">Guest Number:</label>
<input type="text" id="guestNumber" name="guestNumber">
<label for="roomNumber">Room Number:</label>
<input type="text" id="roomNumber" name="roomNumber">
<label for="source">Source:</label>
<input type="text" id="source" name="source">
<label for="checkin">Checkin:</label>
<input type="date" id="checkin" name="checkin">
<label for="checkout">Checkout:</label>
<input type="date" id="checkout" name="checkout">
<label for="paymentDone">Payment Done:</label>
<input type="number" id="paymentDone" name="paymentDone">
<label for="pendingPayment">Pending Payment:</label>
<input type="number" id="pendingPayment" name="pendingPayment">
<input type="button" value="Submit" onclick="submitBookingForm()">
</form>
<div id="output"></div>
</div>
<script>
function submitBookingForm() {
const form = document.getElementById('bookingForm');
const formData = new FormData(form);
google.script.run.withSuccessHandler(function(response) {
document.getElementById('output').innerText = response;
form.reset(); // Reset the form after successful submission
}).submitBooking(Object.fromEntries(formData));
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f9;
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
box-sizing: border-box;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
input[type="button"] {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
padding: 15px;
font-size: 16px;
}
input[type="button"]:hover {
background-color: #218838;
}
#output {
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Expense Form</h1>
<form id="expenseForm">
<label for="expenseDate">Expense Date:</label>
<input type="date" id="expenseDate" name="expenseDate">
<label for="expenseDetails">Expense Details:</label>
<input type="text" id="expenseDetails" name="expenseDetails">
<label for="incurredBy">Incurred By:</label>
<input type="text" id="incurredBy" name="incurredBy">
<label for="amount">Amount:</label>
<input type="number" id="amount" name="amount">
<label for="description">Description (if any):</label>
<textarea id="description" name="description"></textarea>
<input type="button" value="Submit" onclick="submitExpenseForm()">
</form>
<div id="output"></div>
</div>
<script>
function submitExpenseForm() {
const form = document.getElementById('expenseForm');
const formData = new FormData(form);
google.script.run.withSuccessHandler(function(response) {
document.getElementById('output').innerText = response;
form.reset(); // Reset the form after successful submission
}).submitExpense(Object.fromEntries(formData));
}
</script>
</body>
</html>
Samrat Singhal
Rodrigo Fernando Gomes Lima (Rodrigo Lima)
7:15 AM (1 hour ago) 7:15 AM
to Google Apps Script Community
Olá, já tentou usar doGet desta forma?
var html = HtmlService.createTemplateFromFile(BookingsForm);
return html.evaluate();
Rodrigo Fernando Gomes Lima (Rodrigo Lima)
7:17 AM (1 hour ago) 7:17 AM
to Google Apps Script Community
Segue outro exemplo:
function doGet(e) {
console.log(e);
try {
var html = HtmlService.createTemplateFromFile('index');
let page = e.parameter.p || 'home';
var title = 'Home';
var titleDescription = 'Página Inicial';
switch (page) {
case "contatos":
page = 'contatos';
title = 'Contatos';
titleDescription = 'Cadastro e lista de contatos';
break;
case "empresas":
page = 'empresas';
title = 'Empresas';
titleDescription = 'Cadastro e lista de empresas';
break;
case "protocolos":
page = 'protocolos';
title = 'Protocolos';
titleDescription = 'Envios de Protocolos Registrados por e-mail';
break;
case "emails":
page = 'emails';
title = 'Emails';
titleDescription = 'Envio de Emails';
break;
case "oficios":
page = 'oficios';
title = 'Ofícios';
titleDescription = 'Envio de Ofícios';
break;
case "teste":
page = 'teste';
title = 'Teste';
titleDescription = 'Envio de Ofícios';
break;
default:
page = 'home';
title = 'Home';
titleDescription = 'Página Inicial';
break;
}
var content = HtmlService.createHtmlOutputFromFile(page).getContent();
var Dados = {
'page': page,
'title': title,
'titleDescription': titleDescription,
'content': content
}
console.log(Dados);
html.Dados = Dados
return html.evaluate().setTitle(title);
} catch (er) {
// TODO (Developer) - Handle exception
console.log('Failed with error: %s', er.error);
}
}
Reply all
Reply to author
Forward
0 new messages