หน้านี้ได้รับการแปลโดย Cloud Translation API

กล่องโต้ตอบและแถบด้านข้างในเอกสาร Google Workspace

สคริปต์ที่เชื่อมโยงกับ Google เอกสาร ชีต หรือฟอร์มสามารถแสดงองค์ประกอบอินเทอร์เฟซผู้ใช้หลายประเภท เช่น การแจ้งเตือนและข้อความแจ้งที่สร้างไว้ล่วงหน้า รวมถึงกล่องโต้ตอบและแถบด้านข้างที่มีหน้าบริการ HTML ที่กําหนดเอง โดยทั่วไป องค์ประกอบเหล่านี้จะเปิดจากรายการเมนู (โปรดทราบว่าใน Google ฟอร์ม องค์ประกอบอินเทอร์เฟซผู้ใช้จะแสดงเฉพาะผู้แก้ไขที่เปิดแบบฟอร์มเพื่อแก้ไขแบบฟอร์มเท่านั้น ไม่ใช่ผู้ใช้ที่เปิดแบบฟอร์มเพื่อตอบกลับ)

กล่องโต้ตอบการแจ้งเตือน

การแจ้งเตือนคือกล่องโต้ตอบที่สร้างไว้ล่วงหน้าซึ่งจะเปิดภายในเครื่องมือแก้ไข Google เอกสาร ชีต สไลด์ หรือฟอร์ม โดยจะมีข้อความและปุ่ม "ตกลง" ส่วนชื่อและปุ่มทางเลือกจะแสดงหรือไม่ก็ได้ ซึ่งคล้ายกับการเรียกใช้ window.alert() ใน JavaScript ฝั่งไคลเอ็นต์ภายในเว็บเบราว์เซอร์

การแจ้งเตือนจะระงับสคริปต์ฝั่งเซิร์ฟเวอร์ขณะที่กล่องโต้ตอบเปิดอยู่ สคริปต์จะกลับมาทํางานอีกครั้งหลังจากที่ผู้ใช้ปิดกล่องโต้ตอบ แต่การเชื่อมต่อ JDBC จะไม่คงอยู่ตลอดการระงับ

ดังที่แสดงในตัวอย่างด้านล่าง Google เอกสาร, ฟอร์ม, สไลด์ และชีตทั้งหมดใช้วิธีการ Ui.alert() ซึ่งมีด้วยกัน 3 รูปแบบ หากต้องการลบล้างปุ่ม "ตกลง" เริ่มต้น ให้ส่งค่าจาก Enum ของ Ui.ButtonSet เป็นอาร์กิวเมนต์ buttons หากต้องการประเมินปุ่มที่ผู้ใช้คลิก ให้เปรียบเทียบแสดงผลค่าของ alert() กับ Enum ของ Ui.Button

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

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

  var 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.');
  }
}

กล่องโต้ตอบข้อความแจ้ง

ข้อความแจ้งคือกล่องโต้ตอบที่สร้างไว้ล่วงหน้าซึ่งเปิดขึ้นภายในเครื่องมือแก้ไข Google เอกสาร ชีต สไลด์ หรือฟอร์ม โดยจะแสดงข้อความ ช่องป้อนข้อความ และปุ่ม "ตกลง" โดยจะใส่ชื่อและปุ่มทางเลือกไม่ได้ ซึ่งคล้ายกับการเรียกใช้ window.prompt() ใน JavaScript ฝั่งไคลเอ็นต์ภายในเว็บเบราว์เซอร์

Prompt จะระงับสคริปต์ฝั่งเซิร์ฟเวอร์ขณะที่กล่องโต้ตอบเปิดอยู่ สคริปต์จะกลับมาทํางานอีกครั้งหลังจากที่ผู้ใช้ปิดกล่องโต้ตอบ แต่การเชื่อมต่อ JDBC จะไม่คงอยู่ตลอดการระงับ

ดังที่แสดงในตัวอย่างด้านล่าง เอกสาร Google ฟอร์ม, สไลด์ และชีตทั้งหมดใช้วิธีการ Ui.prompt() ซึ่งมีให้เลือก 3 ตัวแปร หากต้องการลบล้างปุ่ม "ตกลง" เริ่มต้น ให้ส่งค่าจากอาร์กิวเมนต์ Ui.ButtonSet เป็นอาร์กิวเมนต์ buttons หากต้องการประเมินคําตอบของผู้ใช้ ให้บันทึกค่าการแสดงผลสําหรับ prompt() จากนั้นเรียกใช้ PromptResponse.getResponseText() เพื่อดึงข้อมูลอินพุตของผู้ใช้ และเปรียบเทียบค่าการแสดงผลสําหรับ PromptResponse.getSelectedButton() กับ Enum

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

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

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

  // Process the user's response.
  var button = result.getSelectedButton();
  var 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.');
  }
}

กล่องโต้ตอบที่กําหนดเอง

