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:

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>