Lập trình Sidebar để tương tác với dữ liệu Google Sheets 🚀

Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu cách lập trình một sidebar để tương tác với dữ liệu trên Google Sheets. Sidebar là một phần của giao diện người dùng giúp bạn thêm các tính năng nâng cao và tạo trải nghiệm người dùng tốt hơn. Chúng ta sẽ sử dụng Google Apps Script để thực hiện nhiệm vụ này. Let’s dive in! 🏊‍♂️

Bước 1: Tạo dự án Google Apps Script

Đầu tiên, bạn cần tạo một dự án Google Apps Script:

Mở Google Sheets.
Nhấp vào Extensions -> Apps Script.
Tạo một dự án mới và đặt tên cho dự án của bạn.

Bước 2: Tạo Sidebar HTML

Tạo một file HTML để thiết kế giao diện sidebar của bạn. Đi tới File -> New -> HTML và đặt tên file là Sidebar.html. Thêm nội dung sau vào file Sidebar.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Google Sheets Sidebar</h1>
    <form id="dataForm">
      <label for="dataInput">Enter Data:</label><br>
      <input type="text" id="dataInput" name="dataInput"><br><br>
      <input type="button" value="Submit" onclick="google.script.run.withSuccessHandler(onSuccess).submitData(document.getElementById('dataInput').value)">
    </form>
    <div id="result"></div>
    <script>
      function onSuccess(message) {
        document.getElementById('result').innerText = message;
      }
    </script>
  </body>
</html>

Lập trình Sidebar để tương tác với dữ liệu Google Sheets 🚀

Bước 3: Tạo Code Apps Script

Tạo một file Code.gs và thêm đoạn code sau để xử lý logic của sidebar:

function onOpen() {
  SpreadsheetApp.getUi().createMenu('Custom Menu')
      .addItem('Show Sidebar', 'showSidebar')
      .addToUi();
}

function showSidebar() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('Sidebar')
      .setTitle('Google Sheets Sidebar')
      .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
}

function submitData(data) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.appendRow([data]);
  return 'Data submitted successfully!';
}

Bước 4: Triển khai Sidebar

Để triển khai sidebar, bạn cần thêm một menu tùy chỉnh vào Google Sheets. Menu này sẽ xuất hiện khi bạn mở Google Sheets và cho phép bạn hiển thị sidebar. Thêm đoạn code sau vào file Code.gs:

function onOpen() {
  SpreadsheetApp.getUi().createMenu('Custom Menu')
      .addItem('Show Sidebar', 'showSidebar')
      .addToUi();
}

Bước 5: Chạy Sidebar

Khi bạn đã hoàn tất các bước trên, hãy lưu dự án của bạn và làm mới trang Google Sheets. Bạn sẽ thấy một menu mới có tên Custom Menu với tùy chọn Show Sidebar. Nhấp vào đó để hiển thị sidebar.

Kết luận

Vậy là chúng ta đã tạo xong một sidebar cơ bản để tương tác với dữ liệu Google Sheets. Với sidebar này, bạn có thể nhập dữ liệu và gửi nó đến Google Sheets. Bạn có thể mở rộng và tùy chỉnh thêm để phù hợp với nhu cầu của mình.

Hãy thử nghiệm và khám phá thêm các tính năng tuyệt vời mà Google Apps Script mang lại! 🌟

Dịch vụ lập trình ứng dụng

🎯 Lập trình API, Python, Node JS, Telegram Bot, Automate Workflow, Power Apps and Apps Script.

📒 Nhận dạy Lập trình Apps Script, Power Apps từ cơ bản đến nâng cao.

📞 +84 78 600 5534 (Zalo, WhatsApp, Telegram)

💻 Github

🌏 appscript.online