กล่องโต้ตอบที่กําหนดเองสามารถแสดงอินเทอร์เฟซผู้ใช้ของบริการ HTML ภายในเครื่องมือแก้ไข Google เอกสาร ชีต สไลด์ หรือฟอร์ม

กล่องโต้ตอบที่กําหนดเองจะไม่ระงับสคริปต์ฝั่งเซิร์ฟเวอร์ขณะที่กล่องโต้ตอบเปิดอยู่ คอมโพเนนต์ฝั่งไคลเอ็นต์สามารถเรียกแบบไม่พร้อมกันไปยังสคริปต์ฝั่งเซิร์ฟเวอร์โดยใช้ API ของ google.script สําหรับอินเทอร์เฟซบริการ HTML

กล่องโต้ตอบจะปิดตัวเองได้โดยเรียกใช้ google.script.host.close() ฝั่งไคลเอ็นต์ของอินเทอร์เฟซบริการ HTML กล่องโต้ตอบจะปิดไม่ได้โดยอินเทอร์เฟซผู้ใช้ หรือตัวผู้ใช้เองเท่านั้น

ดังที่แสดงในตัวอย่างด้านล่าง Google เอกสาร, ฟอร์ม, สไลด์ และชีตต่างก็ใช้วิธี Ui.showModalDialog() ในการเปิดกล่องโต้ตอบ

รหัส

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

