สคริปต์ที่เชื่อมโยงกับ Google เอกสาร ชีต หรือฟอร์มสามารถแสดงองค์ประกอบอินเทอร์เฟซหลายประเภท ได้แก่ การแจ้งเตือนและข้อความแจ้งเตือนที่สร้างไว้ล่วงหน้า รวมถึงกล่องโต้ตอบและแถบด้านข้างที่มีบริการ HTML ที่กําหนดเอง โดยปกติแล้ว องค์ประกอบเหล่านี้จะเปิดจากรายการในเมนู (โปรดทราบว่าใน Google ฟอร์ม องค์ประกอบอินเทอร์เฟซผู้ใช้จะปรากฏเฉพาะกับผู้แก้ไขที่เปิดแบบฟอร์มเพื่อแก้ไขเท่านั้น ไม่ใช่ผู้ใช้ที่เปิดแบบฟอร์มให้ตอบกลับ)
กล่องโต้ตอบการแจ้งเตือน
การแจ้งเตือนคือกล่องโต้ตอบที่สร้างไว้ล่วงหน้าซึ่งเปิดไว้ในเครื่องมือแก้ไข Google เอกสาร ชีต สไลด์ หรือฟอร์ม โดยจะแสดงข้อความและปุ่ม "ตกลง" โดยจะไม่บังคับให้ใส่ชื่อและปุ่มทางเลือก ซึ่งคล้ายกับการเรียก window.alert()
ใน JavaScript ฝั่งไคลเอ็นต์ภายในเว็บเบราว์เซอร์
การแจ้งเตือนจะระงับสคริปต์ฝั่งเซิร์ฟเวอร์ขณะที่กล่องโต้ตอบเปิดอยู่ สคริปต์จะกลับมาทํางานอีกครั้งหลังจากที่ผู้ใช้ปิดกล่องโต้ตอบ แต่การเชื่อมต่อ JDBC จะไม่ถูกระงับ
ดังที่แสดงในตัวอย่างด้านล่าง Google เอกสาร, ฟอร์ม, สไลด์ และชีตต่างก็ใช้เมธอด Ui.alert()
ซึ่งมีให้เลือก 3 รูปแบบ หากต้องการลบล้างปุ่ม "ตกลง" ที่เป็นค่าเริ่มต้น ให้ส่งค่าจาก Enum ของ 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 เอกสาร ชีต สไลด์ หรือฟอร์มได้
กล่องโต้ตอบที่กําหนดเองจะไม่ระงับสคริปต์ฝั่งเซิร์ฟเวอร์ขณะที่กล่องโต้ตอบเปิดอยู่
คอมโพเนนต์ฝั่งไคลเอ็นต์จะเรียกใช้สคริปต์ฝั่งเซิร์ฟเวอร์แบบอะซิงโครนัสได้โดยใช้ 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 เอกสาร ฟอร์ม สไลด์ และชีต
แถบด้านข้างจะไม่ระงับสคริปต์ฝั่งเซิร์ฟเวอร์ขณะที่กล่องโต้ตอบเปิดอยู่ คอมโพเนนต์ฝั่งไคลเอ็นต์จะเรียกใช้สคริปต์ฝั่งเซิร์ฟเวอร์แบบอะซิงโครนัสได้โดยใช้ API google.script
สําหรับอินเทอร์เฟซบริการ 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 Picker เป็นกล่องโต้ตอบที่ "เปิดไฟล์" สําหรับข้อมูลที่จัดเก็บไว้ในเซิร์ฟเวอร์ของ Google ซึ่งได้แก่ Google ไดรฟ์, Google Image Search, Google Video Search และอื่นๆ อีกมากมาย
ตามที่แสดงในตัวอย่างด้านล่าง จะใช้ JavaScript API ฝั่งไคลเอ็นต์ของเครื่องมือเลือกได้ในบริการ HTML เพื่อสร้างกล่องโต้ตอบที่กําหนดเองซึ่งให้ผู้ใช้เลือกไฟล์ที่มีอยู่หรืออัปโหลดไฟล์ใหม่ จากนั้นจึงส่งการเลือกนั้นกลับไปที่สคริปต์ของคุณเพื่อใช้ต่อไป
หากต้องการเปิดใช้เครื่องมือเลือกและรับคีย์ API ให้ทําตามวิธีการต่อไปนี้
- ตรวจสอบว่าโครงการสคริปต์ของคุณใช้โครงการ GCP มาตรฐาน
- เปิดใช้ "Google Picker API" ในโปรเจ็กต์ Google Cloud
- ขณะที่โปรเจ็กต์ Google Cloud ยังคงเปิดอยู่ ให้เลือก API และบริการ แล้วคลิกข้อมูลเข้าสู่ระบบ
- คลิกสร้างข้อมูลรับรอง > คีย์ API การดําเนินการนี้จะสร้างคีย์ แต่คุณควรแก้ไขคีย์เพื่อเพิ่มทั้งข้อจํากัดของแอปพลิเคชันและข้อจํากัด API ลงในคีย์
- ในกล่องโต้ตอบคีย์ API ให้คลิกปิด
- ถัดจากคีย์ API ที่คุณสร้าง ให้คลิกเพิ่มเติม
> แก้ไขคีย์ API
ในส่วนข้อจํากัดของแอปพลิเคชัน ให้ทําตามขั้นตอนต่อไปนี้
- เลือกผู้อ้างอิง HTTP (เว็บไซต์)
- ในส่วนการจํากัดเว็บไซต์ ให้คลิกเพิ่มรายการ
- คลิกผู้อ้างอิง แล้วป้อน
*.google.com
- เพิ่มรายการอื่นและป้อน
*.googleusercontent.com
เป็นผู้อ้างอิง - คลิกเสร็จ
ในส่วนข้อจํากัดของ API ให้ทําตามขั้นตอนต่อไปนี้
- เลือกจํากัดคีย์
ในส่วน Select API ให้เลือก Google Picker API แล้วคลิก OK
หมายเหตุ: Google Picker API ไม่ปรากฏขึ้นจนกว่าคุณจะเปิดใช้ เนื่องจากรายการดังกล่าวจะแสดงเฉพาะ API ที่เปิดใช้สําหรับโปรเจ็กต์ Cloud เท่านั้น
ในส่วนคีย์ API ให้คลิกคัดลอกไปยังคลิปบอร์ด
คลิกบันทึกด้านล่าง