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:
- Web App Script Webapp | Hiệu ứng hoa rơi – Form nhập liệu Gửi nội dung đến email
- Web App Script | Thanh trạng thái Status bar – Giá trị thể hiện theo điểm và label.
- Google sheet Apps script | Data Entry Form – Tự động đọc số tiền thành chữ ở trường input
- Google sheet Apps script | Cập nhật điểm lớp học – Theo danh sách lớp và Theo từng học sinh
- Google sheet, apps script Định dạng dấu phân cách hàng ngàn cho input
- Google sheet apps script | Chọn năm và kiểu biểu đồ để Load dữ liệu lên website
- Google sheet apps script | Scan QR code – Filter and get data table display on webapp
- Google sheet apps script Filter to get data to display on webapp, fill background color for data row
- Google sheet Apps script Webapp | Project Quản lý đơn hàng – Cập nhật sản phẩm – In phiếu kiểm soát
- Google sheet Apps script Webapp | Tạo QR Code động – Tự động load mã QR mới khi nội dung mã hóa đổi
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>