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

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

สร้างไฟล์ HTML

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

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

ภายในไฟล์ HTML คุณจะเขียน HTML, CSS และฝั่งไคลเอ็นต์แบบมาตรฐานส่วนใหญ่ได้ JavaScript หน้าเว็บนี้จะแสดงเป็น 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 เอกสาร, ชีต, สไลด์ หรือฟอร์ม

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

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

ตัวอย่างเหล่านี้ประกอบด้วยฟีเจอร์พิเศษ 2-3 รายการเพื่อความสะดวก: onOpen() จะสร้างเมนูที่กำหนดเองเพื่อช่วยให้ เพื่อเปิดอินเทอร์เฟซ และปุ่มในไฟล์ HTML จะแสดงขึ้นมา close()เมธอดของฟังก์ชัน google.script.host API เพื่อปิด ของ Google

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 วินาที ทุกครั้งที่คุณเปิดไฟล์ เลือกกล่องโต้ตอบ > เปิดเพื่อดูข้อมูล ของ Google