Thêm showSidebar với Apps Script

Sidebar trong Apps Script là gì ?
Ví dụ đơn giản nhất về Sidebar trong Apps Script
Ví dụ về cách sử dụng showSidebar và kết hợp HTML trong Apps Script
- Bước 1: Tạo HTML file
- Bước 2: Sử dụng showSidebar trong Apps Script
Giải thích thêm code Apps Script

1. Sidebar trong Apps Script là gì ?

Trong Google Apps Script, showSidebar là một phương thức được sử dụng để hiển thị một sidebar (thanh bên) trong giao diện người dùng của Google Apps (như Google Sheets, Google Docs, hoặc Google Slides).

Thanh bên này có thể chứa HTML, CSS, và JavaScript, cho phép bạn tạo giao diện tùy chỉnh và tương tác với người dùng.

Để sử dụng showSidebar, bạn cần sử dụng phương thức này trong một script đã được triển khai, và phương thức này sẽ gọi một HTML file (tạo ra từ HtmlService.createHtmlOutputFromFile() hoặc HtmlService.createHtmlOutput()).

2. Ví dụ đơn giản nhất về Sidebar trong Apps Script

Tạo 1 function có tên HienThiSidebar

 function HienThiSidebar(){ 

var ui = SpreadsheetApp.getUi();

 var html="<b>Xin chào</b>"; 

 ui.showSidebar( HtmlService.createHtmlOutput(html) );

}

Bên Spreadsheets tạo 1 nút lệnh và gán vào macro tên HienThiSidebar

Sau bạn click vào nút lệnh xem kết quả nhé.

Ví dụ thêm:

 var ui = SpreadsheetApp.getUi();

 var html="<b>Xin chào</b>"; 

 var hopthoai= HtmlService.createHtmlOutput(html)

    .setTitle("Tôi là iif")

    .setWidth(500);

 ui.showSidebar(hopthoai );

Ta có thể sửa lại tiêu đề và độ rộng hộp thoại Sidebar.

3. Ví dụ về cách sử dụng showSidebar và kết hợp HTML trong Apps Script

Tạo một HTML file: Trước tiên, bạn cần tạo một file HTML để hiển thị trên thanh bên.

Sử dụng phương thức showSidebar: Sau đó, bạn sẽ gọi showSidebar trong script để hiển thị thanh bên này.

Dưới đây là một ví dụ minh họa cách làm điều đó trong Google Sheets:

Bước 1: Tạo HTML file

Tạo một file HTML (ví dụ, sidebar.html) trong Apps Script:

 <!-- sidebar.html -->

<!DOCTYPE html>

<html>

  <head>

    <style>

      body {

        font-family: Arial, sans-serif;

        padding: 10px;

      }

      button {

        padding: 5px 10px;

        background-color: red;

        color: white;

        border: none;

        cursor: pointer;

      }

    </style>

  </head>

  <body>

    <h2>Ví dụ apps script với Sidebar</h2>

    <p>Click the button to log a message:</p>

    <button onclick="logMessage()">Click Me</button>



    <script>

      function logMessage() {

        google.script.run.logFromSidebar();

      }

    </script>

  </body>

</html>

Bước 2: Sử dụng showSidebar trong Apps Script

Trong file Apps Script của bạn, bạn sẽ sử dụng phương thức showSidebar để hiển thị sidebar:

// Đoạn mã này sẽ chạy khi người dùng chọn một menu tùy chỉnh trong Google Sheets



function onOpen() {

  var ui = SpreadsheetApp.getUi();

  ui.createMenu('Custom Menu')

    .addItem('Show Sidebar', 'showSidebar')

    .addToUi();

}



function showSidebar() {

  var html = HtmlService.createHtmlOutputFromFile('sidebar')

      .setTitle('My Custom Sidebar')

      .setWidth(300);

  SpreadsheetApp.getUi().showSidebar(html);

}



// Hàm này sẽ được gọi từ script trong sidebar để ghi log

function logFromSidebar() {

  Logger.log('Button in sidebar clicked');

}

4. Giải thích thêm code Apps Script

    onOpen(): Hàm này được chạy khi mở Google Sheets và tạo ra một menu tùy chỉnh. Khi người dùng chọn "Show Sidebar", nó sẽ gọi hàm showSidebar.
    showSidebar(): Hàm này sử dụng HtmlService.createHtmlOutputFromFile('sidebar') để tải file HTML chứa giao diện của sidebar và hiển thị nó trong Google Sheets với chiều rộng 300px.
    logFromSidebar(): Hàm này sẽ ghi một thông điệp vào log khi người dùng nhấn nút trong sidebar.

Khi người dùng mở Google Sheets, họ sẽ thấy một menu mới có tên là "Custom Menu" với tùy chọn "Show Sidebar". Khi nhấn vào tùy chọn đó, thanh bên sẽ xuất hiện và người dùng có thể nhấn nút trong sidebar để ghi một thông điệp vào log.
Lưu ý:

    Bạn có thể thay đổi giao diện trong file HTML để phù hợp với nhu cầu của bạn.
    Phương thức google.script.run được sử dụng để gọi các hàm trong Apps Script từ mã JavaScript trong file HTML.

Tìm kiếm:

Thêm showSidebar với Apps Script