Tạo Form trên Google sheet thêm chức năng load dữ liệu hiển thị lên web (giống listbox trong VBA)
Trong bài viết này, Tạo Form trên Google sheet thêm chức năng load dữ liệu hiển thị lên web (giống listbox trong VBA). Như vậy đây là một Web app, kết hợp Google sheet, html, javascript, css chạy trên nền web để tạo Form thu thập dữ liệu. Một chức năng mới trong bài này là: dữ liệu được thu thập từ Form được lưu lại trên google sheet (Google drive) và được load hiển thị ngay trên giao diện của web app (giống như Listbox trong VBA của MS Excel).
Dưới đây là code được sử dụng trong Apps Script này. Bạn xem video hướng dẫn cụ thể dưới bài viết.
Trang Code.gs
/*Code App Web Google sheet form - cập nhật bảng dữ liệu lên web*/
/*CODE.GS----------------------*/
function doGet(request) {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
/* DEFINE GLOBAL VARIABLES, CHANGE THESE VARIABLES TO MATCH WITH YOUR SHEET */
function globalVariables(){
var varArray = {
spreadsheetId : '1mchumEtFTUms_zAyy7L6YU2llUH2k6gP7XCRMxGAt2w', //** CHANGE !!!
dataRage : 'Data!A2:E', //** CHANGE !!!
lastCol : 'E', //** CHANGE !!!
insertRange : 'Data!A1:E1', //** CHANGE !!!
sheetID : '0' //** CHANGE !!!
};
return varArray;
}
/* PROCESS FORM */
function processForm(formObject){
appendData(getFormValues(formObject),globalVariables().spreadsheetId,globalVariables().insertRange); //Append Form Data
return getLastTenRows();//Return last 10 rows
}
/* GET FORM VALUES AS AN ARRAY */
function getFormValues(formObject){
/* ADD OR REMOVE VARIABLES ACCORDING TO YOUR FORM*/
var values = [[
formObject.full_name,
formObject.gender,
formObject.dateOfBirth,
formObject.email,
formObject.phone]];
return values;
}
/*
## CURD FUNCTIONS ----------------------------------------------------------------------------------------
*/
/* CREATE/ APPEND DATA */
function appendData(values, spreadsheetId,range){
var valueRange = Sheets.newRowData();
valueRange.values = values;
var appendRequest = Sheets.newAppendCellsRequest();
appendRequest.sheetID = spreadsheetId;
appendRequest.rows = valueRange;
var results = Sheets.Spreadsheets.Values.append(valueRange, spreadsheetId, range,{valueInputOption: "RAW"});
}
/* READ DATA */
function readData(spreadsheetId,range){
var result = Sheets.Spreadsheets.Values.get(spreadsheetId, range);
return result.values;
}
/*
## HELPER FUNCTIONS FOR CRUD OPERATIONS --------------------------------------------------------------
*/
/*GET LAST 10 RECORDS */
function getLastTenRows(){
var lastRow = readData(globalVariables().spreadsheetId,globalVariables().dataRage).length+1;
if(lastRow<=11){
var range = globalVariables().dataRage;
}else{
var range = 'Data!A'+(lastRow-9)+':'+globalVariables().lastCol;
}
var lastTenRows = readData(globalVariables().spreadsheetId,range);
return lastTenRows;
}
/* GET ALL RECORDS */
function getAllData(){
var data = readData(globalVariables().spreadsheetId,globalVariables().dataRage);
return data;
}
/*
## OTHER HELPERS FUNCTIONS ------------------------------------------------------------------------
*/
/* INCLUDE HTML PARTS, EG. JAVASCRIPT, CSS, OTHER HTML FILES */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}Trang Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<?!= include('JavaScript'); ?> <!-- See JavaScript.html file -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<?!= include('Form'); ?> <!-- See Form.html file -->
<br><br>
<div id="output"></div>
</div>
<div class="col-6; p-2 border border-light" >
<?!= include('DataTable'); ?> <!-- See DataTable.html File -->
</div>
</div>
</div>
</body>
</html>Trang Form.html
<form id="myForm" class="p-2 border border-light rounded bg-light" onsubmit="handleFormSubmit(this)"> <!-- Call JavaScript function "handleFormSubmit" -->
<p class="h4 mb-4 text-center" style="color:red">NHẬP THÔNG TIN</p>
<div class="form-group">
<label for="name" >Họ và tên</label>
<input type="text" class="form-control" id="full_name" name="full_name" placeholder="Điền họ và tên" required>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<p>Giới tính</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="male" value="Nam">
<label class="form-check-label" for="male">Nam</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="female" value="Nữ">
<label class="form-check-label" for="female">Nữ</label>
</div>
</div>
<div class="form-group col-md-6">
<label for="dateOfBirth">Ngày sinh</label>
<input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">
</div>
</div>
<div class="form-group">
<label for="email">Địa chỉ mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="phone">Số điện thoại</label>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Điền số điện thoại">
</div>
</div>
<button type="submit" class="btn btn-primary">Gửi đi</button>
<input class="btn btn-secondary" type="reset" value="Xóa các trường">
</form>Trang DataTable.html
<p class="h4 mb-4 text-center" style="color:red">DANH SÁCH THÔNG TIN</p>
<div id="dataTable" class="table-responsive">
<!-- The Data Table is inserted here by JavaScript -->
</div>
<br>
<button type="button" class="btn btn-success btn-sm" onclick="getAllData()">Hiển thị tất cả dữ liệu</button>Trang JavaScript.html
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener("load", functionInit, true);
//INITIALIZE FUNCTIONS ONLOAD
function functionInit(){
preventFormSubmit();
getLastTenRows();
};
//HANDLE FORM SUBMISSION
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(createTable).processForm(formObject);
document.getElementById("myForm").reset();
}
//GET LAST 10 ROWS
function getLastTenRows (){
google.script.run.withSuccessHandler(createTable).getLastTenRows();
}
//GET ALL DATA
function getAllData(){
//document.getElementById('dataTable').innerHTML = "";
google.script.run.withSuccessHandler(createTable).getAllData();
}
//CREATE THE DATA TABLE
function createTable(dataArray) {
if(dataArray){
var result = "<table class='table table-sm' style='font-size:0.8em'>"+
"<thead style='white-space: nowrap'>"+
"<tr>"+ //Change table headings to match witht he Google Sheet
"<th scope='col'>Họ và Tên</th>"+
"<th scope='col'>Giới Tính</th>"+
"<th scope='col'>Năm sinh</th>"+
"<th scope='col'>Email</th>"+
"<th scope='col'>Điện thoại</th>"+
"</tr>"+
"</thead>";
for(var i=0; i<dataArray.length; i++) {
result += "<tr>";
for(var j=0; j<dataArray[i].length; j++){
result += "<td>"+dataArray[i][j]+"</td>";
}
result += "</tr>";
}
result += "</table>";
var div = document.getElementById('dataTable');
div.innerHTML = result;
document.getElementById("message").innerHTML = "";
}else{
var div = document.getElementById('dataTable');
div.innerHTML = "Data not found!";
}
}
</script>