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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

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

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

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

ดังที่แสดงในตัวอย่างด้านล่าง Google เอกสาร, ฟอร์ม, สไลด์ และชีตต่างก็ใช้เมธอด Ui.alert() ซึ่งมีให้เลือก 3 ตัวแปร หากต้องการลบล้างปุ่ม "OK" เริ่มต้น ให้ส่งค่าจากค่าแจกแจง Ui.ButtonSet เป็นอาร์กิวเมนต์ buttons หากต้องการประเมินปุ่มที่ผู้ใช้คลิก ให้เปรียบเทียบค่าการตอบกลับของ alert() กับการแจกแจงของ 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 เอกสาร ชีต สไลด์ หรือฟอร์ม โดยจะแสดงข้อความ ช่องป้อนข้อความ และปุ่ม "OK" ชื่อ และปุ่มอื่นๆ เป็นทางเลือก ซึ่งคล้ายกับการเรียกใช้ window.prompt() ใน JavaScript ฝั่งไคลเอ็นต์ภายในเว็บเบราว์เซอร์

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

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

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 เอกสาร ชีต สไลด์ หรือฟอร์ม

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

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

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

Code.gs

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() เพื่อเปิดแถบด้านข้าง

Code.gs

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

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

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

  1. ตรวจสอบว่าโปรเจ็กต์สคริปต์ใช้โปรเจ็กต์ GCP มาตรฐาน
  2. เปิดใช้ "Google Picker API" ในโปรเจ็กต์ GCP
  3. ขณะที่โปรเจ็กต์ GCP ยังเปิดอยู่ ให้เลือก API และ API บริการ แล้วคลิกข้อมูลเข้าสู่ระบบ
  4. คลิกสร้างข้อมูลเข้าสู่ระบบ > คีย์ API การดําเนินการนี้จะสร้างคีย์ แต่คุณควรแก้ไขคีย์เพื่อเพิ่มทั้งการจํากัดแอปพลิเคชันและการจํากัด API ลงในคีย์
  5. ในกล่องโต้ตอบคีย์ API ให้คลิกปิด
  6. ถัดจากคีย์ API ที่คุณสร้าง ให้คลิกเพิ่มเติม ไอคอนเพิ่มเติม> แก้ไขคีย์ API
  7. ทําตามขั้นตอนต่อไปนี้ในส่วนการจํากัดแอปพลิเคชัน

    1. เลือกผู้อ้างอิง HTTP (เว็บไซต์)
    2. ในส่วนการจํากัดเว็บไซต์ ให้คลิกเพิ่มรายการ
    3. คลิก Referrer และป้อน *.google.com
    4. เพิ่มรายการอื่นและป้อน *.googleusercontent.com เป็นผู้อ้างอิง
    5. คลิกเสร็จ
  8. ทําตามขั้นตอนต่อไปนี้ในส่วนข้อจํากัดของ API

    1. เลือกจํากัดคีย์
    2. ในส่วน Select API ให้เลือก Google Picker API แล้วคลิก OK

      หมายเหตุ: Google Picker API จะไม่ปรากฏเว้นแต่คุณจะเปิดใช้ไว้เนื่องจากรายการจะแสดงเฉพาะ API ที่เปิดใช้สําหรับโปรเจ็กต์ Cloud เท่านั้น

  9. ในส่วนคีย์ API ให้คลิกคัดลอกไปยังคลิปบอร์ด คัดลอกไปยังคลิปบอร์ด

  10. คลิกบันทึกด้านล่าง

code.gs

เครื่องมือเลือก/โค้ด.gs
/**
 * 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
    Logger.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
    Logger.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
    Logger.log('Failed with error: %s', e.error);
  }
}

ข้อความ html

เครื่องมือเลือก/dialog.html
<!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>