דף זה תורגם על ידי 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>

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

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

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