דף זה תורגם על ידי Cloud Translation API.

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

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

יצירת קובצי HTML

כך מוסיפים קובץ HTML לפרויקט ב-Apps Script:

פותחים את עורך Apps Script.
בצד ימין, לוחצים על 'הוספת קובץ' > 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 כדי להציג את הממשק.