บริการ HTML: สร้างและแสดงผล HTML

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

สร้างไฟล์ HTML

หากต้องการเพิ่มไฟล์ HTML ลงในโปรเจ็กต์ Apps Script ให้ทำตาม ขั้นตอนต่อไปนี้

เปิดเครื่องมือแก้ไข Apps Script
ที่ด้านซ้าย ให้คลิกเพิ่มไฟล์ > HTML

คุณสามารถเขียน HTML, CSS และ JavaScript ฝั่งไคลเอ็นต์มาตรฐานส่วนใหญ่ภายในไฟล์ HTML หน้าเว็บจะแสดงเป็น HTML5 แม้ว่าฟีเจอร์ขั้นสูงบางอย่างของ HTML5 จะไม่พร้อมใช้งานตามที่อธิบายไว้ใน ข้อจำกัด

นอกจากนี้ ไฟล์ยังอาจมีสคริปต์ย่อยของเทมเพลตที่ประมวลผลในเซิร์ฟเวอร์ ก่อนที่จะส่งหน้าเว็บไปยังผู้ใช้ ซึ่งคล้ายกับ PHP ดังที่อธิบายไว้ในส่วน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 เอกสาร, ชีต, Google สไลด์ หรือฟอร์ม

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

สคริปต์ที่สร้างอินเทอร์เฟซผู้ใช้สำหรับเอกสาร สเปรดชีต หรือแบบฟอร์มไม่จำเป็นต้องมีฟังก์ชัน doGet โดยเฉพาะ และคุณไม่จำเป็นต้องบันทึกเวอร์ชันของสคริปต์หรือติดตั้งใช้งานสคริปต์ แต่ฟังก์ชัน ที่เปิดอินเทอร์เฟซผู้ใช้ต้องส่งไฟล์ HTML เป็นออบเจ็กต์ HtmlOutput ไปยังเมธอด showModalDialog หรือ showSidebar ของออบเจ็กต์ Ui สำหรับเอกสาร ฟอร์ม หรือ สเปรดชีตที่ใช้งานอยู่

ตัวอย่างเหล่านี้มีฟีเจอร์เพิ่มเติมเพื่อความสะดวก ได้แก่ onOpen ฟังก์ชันสร้างเมนูที่กำหนดเองซึ่งช่วยให้คุณ เปิดอินเทอร์เฟซได้ และปุ่มในไฟล์ HTML จะเรียกใช้ google.script.host.close เพื่อปิดอินเทอร์เฟซ

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ฟังก์ชัน ด้วยตนเองในตัวแก้ไขสคริปต์ หรือโหลดหน้าต่างสำหรับเครื่องมือแก้ไขเอกสาร ชีต หรือ ฟอร์มซ้ำ (ซึ่งจะปิดตัวแก้ไขสคริปต์) หลังจากนั้น เมนูที่กำหนดเองจะปรากฏภายในไม่กี่วินาที ทุกครั้งที่คุณเปิดไฟล์ หากต้องการดูอินเทอร์เฟซ ให้เลือกกล่องโต้ตอบ > เปิด