Dịch vụ HTML: Tạo và phân phối HTML

Dịch vụ HTML cho phép bạn phân phát các trang web có thể tương tác với các hàm Apps Script phía máy chủ. Đây là một công cụ đặc biệt hữu ích để tạo các ứng dụng web hoặc thêm giao diện người dùng tuỳ chỉnh trong Google Tài liệu, Trang tính và Biểu mẫu. Bạn thậm chí có thể dùng tính năng này để tạo nội dung email.

Tạo tệp HTML

Để thêm một tệp HTML vào dự án Apps Script, hãy làm theo các bước sau:

  1. Mở trình chỉnh sửa Apps Script.
  2. Ở bên trái, hãy nhấp vào biểu tượng Thêm tệp > HTML.

Trong tệp HTML, bạn có thể viết hầu hết HTML, CSS và JavaScript phía máy khách tiêu chuẩn. Trang này sẽ được phân phát dưới dạng HTML5, mặc dù một số tính năng nâng cao của HTML5 không có sẵn, như đã giải thích trong phần Các hạn chế.

Tệp của bạn cũng có thể bao gồm các tập lệnh mẫu được xử lý trên máy chủ trước khi trang được gửi đến người dùng (tương tự như PHP), như được giải thích trong phần về HTML dựa trên mẫu.

Phân phát HTML dưới dạng ứng dụng web

Để tạo một ứng dụng web bằng dịch vụ HTML, mã của bạn phải bao gồm một hàm doGet() cho biết cách tập lệnh phân phát trang. Hàm này phải trả về một đối tượng HtmlOutput, như minh hoạ trong ví dụ này.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

Sau khi thiết lập xong khung cơ bản đó, tất cả những gì bạn phải làm là lưu một phiên bản của tập lệnh, sau đó triển khai tập lệnh dưới dạng một ứng dụng web.

Sau khi triển khai tập lệnh dưới dạng một ứng dụng web, bạn cũng có thể nhúng tập lệnh đó vào một trang web trên Google Sites.

Phân phát HTML dưới dạng giao diện người dùng Google Tài liệu, Trang tính, Trang trình bày hoặc Biểu mẫu

Dịch vụ HTML có thể hiển thị một hộp thoại hoặc thanh bên trong Google Tài liệu, Trang tính, Trang trình bày hoặc Biểu mẫu nếu tập lệnh của bạn được liên kết với vùng chứa của tệp. (Trong Google Biểu mẫu, chỉ những người chỉnh sửa mở biểu mẫu để sửa đổi mới nhìn thấy giao diện người dùng tuỳ chỉnh, chứ không phải người dùng mở biểu mẫu để trả lời.)

Không giống như ứng dụng web, tập lệnh tạo giao diện người dùng cho tài liệu, bảng tính hoặc biểu mẫu không cần có hàm doGet() cụ thể và bạn không cần lưu phiên bản tập lệnh hoặc triển khai tập lệnh. Thay vào đó, hàm mở giao diện người dùng phải truyền tệp HTML của bạn dưới dạng đối tượng HtmlOutput đến các phương thức showModalDialog()) hoặc showSidebar() của đối tượng Ui cho tài liệu, biểu mẫu hoặc bảng tính đang hoạt động.

Các ví dụ này bao gồm một số tính năng bổ sung để thuận tiện: hàm onOpen() tạo trình đơn tuỳ chỉnh giúp bạn dễ dàng mở giao diện và nút trong tệp HTML sẽ gọi một phương thức close() đặc biệt của API google.script.host để đóng giao diện.

Code.gs

// Use this code for Google Docs, Slides, Forms, or Sheets.
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

Xin lưu ý rằng lần đầu tiên muốn hiển thị giao diện người dùng này, bạn phải chạy hàm onOpen() theo cách thủ công trong trình chỉnh sửa tập lệnh hoặc tải lại cửa sổ cho trình chỉnh sửa Tài liệu, Trang tính hoặc Biểu mẫu (thao tác này sẽ đóng trình chỉnh sửa tập lệnh). Sau đó, trình đơn tuỳ chỉnh sẽ xuất hiện trong vòng vài giây mỗi khi bạn mở tệp. Chọn Dialog > Open (Hộp thoại > Mở) để xem giao diện.