Hộp thoại và thanh bên trong Tài liệu trên Google Workspace

Các dự án Google Apps Script được liên kết với Google Tài liệu, Google Trang tính hoặc Google Biểu mẫu có thể hiển thị các phần tử giao diện người dùng, chẳng hạn như cảnh báo, lời nhắc, thông báo dạng nổi, hộp thoại và thanh bên được tạo sẵn. Các phần tử này thường chứa nội dung dịch vụ HTML tuỳ chỉnh và thường được mở từ các mục trong trình đơn. Trong Biểu mẫu, các phần tử giao diện người dùng chỉ hiển thị cho người chỉnh sửa mở biểu mẫu để sửa đổi, chứ không hiển thị cho người trả lời.

Hộp thoại cảnh báo

Cảnh báo là một hộp thoại được tạo sẵn, mở ra bên trong trình chỉnh sửa Tài liệu, Trang tính, Trang trình bày hoặc Biểu mẫu. Hộp thoại này hiển thị một thông báo và nút OK ; tiêu đề và các nút thay thế là không bắt buộc. Hộp thoại này tương tự như việc gọi window.alert trong JavaScript phía máy khách bên trong trình duyệt web.

Cảnh báo tạm dừng tập lệnh phía máy chủ trong khi hộp thoại đang mở. Tập lệnh sẽ tiếp tục sau khi người dùng đóng hộp thoại, nhưng JDBC không duy trì được trong thời gian tạm dừng.

Như minh hoạ trong ví dụ sau, Tài liệu, Biểu mẫu, Trang trình bày và Trang tính đều sử dụng phương thức Ui.alert, có 3 biến thể. Để ghi đè nút OK mặc định, hãy truyền một giá trị từ Ui.ButtonSet enum làm đối số buttons. Để đánh giá nút mà người dùng đã nhấp vào, hãy so sánh giá trị trả về cho alert với enum Ui.Button.

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .createMenu("Custom Menu")
    .addItem("Show alert", "showAlert")
    .addToUi();
}

function showAlert() {
  const ui = SpreadsheetApp.getUi(); // Same variations.

  const result = ui.alert(
    "Please confirm",
    "Are you sure you want to continue?",
    ui.ButtonSet.YES_NO,
  );

  // Process the user's response.
  if (result === ui.Button.YES) {
    // User clicked "Yes".
    ui.alert("Confirmation received.");
  } else {
    // User clicked "No" or X in the title bar.
    ui.alert("Permission denied.");
  }
}

Hộp thoại lời nhắc

Lời nhắc là một hộp thoại được tạo sẵn, mở ra bên trong trình chỉnh sửa Tài liệu, Trang tính, Trang trình bày hoặc Biểu mẫu. Hộp thoại này hiển thị một thông báo, một trường nhập dữ liệu văn bản và nút OK ; tiêu đề và các nút thay thế là không bắt buộc. Hộp thoại này tương tự như việc gọi window.prompt trong JavaScript phía máy khách bên trong trình duyệt web.

Lời nhắc tạm dừng tập lệnh phía máy chủ trong khi hộp thoại đang mở. Tập lệnh sẽ tiếp tục sau khi người dùng đóng hộp thoại, nhưng JDBC không duy trì được trong thời gian tạm dừng.

Như minh hoạ trong ví dụ sau, Tài liệu, Biểu mẫu, Trang trình bày và Trang tính đều sử dụng phương thức Ui.prompt, có 3 biến thể. Để ghi đè nút OK mặc định, hãy truyền một giá trị từ enum Ui.ButtonSet làm đối số buttons. Để đánh giá phản hồi của người dùng, hãy thu thập giá trị trả về cho prompt, sau đó gọi PromptResponse.getResponseText để truy xuất dữ liệu đầu vào của người dùng và so sánh giá trị trả về cho PromptResponse.getSelectedButton với enum Ui.Button.

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .createMenu("Custom Menu")
    .addItem("Show prompt", "showPrompt")
    .addToUi();
}

