Google sheet apps script Filter to get data to display on webapp, fill background color for data row
Giaoan.link chia sẻ đến các bạn một project về Google sheet apps script Filter to get data to display on webapp, fill background color for data row. Vài tính năng project này như sau:
- Dữ liệu được lưu trên google sheet
- Xây dựng webapp có trường điền từ khóa tìm kiếm
- Dữ liệu được tìm theo mã mình qui định
- Lọc dữ liệu hiển thị bảng dữ liệu lên web
- Tô màu dòng dữ liệu thỏa điều kiện đặt ra.
Bạn có thể tìm những project khác tại đây
Các project ngẫu nhiên:
- Giới thiệu Ứng dụng Khảo sát và Vẽ đồ thị Hàm số Tự động
- Google sheet Webapp Hệ thống Gửi và Phê duyệt Hỗ trợ file Pdf Xem và đính chữ ký
- Form Builder | Trình tạo form nhập liệu nhanh chóng – Bản V1
- Appscript Webapp | Kéo thả các Items theo 2 chiều Dọc – Ngang, Ứng dụng sắp xếp chu trình công việc
- GOOGLE SHEET WEBAPP TRA CỨU 34 TỈNH THÀNH VIỆT NAM MỚI NHẤT (SÁP NHẬP 2025)
- Quản Lý Tài Chính Cá Nhân Hiệu Quả Với Web App Google Apps Script
- 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)
Mã Apps script trang “Code.gs”
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getDataByProductCode(productCode) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('data');
if (!sheet) {
return [];
}
var data = sheet.getDataRange().getValues();
var result = [];
for (var i = 1; i < data.length; i++) {
if (data[i][0] == productCode) {
// Chuyển đổi ngày tháng thành chuỗi văn bản
var date = new Date(data[i][1]);
var formattedDate = Utilities.formatDate(date, Session.getScriptTimeZone(), 'dd/MM/yyyy');
result.push([data[i][0], formattedDate, data[i][2]]);
}
}
return result;
}Mã Apps script trang “Index.html”
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function searchProduct() {
var productCode = document.getElementById('productCode').value;
google.script.run.withSuccessHandler(displayResults).getDataByProductCode(productCode);
}
function displayResults(data) {
if (!data || data.length === 0) {
document.getElementById('results').innerHTML = 'Không tìm thấy sản phẩm.';
return;
}
var output = '<table ><tr><th style="width:100px">Mã sản phẩm</th><th style="width:100px">Ngày sản xuất</th><th style="width:100px">Trạng thái</th></tr>';
for (var i = 0; i < data.length; i++) {
var row = data[i];
var rowClass = row[2].toLowerCase() === 'ok' ? 'ok-status' : '';
output += '<tr class="' + rowClass + '"><td style="width:100px">' + row[0] + '</td><td style="width:250px">' + row[1] + '</td><td style="width:250px">' + row[2] + '</td></tr>';
}
output += '</table>';
document.getElementById('results').innerHTML = output;
}
</script>
<style>
.ok-status {
background-color: yellow;
}
.container{
border: 1px solid grey;
border-radius: 10px;
width: 600px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 10px;
box-shadow: 3px 3px 5px grey;
}
table,th,tr,td{
width: 100%;
border: 1px solid;
border-collapse: collapse;
}
.title{
font-size: 2em;
font-weight: bold;
color: blue;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">Tìm kiếm sản phẩm</div>
<input type="text" id="productCode" placeholder="Nhập mã sản phẩm">
<button onclick="searchProduct()">Tìm kiếm</button>
<br><br>
<div id="results"></div>
</div>
</body>
</html>