Modal dialog trong Apps Script

Hướng dẫn chi tiết về Modal dialog trong Apps Script để thực hành tốt nhất cho học viên lập trình chuyên nghiệp.

modal dialog là gì
Cách sử dụng Modal Dialog trong Google Apps Script
Ví dụ hoàn chỉnh sử dụng Modal Dialog trong Google Sheets
- Bước 1: Tạo giao diện HTML cho Modal Dialog
- Bước 2: Tạo Google Apps Script để hiển thị Modal
Cách tùy chỉnh giao diện của Modal Dialog
Giải thích thêm về Modal Dialog trong Google Apps Script

1. modal dialog là gì

modal dialog là 1 hộp thoại thông báo được nhúng trong ứng dụng Apps Script để tương tác dữ liệu với người dùng ứng dụng.

Trong Google Apps Script, modal dialog là một cửa sổ hiển thị trong ứng dụng (Google Sheets, Google Docs, Google Slides, v.v.) để tương tác với người dùng, và nó sẽ chặn người dùng không thể tiếp tục làm việc với phần còn lại của giao diện cho đến khi đóng cửa sổ này.

2. Cách sử dụng Modal Dialog trong Google Apps Script

Để tạo và hiển thị một modal dialog, bạn sử dụng HtmlService.createHtmlOutput() để tạo nội dung HTML, sau đó sử dụng phương thức showModalDialog() của UI để hiển thị cửa sổ modal.
Cú pháp cơ bản:



function showModal() {

  var html = HtmlService.createHtmlOutput('<h1>Welcome!</h1><p>This is a modal dialog.</p>')

      .setWidth(400)  // Chiều rộng của modal

      .setHeight(200); // Chiều cao của modal

  SpreadsheetApp.getUi().showModalDialog(html, 'My Modal Dialog');

}

Giải thích:

    HtmlService.createHtmlOutput(): Tạo ra một đối tượng HTML từ chuỗi HTML bạn cung cấp.
    setWidth() và setHeight(): Đặt chiều rộng và chiều cao cho cửa sổ modal.
    showModalDialog(): Hiển thị cửa sổ modal trong Google Sheets (hoặc ứng dụng khác) với nội dung HTML đã tạo.

3. Ví dụ hoàn chỉnh sử dụng Modal Dialog trong Google Sheets

Bước 1: Tạo giao diện HTML cho Modal Dialog

Giả sử bạn muốn tạo một modal với một số nội dung HTML, có thể chứa các nút và một số tương tác.



<!-- file modalDialog.html -->

<!DOCTYPE html>

<html>

  <head>

    <style>

      body {

        font-family: Arial, sans-serif;

        text-align: center;

      }

      button {

        padding: 10px 20px;

        background-color: #4CAF50;

        color: white;

        border: none;

        cursor: pointer;

      }

    </style>

  </head>

  <body>

    <h2>Welcome to My Modal Dialog!</h2>

    <p>Click the button below to log a message.</p>

    <button onclick="logMessage()">Log Message</button>



    <script>

      function logMessage() {

        google.script.run.withSuccessHandler(function() {

          alert('Message logged!');

        }).logFromDialog();

      }

    </script>

  </body>

</html>

Bước 2: Tạo Google Apps Script để hiển thị Modal

Trong Google Apps Script của bạn, bạn cần tạo một hàm để hiển thị modal dialog này.

function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Custom Menu')
    .addItem('Show Modal Dialog', 'showModal')
    .addToUi();
}

function showModal() {
var html = HtmlService.createHtmlOutputFromFile('modalDialog')
      .setWidth(400)
      .setHeight(200);
SpreadsheetApp.getUi().showModalDialog(html, 'My Modal Dialog');
}

function logFromDialog() {
Logger.log('Button in modal clicked');
}

Giải thích:

    onOpen(): Tạo một menu tùy chỉnh khi người dùng mở Google Sheets, với một mục "Show Modal Dialog". Khi người dùng chọn mục này, hàm showModal() sẽ được gọi.
    showModal(): Tải nội dung HTML từ tệp modalDialog.html và hiển thị nó dưới dạng một modal dialog.
    logFromDialog(): Một hàm đơn giản để ghi log khi người dùng nhấn nút trong modal. Bạn có thể thay đổi hàm này để thực hiện bất kỳ hành động nào bạn muốn.

Lưu ý:

    Modal dialog sẽ chặn người dùng không thể tương tác với ứng dụng cho đến khi cửa sổ dialog bị đóng. Do đó, hãy đảm bảo rằng bạn không làm người dùng bối rối với quá nhiều cửa sổ modal.
    google.script.run là cách để gọi các hàm trong Google Apps Script từ mã JavaScript trong HTML, như được sử dụng trong ví dụ trên để gọi logFromDialog.

4. Cách tùy chỉnh giao diện của Modal Dialog

Bạn có thể tùy chỉnh giao diện của modal dialog bằng cách thay đổi nội dung HTML trong tệp modalDialog.html, chẳng hạn như thêm form, các trường nhập liệu, hoặc các nút để xử lý các hành động từ người dùng.
Ví dụ với Form trong Modal Dialog:



<!DOCTYPE html>

<html>

  <head>

    <style>

      body {

        font-family: Arial, sans-serif;

        text-align: center;

      }

      input[type="text"] {

        padding: 5px;

        margin: 10px;

        width: 200px;

      }

      button {

        padding: 10px 20px;

        background-color: #4CAF50;

        color: white;

        border: none;

        cursor: pointer;

      }

    </style>

  </head>

  <body>

    <h2>Enter your name</h2>

    <form id="userForm">

      <input type="text" id="name" placeholder="Enter your name" required><br>

      <button type="button" onclick="submitForm()">Submit</button>

    </form>



    <script>

      function submitForm() {

        var name = document.getElementById('name').value;

        if (name) {

          google.script.run.withSuccessHandler(function(response) {

            alert('Name submitted: ' + response);

          }).submitName(name);

        } else {

          alert('Please enter a name.');

        }

      }

    </script>

  </body>

</html>

Và hàm trong Google Apps Script:



function submitName(name) {

  Logger.log('Name submitted: ' + name);

  return name; // Trả lại tên đã nhập cho giao diện

}

5. Giải thích thêm về Modal Dialog trong Google Apps Script

   Modal Dialog là một cửa sổ có thể tạo trong Google Apps Script để hiển thị nội dung HTML tùy chỉnh.
    Bạn có thể tạo modal bằng HtmlService.createHtmlOutput() và sử dụng showModalDialog() để hiển thị nó.
    Các modal có thể chứa form, các nút bấm, và các thành phần giao diện người dùng tương tác với các hàm Apps Script.

Tìm kiếm: