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

שירות ה-HTML מאפשר להציג דפי אינטרנט שיכולים לקיים אינטראקציה עם פונקציות Apps Script בצד השרת. הוא שימושי במיוחד לבניית אפליקציות אינטרנט או להוספת ממשקי משתמש מותאמים אישית ב-Google Docs,‏ 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.

הצגת HTML כממשק משתמש של Google Docs‏, Sheets‏, Slides או Forms

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

בניגוד לאפליקציית אינטרנט, סקריפט שיוצר ממשק משתמש למסמך, לגיליון אלקטרוני או לטופס לא צריך פונקציה doGet() ספציפית, ואין צורך לשמור גרסה של הסקריפט או לפרוס אותו. במקום זאת, הפונקציה שפותחת את ממשק המשתמש צריכה להעביר את קובץ ה-HTML כאובייקט HtmlOutput לשיטות showModalDialog()) או showSidebar() של האובייקט Ui עבור המסמך, הטופס או הגיליון האלקטרוני הפעילים.

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