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