Google sheet App Script Web app| Multi-HTML FORM-Quản lý,Submit data cho nhiều Form trên 1 giao diện
Giáo án link (giaoan.link) chia sẻ đến các bạn một project Google sheet App Script Web app| Multi-HTML FORM-Quản lý,Submit data cho nhiều Form trên 1 giao diện. Với project này bạn dễ dàng quản lý nhiều form trên cùng 1 giao diện web app. Việc bạn thêm trường data cho form cũng như thêm form mới vào cũng rất dễ dàng. Bạn có thể xem thêm video và code apps script bên dưới để thực hành theo.
Một số project excel ứng dụng khác, bạn có thể xem thêm!
- Google sheet, apps script, webapp “Bé Vui Phép Nhân” – Công Cụ Luyện Toán Trực Quan Cho Học Sinh Tiểu Học
- Google sheet webapp Bé Vui Học Toán – Ứng dụng Luyện Phép Chia Trực Quan Cho Học Sinh Lớp 3
- Googlesheet appscript – Hệ Thống Đăng Ký Hồ Sơ Trực Tuyến (Online Registration Portal)
- [Share Code] Biến Google Sheet thành Web App Tra Cứu Dự Án & Tài Liệu (Miễn Phí Hosting)
- Hệ Thống Quản Lý Phòng Game “Cloud-Native” với Google Apps Script
- Hệ Thống Điều Phối & Quản Lý Đội Xe Thông Minh (Web App)
- Biến Google Sheets thành Dashboard “Viễn Tưởng” phong cách Cyberpunk
- Google appscript | Hệ thống tìm thông tin và nhập liệu 2 Form-Tự động truy vấn và upload nhiều files
- Google sheet Webapp|Giáo viên chủ nhiệm quản lý điểm, thống kê xếp hạng chia sẻ cho phụ huynh
- Google sheet Webapp | Bản nâng cấp Tìm và Load Thông tin sinh viên có Hình ảnh và Bảng kết quả thi
Code file “Code.gs”
Code file “Code.gs”
Code file “Code.gs”
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function getHeaders(sheetName) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
var headers = sheet.getRange (1, 1, 1, sheet.getLastColumn()).getValues()[0];
return headers;
}
function submitFormData(data, sheetName){
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
var rowData = [];
var headers = getHeaders(sheetName);
headers.forEach(function(header){
rowData.push(data[header]);
});
sheet.appendRow(rowData);
}Code file “index.html”
<!DOCTYPE html>
<html lang="en">
<head>
/*Http://giaoan.link
*http://Youtube.com/Netmediacctv
*/
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.astoe-body{
background-size: cover;
display: flex;
Justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f8f8f8;
}
.astoe-form {
max-width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.astoe-form header {
font-size: 1.8rem;
font-weight: 500;
text-align: center;
margin-bottom: 1rem;
}
.astoe-form input,
.astoe-form select {
height: 40px;
width: 100%;
padding: 0 15px;
font-size: 16px;
margin-bottom: 1rem;
border: none;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
outline: none;
}
.astoe-form input:focus,
.astoe-form select:focus {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.astoe-form label {
display: block;
margin-bottom: 0.5rem;
}
.astoe-form select {
height: 45px;
}
.astoe-button {
width: 100%;
padding: 10px;
font-size: 18px;
}
.astoe-custom-select {
position: relative;
}
.astoe-custom-select select {
width: 100%;
appearance: none;
padding: 10px;
border: none;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
outline: none;
cursor: pointer;
}
</style>
</head>
<body class="astoe-body">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="astoe-form">
<label for="sheetName">CHỌN LOẠI FORM:</label>
<select id="sheetName" name="sheetName">
<option value="Registration">Đăng ký thông tin</option>
<option value="Fee">Cập nhật phí</option>
</select>
<form id="dataForm">
<!-- Place your form fields here -->
</form>
<button class="btn btn-primary astoe-button" onclick="fetchData()">Tải Form</button><br><br>
<button class="btn btn-success astoe-button" onclick="submitData()">Lưu dữ liệu</button>
</div>
</div>
</div>
</div>
<!-- Fetch Data success modal-->
<div class="modal" id="fetchSuccessModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title">Thông báo</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Form đã được tải thành công!
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Submit Data Success Modal-->
<div class="modal" id="submitSuccessModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title">Thông báo</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Dữ liệu đã được ghi thành công!
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
// Use this function to fetch data based on selected sheet
function fetchData() {
var selectedSheet = document.getElementById('sheetName').value; // Get the selected sheet name
google.script.run.withSuccessHandler(function(headers) {
populateForm(headers);
$('#fetchSuccessModal').modal('show'); // Show fetch success modal
}).getHeaders(selectedSheet);
}
// Use this function to populate the form fields
function populateForm(headers){
var form = document.getElementById('dataForm');
form.innerHTML = ''; // Clear previous form content
headers.forEach(function(header) {
form.innerHTML += `
<div class="form-group">
<label>${header}:</label>
<input class="form-control" type="text" name="${header}">
</div>`;
});
}
// Use this function to submit data
function clearFormFields() {
var form = document.getElementById('dataForm');
form.reset(); // Reset the form to its default state
}
//Use this function to submit data
function submitData() {
var form = document.getElementById('dataForm');
var formData = new FormData(form);
var data = {};
formData.forEach(function(value, key) {
data[key] = value;
});
var selectedSheet = document.getElementById('sheetName').value; // Get the selected sheet name
google.script.run.withSuccessHandler(function() {
clearFormFields(); // Clear form fields after submission
$("#submitSuccessModal").modal('show'); // Show submit success modal
}).submitFormData(data, selectedSheet);
}
//Initial fetch for default sheet
fetchData();
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</body>
</html>