function showDialog() {
  var 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()" />

แถบด้านข้างที่กําหนดเอง

แถบด้านข้างสามารถแสดงอินเทอร์เฟซผู้ใช้ของบริการ HTML ไว้ในเครื่องมือแก้ไข Google เอกสาร, ฟอร์ม, สไลด์ หรือชีต

แถบด้านข้างจะไม่ระงับสคริปต์ฝั่งเซิร์ฟเวอร์ขณะที่กล่องโต้ตอบเปิดอยู่ คอมโพเนนต์ฝั่งไคลเอ็นต์จะเรียกใช้สคริปต์ฝั่งเซิร์ฟเวอร์แบบไม่พร้อมกันได้โดยใช้ google.script API สําหรับอินเทอร์เฟซบริการ HTML

แถบด้านข้างสามารถปิดตัวเองได้โดยการเรียกใช้ google.script.host.close() ในฝั่งไคลเอ็นต์ของอินเทอร์เฟซบริการ HTML อินเทอร์เฟซไม่สามารถปิดได้ สําหรับอินเทอร์เฟซโดยตัวผู้ใช้เองเท่านั้น

ดังที่แสดงในตัวอย่างด้านล่าง Google เอกสาร, ฟอร์ม, สไลด์ และชีตทั้งหมดใช้วิธีการ Ui.showSidebar() เพื่อเปิดแถบด้านข้าง

รหัส

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

function showSidebar() {
  var 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()" />

กล่องโต้ตอบเปิดไฟล์

เครื่องมือเลือก Google เป็นกล่องโต้ตอบ "เปิดไฟล์" สําหรับข้อมูลที่จัดเก็บไว้ในเซิร์ฟเวอร์ของ Google ซึ่งรวมถึง Google ไดรฟ์, Google ค้นรูป, Google Video Search และอื่นๆ

จากตัวอย่างด้านล่างนี้ คุณสามารถใช้ JavaScript API ฝั่งไคลเอ็นต์ของเครื่องมือเลือกในบริการ HTML เพื่อสร้างกล่องโต้ตอบที่กําหนดเอง ซึ่งช่วยให้ผู้ใช้เลือกไฟล์ที่มีอยู่หรืออัปโหลดไฟล์ใหม่ได้ จากนั้นส่งการเลือกนั้นกลับไปยังสคริปต์ของคุณเพื่อใช้งานเพิ่มเติม

หากต้องการเปิดใช้เครื่องมือเลือกและรับคีย์ API ให้ทําตามวิธีการต่อไปนี้

ตรวจสอบว่าโปรเจ็กต์สคริปต์ใช้โปรเจ็กต์ GCP มาตรฐาน
เปิดใช้ "Google Picker API" ในโปรเจ็กต์ GCP
ขณะที่โปรเจ็กต์ GCP ยังเปิดอยู่ ให้เลือก API และบริการ แล้วคลิกข้อมูลเข้าสู่ระบบ
คลิกสร้างข้อมูลเข้าสู่ระบบ > คีย์ API การดําเนินการนี้จะสร้างคีย์ แต่คุณควรแก้ไขคีย์เพื่อเพิ่มทั้งข้อจํากัดของแอปพลิเคชันและข้อจํากัด API ลงในคีย์
คลิกปิดในกล่องโต้ตอบคีย์ API
ถัดจากคีย์ API ที่คุณสร้าง ให้คลิกเพิ่มเติม > แก้ไขคีย์ API
ในส่วนข้อจํากัดของแอปพลิเคชัน ให้ทําตามขั้นตอนต่อไปนี้
1. เลือก URL ที่มา HTTP (เว็บไซต์)
2. ในส่วนการจํากัดเว็บไซต์ ให้คลิกเพิ่มรายการ
3. คลิกผู้อ้างอิง แล้วป้อน *.google.com
4. เพิ่มรายการอื่นแล้วป้อน *.googleusercontent.com เป็น URL ที่มา
5. คลิกเสร็จ
ในส่วนข้อจํากัดของ API ให้ทําตามขั้นตอนต่อไปนี้
1. เลือกจํากัดคีย์
2. ในส่วน Select API ให้เลือก Google Picker API แล้วคลิกตกลง
  
  หมายเหตุ: Google Picker API ไม่ปรากฏเว้นแต่คุณจะเปิดใช้เนื่องจากรายการแสดงเฉพาะ API ที่เปิดใช้สําหรับโปรเจ็กต์ Cloud เท่านั้น
ในส่วนคีย์ API ให้คลิก "คัดลอกไปยังคลิปบอร์ด"
คลิกบันทึกด้านล่าง

ตัวอย่างต่อไปนี้เรียก ScriptApp.getOAuthToken() เพื่อส่งผ่านโทเค็นเพื่อการเข้าถึง OAuth 2.0 ของผู้ใช้ไปยังเครื่องมือเลือก เทคนิคนี้ทําให้เครื่องมือเลือกไม่จําเป็นต้องแสดงกล่องโต้ตอบการให้สิทธิ์ของตนเอง แต่จะทําได้เฉพาะเมื่อขอบเขต OAuth ที่เครื่องมือเลือกต้องการมีอยู่ใน Apps Script ไม่เช่นนั้นโค้ดเครื่องมือเลือกจะต้องประกาศขอบเขต OAuth ของตัวเอง ดังที่แสดงในตัวอย่าง "สวัสดีโลก" นี้

คุณต้องเรียกใช้ setOrigin(google.script.host.origin) เมื่อสร้าง PickerBuilder

code.gs

Picker/code.gs

ดูใน GitHub

/**
 * Creates a custom menu in Google Sheets when the spreadsheet opens.
 */
function onOpen() {
  try {
    SpreadsheetApp.getUi().createMenu('Picker')
        .addItem('Start', 'showPicker')
        .addToUi();
  } catch (e) {
    // TODO (Developer) - Handle exception
    console.log('Failed with error: %s', e.error);
  }
}

/**
 * Displays an HTML-service dialog in Google Sheets that contains client-side
 * JavaScript code for the Google Picker API.
 */
function showPicker() {
  try {
    const html = HtmlService.createHtmlOutputFromFile('dialog.html')
        .setWidth(600)
        .setHeight(425)
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
    SpreadsheetApp.getUi().showModalDialog(html, 'Select a file');
  } catch (e) {
    // TODO (Developer) - Handle exception
    console.log('Failed with error: %s', e.error);
  }
}

/**
 * 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() {
  try {
    DriveApp.getRootFolder();
    return ScriptApp.getOAuthToken();
  } catch (e) {
    // TODO (Developer) - Handle exception
    console.log('Failed with error: %s', e.error);
  }
}

กล่องโต้ตอบ

Picker/dialog.html

ดูใน GitHub

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
  <script>
    // IMPORTANT: Replace the value for DEVELOPER_KEY with the API key obtained
    // from the Google Developers Console.
    var DEVELOPER_KEY = 'ABC123 ... ';
    var DIALOG_DIMENSIONS = {width: 600, height: 425};
    var pickerApiLoaded = false;

    /**
     * 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(createPicker)
          .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) {
      if (pickerApiLoaded && token) {
        var picker = new google.picker.PickerBuilder()
            // Instruct Picker to display only spreadsheets in Drive. For other
            // views, see https://developers.google.com/picker/docs/#otherviews
            .addView(google.picker.ViewId.SPREADSHEETS)
            // 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)
            .setCallback(pickerCallback)
            .setOrigin(google.script.host.origin)
            // Instruct Picker to fill the dialog, minus 2 pixels for the border.
            .setSize(DIALOG_DIMENSIONS.width - 2,
                DIALOG_DIMENSIONS.height - 2)
            .build();
        picker.setVisible(true);
      } else {
        showError('Unable to load the file picker.');
      }
    }

    /**
     * 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/docs/result
     *
     * @param {object} data The response object.
     */
    function pickerCallback(data) {
      var action = data[google.picker.Response.ACTION];
      if (action == google.picker.Action.PICKED) {
        var doc = data[google.picker.Response.DOCUMENTS][0];
        var id = doc[google.picker.Document.ID];
        var url = doc[google.picker.Document.URL];
        var title = doc[google.picker.Document.NAME];
        document.getElementById('result').innerHTML =
            '<b>You chose:</b><br>Name: <a href="' + url + '">' + title +
            '</a><br>ID: ' + id;
      } else if (action == google.picker.Action.CANCEL) {
        document.getElementById('result').innerHTML = 'Picker canceled.';
      }
    }

    /**
     * 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>
    <p id="result"></p>
  </div>
  <script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
</body>
</html>