שירות HTML: יצירה והצגה של HTML

שירות ה-HTML מאפשר להציג דפי אינטרנט שיכולים לקיים אינטראקציה עם פונקציות Apps Script בצד השרת. הוא שימושי במיוחד ליצירת אפליקציות אינטרנט או להוספת ממשקי משתמש מותאמים אישית ב-Google Docs, ב-Google Sheets וב-Forms. אפשר אפילו להשתמש בו כדי ליצור את גוף האימייל.

יצירת קובצי 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 Docs‏, Sheets‏, Google Slides או Forms

שירות ה-HTML יכול להציג תיבת דו-שיח או סרגל צד ב-Google Docs,‏ Sheets,‏ Slides או Forms אם הסקריפט משויך לקובץ. ב-Google Forms, ממשקי משתמש בהתאמה אישית גלויים רק לעורכים שפותחים את הטופס כדי לשנות אותו, ולא למשתמשים שפותחים את הטופס כדי להשיב עליו.

בניגוד לאפליקציית אינטרנט, סקריפט שיוצר ממשק משתמש למסמך, לגיליון אלקטרוני או לטופס לא צריך פונקציית 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 באופן ידני בכלי לעריכת סקריפטים או לטעון מחדש את החלון של עורך Docs,‏ Sheets או Forms (פעולה שסוגרת את הכלי לעריכת סקריפטים). אחרי זה, התפריט המותאם אישית יופיע תוך כמה שניות בכל פעם שתפתחו את הקובץ. כדי לראות את הממשק, בוחרים באפשרות תיבת דו-שיח > פתיחה.