שירות 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 מפעיל שיטה מיוחדת close() של ה-API google.script.host כדי לסגור את הממשק.

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