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

הצגת 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 כדי לראות את הממשק.