บริการ HTML ช่วยให้คุณแสดงหน้าเว็บที่โต้ตอบกับฟังก์ชัน Apps Script ฝั่งเซิร์ฟเวอร์ได้ ซึ่งมีประโยชน์มากสําหรับการสร้างเว็บแอปหรือการเพิ่มอินเทอร์เฟซผู้ใช้ที่กําหนดเองใน Google เอกสาร ชีต และฟอร์ม นอกจากนี้คุณยังใช้อีเมลเพื่อสร้างเนื้อหาอีเมลได้อีกด้วย
สร้างไฟล์ HTML
หากต้องการเพิ่มไฟล์ HTML ในโปรเจ็กต์ Apps Script ให้ทําตามขั้นตอนต่อไปนี้
- เปิดเครื่องมือแก้ไข Apps Script
- คลิกเพิ่มไฟล์ > HTML ที่ด้านซ้าย
คุณเขียน HTML, CSS และ JavaScript มาตรฐานส่วนใหญ่ได้ในไฟล์ HTML หน้านี้จะแสดงเป็น HTML5 แม้ว่าจะไม่มีฟีเจอร์ขั้นสูงของ HTML5 ตามที่อธิบายไว้ในข้อจํากัด
ไฟล์ยังมีเทมเพลตเทมเพลตที่ประมวลผลบนเซิร์ฟเวอร์ได้ก่อนที่หน้าเว็บจะส่งไปยังผู้ใช้ ดังที่อธิบายไว้ในส่วน HTML แบบเทมเพลต
แสดง HTML เป็นเว็บแอป
หากต้องการสร้างเว็บแอปที่มีบริการ HTML โค้ดจะต้องมีฟังก์ชัน doGet()
ที่บอกสคริปต์วิธีแสดงหน้า ฟังก์ชันต้องส่งคืนออบเจ็กต์ HtmlOutput
ตามที่แสดงในตัวอย่างนี้
Code.gs
function doGet() { return HtmlService.createHtmlOutputFromFile('Index'); }
Index.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> Hello, World! </body> </html>
เมื่อมีเฟรมเวิร์กพื้นฐานพร้อมแล้ว สิ่งที่คุณต้องทําก็แค่บันทึกสคริปต์เวอร์ชันที่ต้องการ จากนั้นทําให้สคริปต์เป็นเว็บแอป
หลังจากระบบนําสคริปต์ไปใช้เป็นเว็บแอปแล้ว คุณยังเลือกฝังในเว็บไซต์ของ Google Sites ได้อีกด้วย
แสดง HTML เป็นอินเทอร์เฟซผู้ใช้ของ Google เอกสาร ชีต สไลด์ หรือฟอร์ม
บริการ HTML สามารถแสดงกล่องโต้ตอบหรือแถบด้านข้างใน Google เอกสาร ชีต สไลด์ หรือฟอร์มได้ หากสคริปต์เชื่อมโยงคอนเทนเนอร์กับไฟล์ (ใน Google ฟอร์ม อินเทอร์เฟซผู้ใช้ที่กําหนดเองจะปรากฏต่อผู้แก้ไขที่เปิดแบบฟอร์มเพื่อแก้ไขแบบฟอร์มดังกล่าว ไม่ใช่ผู้ใช้ที่เปิดแบบฟอร์มเพื่อตอบกลับ)
สคริปต์ที่สร้างอินเทอร์เฟซผู้ใช้สําหรับเอกสาร สเปรดชีต หรือแบบฟอร์มไม่จําเป็นต้องใช้ฟังก์ชัน doGet()
โดยเฉพาะ และไม่จําเป็นต้องบันทึกเวอร์ชันสคริปต์หรือทําให้ใช้งานได้เหมือนกับเว็บแอป แต่ฟังก์ชันที่เปิดอินเทอร์เฟซผู้ใช้จะต้องส่งไฟล์ HTML เป็นออบเจ็กต์ HtmlOutput
ไปยังเมธอด showModalDialog())
หรือ showSidebar()
ของออบเจ็กต์ Ui
สําหรับเอกสาร ฟอร์ม หรือสเปรดชีตที่ใช้งานอยู่
ตัวอย่างเช่น ฟีเจอร์พิเศษเพื่อความสะดวก ฟังก์ชัน onOpen()
จะสร้างเมนูที่กําหนดเอง ซึ่งช่วยให้เปิดอินเทอร์เฟซได้อย่างง่ายดาย และปุ่มในไฟล์ HTML จะเรียกเมธอด close()
พิเศษของ google.script.host
API เพื่อปิดอินเทอร์เฟซ
Code.gs
// Use this code for Google Docs, Slides, Forms, or Sheets. function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Dialog') .addItem('Open', 'openDialog') .addToUi(); } function openDialog() { var html = HtmlService.createHtmlOutputFromFile('Index'); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showModalDialog(html, 'Dialog title'); }
Index.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> Hello, World! <input type="button" value="Close" onclick="google.script.host.close()" /> </body> </html>
โปรดทราบว่าครั้งแรกที่คุณต้องการแสดงอินเทอร์เฟซผู้ใช้นี้ คุณต้องเรียกใช้ฟังก์ชัน onOpen()
ด้วยตัวเองในเครื่องมือแก้ไขสคริปต์ หรือโหลดหน้าต่างนี้ซ้ําสําหรับเครื่องมือแก้ไขเอกสาร ชีต หรือฟอร์ม (ซึ่งจะปิดเครื่องมือแก้ไขสคริปต์) หลังจากนั้น เมนูที่กําหนดเองควรปรากฏขึ้นภายใน 2-3 วินาทีทุกครั้งที่คุณเปิดไฟล์ เลือกกล่องโต้ตอบ > เปิดเพื่อดูอินเทอร์เฟซ