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ủ. Điều này đặc biệt hữu ích để tạo ứ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ên này để tạo nội dung cho 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 HTML, CSS và phía máy khách chuẩn nhất JavaScript. Trang 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ư được giải thích trong Quy định 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 trên HTML mẫu.

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

Để tạo ứng dụng web bằng dịch vụ HTML, mã của bạn phải bao gồm doGet() cho tập lệnh biết cách phân phát trang. Hàm 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 đó, bạn chỉ cần lưu phiên bản tập lệnh của bạn, sau đó triển khai tập lệnh dưới dạng ứng dụng web.

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

Phân phát HTML dưới dạng giao diện người dùng của 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ị 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 là giới hạn vùng chứa đối với tệp. (Trong Google Biểu mẫu, giao diện người dùng tuỳ chỉnh chỉ hiển thị cho người chỉnh sửa mở biểu mẫu thì hãy sửa đổi biểu mẫu đó 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, một tập lệnh tạo giao diện người dùng cho một tài liệu, bảng tính hoặc biểu mẫu không cần hàm doGet() cụ thể và bạn cần không cần lưu phiên bản tập lệnh của bạn hoặc triển khai phiên bản đó. Thay vào đó, hàm này mở ra giao diện người dùng phải chuyển tệp HTML dưới dạng đối tượng HtmlOutput cho đối tượng Phương thức showModalDialog()) hoặc showSidebar() của phương thức đối tượng Ui cho tài liệu, biểu mẫu hoặc bảng tính.

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

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 khi muốn hiển thị giao diện người dùng này lần đầu tiên, 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 (trình chỉnh sửa 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 sau vài giây mỗi khi bạn mở tệp. Chọn Dialog > Mở để xem .