سرویس HTML: ایجاد و سرویس HTML

سرویس HTML به شما امکان می دهد صفحات وب را ارائه دهید که می توانند با عملکردهای برنامه های اسکریپت سمت سرور تعامل داشته باشند. این به ویژه برای ساخت برنامه های وب یا افزودن رابط های کاربری سفارشی در Google Docs، Sheets و Forms مفید است. حتی می توانید از آن برای تولید متن ایمیل استفاده کنید.

فایل های HTML ایجاد کنید

برای افزودن یک فایل HTML به پروژه Apps Script خود، این مراحل را دنبال کنید:

  1. ویرایشگر Apps Script را باز کنید.
  2. در سمت چپ، روی Add a file > HTML کلیک کنید.

در فایل HTML، می توانید اکثر استانداردهای HTML، CSS و جاوا اسکریپت سمت کلاینت را بنویسید. این صفحه به‌عنوان 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، رابط‌های کاربری سفارشی فقط برای ویرایشگری قابل مشاهده است که فرم را برای تغییر آن باز می‌کند، نه برای کاربری که فرم را برای پاسخگویی باز می‌کند.)

بر خلاف یک برنامه وب، اسکریپتی که یک رابط کاربری برای یک سند، صفحه گسترده یا فرم ایجاد می کند، به طور خاص به تابع 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 را انتخاب کنید.