Chào mừng bạn đến với bài blog của tôi với chủ đề “Tạo custom sidebar cho Sheets với React + Apps Script”. Bạn đang tìm kiếm cách tạo một sidebar tùy chỉnh cho Google Sheets sử dụng React và Apps Script? Bạn đã đến đúng nơi. Hãy cùng tôi khám phá điều này ngay bây giờ!
Hãy tưởng tượng, bạn muốn tạo một sidebar tương tác cho ứng dụng Google Sheets của mình, sử dụng công nghệ mà bạn yêu thích – React. Cùng với Apps Script, việc này trở nên dễ dàng hơn bao giờ hết.
Đầu tiên, hãy bắt đầu bằng cách tạo một dự án Apps Script mới. Mở Google Sheets của bạn, nhấp vào Extensions > Apps Script.
Đặt tên cho dự án của bạn và bắt đầu viết mã. Đầu tiên, bạn cần tạo một hàm để mở sidebar của mình. Hãy gọi nó là onOpen(). Đây là hàm mà Google Sheets sẽ gọi khi bạn mở tài liệu.
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Custom Menu')
.addItem('Show sidebar', 'showSidebar')
.addToUi();
}
Khi bạn nhấp vào ‘Custom Menu’ > ‘Show sidebar’, hàm showSidebar() sẽ được gọi. Hãy tạo hàm này:
function showSidebar() {
var htmlOutput = HtmlService.createHtmlOutputFromFile('index.html')
.setTitle('My custom sidebar')
.setWidth(300);
SpreadsheetApp.getUi().showSidebar(htmlOutput);
}
Tiếp theo, hãy tạo một tệp index.html trong dự án của bạn. Đây là nơi mà mã React của bạn sẽ được viết. Bạn có thể viết mã React trực tiếp vào đây hoặc liên kết đến một tệp .jsx khác.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="react"></div>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="your_react_code.js"></script>
</body>
</html>
Và đó là cách bạn tạo một sidebar tùy chỉnh cho Google Sheets sử dụng React và Apps Script! Hãy nhớ kiểm tra mã của mình và đảm bảo rằng nó hoạt động như mong muốn. Trên hết, hãy vui vẻ và hòa mình vào quá trình học hỏi, vì đó là điều quan trọng nhất. Chúc các bạn thành công!