function showPrompt() {
  const ui = SpreadsheetApp.getUi(); // Same variations.

  const result = ui.prompt(
    "Let's get to know each other!",
    "Please enter your name:",
    ui.ButtonSet.OK_CANCEL,
  );

  // Process the user's response.
  const button = result.getSelectedButton();
  const text = result.getResponseText();
  if (button === ui.Button.OK) {
    // User clicked "OK".
    ui.alert("Your name is " + text + ".");
  } else if (button === ui.Button.CANCEL) {
    // User clicked "Cancel".
    ui.alert("I didn't get your name.");
  } else if (button === ui.Button.CLOSE) {
    // User clicked X in the title bar.
    ui.alert("You closed the dialog.");
  }
}

Thông báo dạng nổi trên Trang tính

"Thông báo dạng nổi" là một cửa sổ hộp thoại nhỏ ở góc dưới bên phải của trình chỉnh sửa Trang tính, hiển thị một thông báo nhưng không tạm dừng tập lệnh. Đây là một cách hay để hiển thị thông báo trạng thái hoặc thông tin cập nhật không yêu cầu người dùng tương tác.

Như minh hoạ trong ví dụ sau, Trang tính sử dụng phương thức Spreadsheet.toast. Thông báo dạng nổi chỉ có trong Trang tính.

function showToast() {
  SpreadsheetApp.getActiveSpreadsheet().toast("Task completed successfully.");
}

Hộp thoại tuỳ chỉnh

Hộp thoại tuỳ chỉnh có thể hiển thị giao diện người dùng dịch vụ HTML bên trong trình chỉnh sửa Tài liệu, Trang tính, Trang trình bày hoặc Biểu mẫu.

Hộp thoại tuỳ chỉnh không tạm dừng tập lệnh phía máy chủ trong khi hộp thoại đang mở. Vì là không đồng bộ nên hàm phía máy chủ mở hộp thoại sẽ hoàn tất ngay lập tức. Để truyền dữ liệu từ hộp thoại tuỳ chỉnh trở lại máy chủ, hãy sử dụng API google.script trong mã phía máy khách.

Hộp thoại có thể tự đóng bằng cách gọi google.script.host.close ở phía máy khách của giao diện dịch vụ HTML. Các giao diện khác không thể đóng hộp thoại, chỉ có người dùng hoặc chính hộp thoại đó mới có thể đóng.

Như minh hoạ trong ví dụ sau, Tài liệu, Biểu mẫu, Trang trình bày và Trang tính đều sử dụng phương thức Ui.showModalDialog để mở hộp thoại.

Code.gs

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Custom Menu')
      .addItem('Show dialog', 'showDialog')
      .addToUi();
}

function showDialog() {
  const html = HtmlService.createHtmlOutputFromFile('Page')
      .setWidth(400)
      .setHeight(300);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'My custom dialog');
}

Page.html

Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />

Thanh bên tuỳ chỉnh

Thanh bên có thể hiển thị giao diện người dùng dịch vụ HTML bên trong trình chỉnh sửa Tài liệu, Biểu mẫu, Trang trình bày và Trang tính.

Thanh bên không tạm dừng tập lệnh phía máy chủ trong khi hộp thoại đang mở. Thành phần phía máy khách có thể thực hiện các lệnh gọi không đồng bộ đến tập lệnh phía máy chủ bằng API google.script cho các giao diện dịch vụ HTML.

Thanh bên có thể tự đóng bằng cách gọi google.script.host.close ở phía máy khách của giao diện dịch vụ HTML. Các giao diện khác không thể đóng thanh bên, chỉ có người dùng hoặc chính thanh bên đó mới có thể đóng.

Như minh hoạ trong ví dụ sau, Tài liệu, Biểu mẫu, Trang trình bày và Trang tính đều sử dụng phương thức Ui.showSidebar để mở thanh bên.

