HtmlService.createHtmlOutput là gì trong Apps Script

Hướng dẫn lập trình viên sử dụng HtmlService.createHtmlOutput là gì trong Apps Script

HtmlService.createHtmlOutput là gì ?
Cú pháp sử dụng HtmlService.createHtmlOutput
Ví dụ sử dụng HtmlService.createHtmlOutput
Một số lỗi khi dùng createHtmlOutput
Giải thích thêm về createHtmlOutput
Video ví dụ về createHtmlOutput

1. HtmlService.createHtmlOutput là gì ?

Để tạo ra 1 giao diện HTML để tương tác với người dùng ứng dụng Apps Script.

HtmlService.createHtmlOutput là một phương thức được sử dụng để tạo ra nội dung HTML có thể được hiển thị trong giao diện người dùng của ứng dụng Google (như Google Sheets, Google Docs, Google Slides, v.v.).

Nội dung HTML này có thể được hiển thị dưới dạng một sidebar, dialog box, hoặc đơn giản là một trang web nhúng vào ứng dụng.

2. Cú pháp sử dụng HtmlService.createHtmlOutput

HtmlService.createHtmlOutput('mã html');

Tham số hàm createHtmlOutput

Mã html: Đây là chuỗi HTML mà bạn muốn hiển thị. Có thể là một chuỗi HTML tùy chỉnh hoặc một file HTML được tạo từ một tệp HTML trong dự án Apps Script.

Chức năng của createHtmlOutput

Phương thức này giúp bạn tạo ra một giao diện tùy chỉnh với HTML để hiển thị trong ứng dụng Google.

Ví dụ, bạn có thể tạo các hộp thoại (dialog box) để hiển thị thông báo hoặc các sidebar chứa các biểu mẫu, nút bấm, và các thành phần giao diện người dùng khác.

3. Ví dụ sử dụng HtmlService.createHtmlOutput

Hiển thị HTML trong Sidebar

Bạn có thể sử dụng HtmlService.createHtmlOutput để hiển thị một thanh bên (sidebar) trong Google Sheets hoặc Google Docs.

function showSidebar() {
var html = HtmlService.createHtmlOutput('<h1>Welcome to my sidebar</h1><p>This is a custom sidebar.</p>')
      .setTitle('My Sidebar') // Tiêu đề của sidebar
      .setWidth(300); // Chiều rộng của sidebar
SpreadsheetApp.getUi().showSidebar(html); // Hiển thị sidebar trong Google Sheets
}

Trong ví dụ trên:

    HtmlService.createHtmlOutput() nhận một chuỗi HTML và tạo một đối tượng HTML có thể hiển thị trong Google Sheets.
    setTitle() đặt tiêu đề cho sidebar.
    setWidth() điều chỉnh chiều rộng của sidebar.

Hiển thị HTML trong Dialog Box

Bạn cũng có thể sử dụng phương thức này để hiển thị một hộp thoại (dialog box) thay vì sidebar.

function showDialog() {
var html = HtmlService.createHtmlOutput('<h1>Alert!</h1><p>This is a dialog box message.</p>')
      .setWidth(400) // Chiều rộng của hộp thoại
      .setHeight(200); // Chiều cao của hộp thoại
SpreadsheetApp.getUi().showModalDialog(html, 'Custom Dialog'); // Hiển thị dialog box trong Google Sheets
}

Trong ví dụ này:

    HtmlService.createHtmlOutput() tạo ra nội dung HTML.
    setWidth() và setHeight() điều chỉnh kích thước của hộp thoại.
    showModalDialog() được sử dụng để hiển thị hộp thoại trong Google Sheets.

Kết hợp với các tệp HTML trong dự án Apps Script

Ngoài việc tạo HTML trực tiếp từ chuỗi, bạn cũng có thể tải nội dung HTML từ một tệp HTML trong dự án Apps Script.

Ví dụ:

function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('sidebar'); // Tải tệp HTML có tên 'sidebar.html'
SpreadsheetApp.getUi().showSidebar(html); // Hiển thị sidebar
}

Trong ví dụ này:

HtmlService.createHtmlOutputFromFile('sidebar') tải nội dung HTML từ tệp có tên sidebar.html trong dự án Apps Script.
Sau đó, nó hiển thị thanh bên bằng showSidebar().

4. Một số lỗi khi dùng createHtmlOutput

Lỗi về quyền truy cập (Permission Error)
Lỗi khi sử dụng google.script.run trong HTML
Lỗi về kích thước của Sidebar/Dialog (Kích thước quá lớn hoặc nhỏ)
Lỗi với ký tự đặc biệt trong HTML (Escape Characters)
Lỗi JavaScript trong HTML (console.log không hiển thị hoặc lỗi trong hàm)

5. Giải thích thêm về createHtmlOutput

    HtmlService.createHtmlOutput() tạo ra nội dung HTML có thể hiển thị trong các ứng dụng Google.
    Nó có thể được sử dụng để hiển thị HTML trong các sidebar, dialog box, hoặc các thành phần khác của giao diện người dùng trong Google Apps.
    Bạn có thể tạo HTML từ chuỗi hoặc tải HTML từ một tệp trong dự án Apps Script.

6. Video về createHtmlOutput

Đang cập nhật