บริการ HTML ช่วยให้คุณแสดงหน้าเว็บที่โต้ตอบกับฟังก์ชัน Apps Script ฝั่งเซิร์ฟเวอร์ได้ เหมาะอย่างยิ่งสำหรับการสร้างเว็บแอปหรือเพิ่มอินเทอร์เฟซผู้ใช้ที่กำหนดเองใน Google เอกสาร ชีต และฟอร์ม หรือจะใช้เพื่อสร้างเนื้อหาของอีเมลก็ได้เช่นกัน
สร้างไฟล์ HTML
หากต้องการเพิ่มไฟล์ HTML ในโครงการ Apps Script ให้ทำตามขั้นตอนต่อไปนี้
- เปิดเครื่องมือแก้ไข Apps Script
- ที่ด้านซ้าย ให้คลิกเพิ่มไฟล์ > HTML
ภายในไฟล์ HTML คุณจะเขียน HTML, CSS และ JavaScript ฝั่งไคลเอ็นต์แบบมาตรฐานส่วนใหญ่ได้ หน้านี้จะแสดงเป็น HTML5 แม้ว่าฟีเจอร์ขั้นสูงบางอย่างของ HTML5 จะใช้งานไม่ได้ ตามที่อธิบายไว้ในข้อจำกัด
นอกจากนี้ ไฟล์ยังอาจมี Scriptlet ของเทมเพลตที่ประมวลผลในเซิร์ฟเวอร์ก่อนที่จะส่งหน้าเว็บไปยังผู้ใช้ ซึ่งคล้ายกับ PHP ตามที่อธิบายไว้ในส่วนเกี่ยวกับ templated 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()
ด้วยตนเองในเครื่องมือแก้ไขสคริปต์ หรือโหลดหน้าต่างสำหรับเครื่องมือแก้ไขเอกสาร ชีต หรือฟอร์มซ้ำ (ซึ่งจะปิดเครื่องมือแก้ไขสคริปต์) หลังจากนั้น เมนูที่กำหนดเองควรปรากฏขึ้นภายในไม่กี่วินาทีทุกครั้งที่คุณเปิดไฟล์ เลือกกล่องโต้ตอบ > เปิด เพื่อดูอินเทอร์เฟซ