Code.gs

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Custom Menu')
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

function showSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('Page')
      .setTitle('My custom sidebar');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showSidebar(html);
}

Page.html

Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />

Hộp thoại mở tệp

Google Picker là một API JavaScript cho phép người dùng chọn hoặc tải tệp trên Google Drive lên. Sử dụng thư viện Google Picker trong dịch vụ HTML để tạo một hộp thoại tuỳ chỉnh cho phép người dùng chọn các tệp hiện có hoặc tải tệp mới lên, sau đó truyền lựa chọn trở lại tập lệnh của bạn.

Yêu cầu

Việc sử dụng Google Picker với Google Apps Script có một số yêu cầu:

Ví dụ:

Ví dụ sau đây minh hoạ Google Picker trong Apps Script.

code.gs

picker/code.gs
/**
 * Creates a custom menu in Google Sheets when the spreadsheet opens.
 */
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu("Picker")
    .addItem("Start", "showPicker")
    .addToUi();
}

/**
 * Displays an HTML-service dialog in Google Sheets that contains client-side
 * JavaScript code for the Google Picker API.
 */
function showPicker() {
  const html = HtmlService.createHtmlOutputFromFile("dialog.html")
    .setWidth(800)
    .setHeight(600)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showModalDialog(html, "Select a file");
}
// Ensure the Drive API is enabled.
if (!Drive) {
  throw new Error("Please enable the Drive advanced service.");
}

/**
 * Checks that the file can be accessed.
 * @param {string} fileId The ID of the file.
 * @return {Object} The file resource.
 */
function getFile(fileId) {
  return Drive.Files.get(fileId, { fields: "*" });
}

/**
 * Gets the user's OAuth 2.0 access token so that it can be passed to Picker.
 * This technique keeps Picker from needing to show its own authorization
 * dialog, but is only possible if the OAuth scope that Picker needs is
 * available in Apps Script. In this case, the function includes an unused call
 * to a DriveApp method to ensure that Apps Script requests access to all files
 * in the user's Drive.
 *
 * @return {string} The user's OAuth 2.0 access token.
 */
function getOAuthToken() {
  return ScriptApp.getOAuthToken();
}

dialog.html

