שירות 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>

אחרי שמגדירים את ה-framework, כל מה שצריך לעשות הוא לשמור גרסה של הסקריפט ואז לפרוס את הסקריפט כאפליקציית אינטרנט.

אחרי שהסקריפט נפרס כאפליקציית אינטרנט, אפשר גם להטמיע אותו באתר שנוצר באמצעות Google Sites.

שימוש ב-HTML בתור ממשק משתמש של Google Docs , Sheets , Slides או Forms

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

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