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

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

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

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

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

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

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

ดังที่แสดงในตัวอย่างต่อไปนี้ Google เอกสาร ฟอร์ม สไลด์ และชีตทั้งหมดใช้เมธอด Ui.prompt() ซึ่งมีอยู่ 3 รูปแบบ หากต้องการลบล้างปุ่ม "ตกลง" เริ่มต้น ให้ส่งค่าจากคําระบุค่า 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!

แถบด้านข้างจะแสดงอินเทอร์เฟซผู้ใช้บริการ 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!

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

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

ข้อกำหนด

การใช้ Google Picker กับ Apps Script มีข้อกําหนดหลายประการ

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงเครื่องมือเลือกของ Google ใน Apps Script

code.gs

dialog.html

appsscript.json