picker/dialog.html
<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
    />
    <style>
      #result {
        display: flex;
        flex-direction: column;
        gap: 0.25em;
      }

      pre {
        font-size: x-small;
        max-height: 25vh;
        overflow-y: scroll;
        background: #eeeeee;
        padding: 1em;
        border: 1px solid #cccccc;
      }
    </style>
    <script>
      // TODO: Replace the value for DEVELOPER_KEY with the API key obtained
      // from the Google Developers Console.
      const DEVELOPER_KEY = "AIza...";
      // TODO: Replace the value for CLOUD_PROJECT_NUMBER with the project
      // number obtained from the Google Developers Console.
      const CLOUD_PROJECT_NUMBER = "1234567890";

      let pickerApiLoaded = false;
      let oauthToken;

      /**
       * Loads the Google Picker API.
       */
      function onApiLoad() {
        gapi.load("picker", {
          callback: function () {
            pickerApiLoaded = true;
          },
        });
      }

      /**
       * Gets the user's OAuth 2.0 access token from the server-side script so that
       * it can be passed to Picker. This technique keeps Picker from needing to
       * show its own authorization dialog, but is only possible if the OAuth scope
       * that Picker needs is available in Apps Script. Otherwise, your Picker code
       * will need to declare its own OAuth scopes.
       */
      function getOAuthToken() {
        google.script.run
          .withSuccessHandler((token) => {
            oauthToken = token;
            createPicker(token);
          })
          .withFailureHandler(showError)
          .getOAuthToken();
      }

      /**
       * Creates a Picker that can access the user's spreadsheets. This function
       * uses advanced options to hide the Picker's left navigation panel and
       * default title bar.
       *
       * @param {string} token An OAuth 2.0 access token that lets Picker access the
       *     file type specified in the addView call.
       */
      function createPicker(token) {
        document.getElementById("result").innerHTML = "";

        if (pickerApiLoaded && token) {
          const picker = new google.picker.PickerBuilder()
            // Instruct Picker to display only spreadsheets in Drive. For other
            // views, see https://developers.google.com/picker/reference/picker.viewid
            .addView(
              new google.picker.DocsView(
                google.picker.ViewId.SPREADSHEETS
              ).setOwnedByMe(true)
            )
            // Hide the navigation panel so that Picker fills more of the dialog.
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            // Hide the title bar since an Apps Script dialog already has a title.
            .hideTitleBar()
            .setOAuthToken(token)
            .setDeveloperKey(DEVELOPER_KEY)
            .setAppId(CLOUD_PROJECT_NUMBER)
            .setCallback(pickerCallback)
            .setOrigin(google.script.host.origin)
            .build();
          picker.setVisible(true);
        } else {
          showError("Unable to load the file picker.");
        }
      }

      /**
       * @typedef {Object} PickerResponse
       * @property {string} action
       * @property {PickerDocument[]} docs
       */

      /**
       * @typedef {Object} PickerDocument
       * @property {string} id
       * @property {string} name
       * @property {string} mimeType
       * @property {string} url
       * @property {string} lastEditedUtc
       */

      /**
       * A callback function that extracts the chosen document's metadata from the
       * response object. For details on the response object, see
       * https://developers.google.com/picker/reference/picker.responseobject
       *
       * @param {PickerResponse} data The response object.
       */
      function pickerCallback(data) {
        const action = data[google.picker.Response.ACTION];
        if (action == google.picker.Action.PICKED) {
          handlePicked(data);
        } else if (action == google.picker.Action.CANCEL) {
          document.getElementById("result").innerHTML = "Picker canceled.";
        }
      }

      /**
       * Handles `"PICKED"` responsed from the Google Picker.
       *
       * @param {PickerResponse} data The response object.
       */
      function handlePicked(data) {
        const doc = data[google.picker.Response.DOCUMENTS][0];
        const id = doc[google.picker.Document.ID];

        google.script.run
          .withSuccessHandler((driveFilesGetResponse) => {
            // Render the response from Picker and the Drive.Files.Get API.
            const resultElement = document.getElementById("result");
            resultElement.innerHTML = "";

            for (const response of [
              {
                title: "Picker response",
                content: JSON.stringify(data, null, 2),
              },
              {
                title: "Drive.Files.Get response",
                content: JSON.stringify(driveFilesGetResponse, null, 2),
              },
            ]) {
              const titleElement = document.createElement("h3");
              titleElement.appendChild(document.createTextNode(response.title));
              resultElement.appendChild(titleElement);

              const contentElement = document.createElement("pre");
              contentElement.appendChild(
                document.createTextNode(response.content)
              );
              resultElement.appendChild(contentElement);
            }
          })
          .withFailureHandler(showError)
          .getFile(data[google.picker.Response.DOCUMENTS][0].id);
      }

      /**
       * Displays an error message within the #result element.
       *
       * @param {string} message The error message to display.
       */
      function showError(message) {
        document.getElementById("result").innerHTML = "Error: " + message;
      }
    </script>
  </head>

  <body>
    <div>
      <button onclick="getOAuthToken()">Select a file</button>
      <div id="result"></div>
    </div>
    <script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

appsscript.json

picker/appsscript.json
{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/script.container.ui",
    "https://www.googleapis.com/auth/drive.file"
  ],
  "dependencies": {
    "enabledAdvancedServices": [
      {
        "userSymbol": "Drive",
        "version": "v3",
        "serviceId": "drive"
      }
    ]
  }
}