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

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

ایجاد فایل‌های HTML

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

  1. ویرایشگر اسکریپت برنامه‌ها را باز کنید.
  2. در سمت چپ، روی افزودن فایل > HTML کلیک کنید.

درون فایل HTML، می‌توانید اکثر کدهای استاندارد HTML، CSS و جاوا اسکریپت سمت کلاینت را بنویسید. صفحه به صورت HTML5 ارائه می‌شود، اگرچه برخی از ویژگی‌های پیشرفته HTML5، همانطور که در بخش محدودیت‌ها توضیح داده شده است، در دسترس نیستند.

فایل شما همچنین می‌تواند شامل اسکریپت‌های قالب باشد که قبل از ارسال صفحه به کاربر - مشابه PHP - در سرور پردازش می‌شوند، همانطور که در بخش مربوط به HTML قالب‌بندی شده توضیح داده شده است.

ارائه HTML به عنوان یک برنامه وب

برای ایجاد یک برنامه وب با سرویس HTML، کد شما باید شامل یک تابع doGet باشد که به اسکریپت می‌گوید چگونه صفحه را ارائه دهد. این تابع باید یک شیء HtmlOutput را برگرداند، همانطور که در این مثال نشان داده شده است.

کد.gs 

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

فهرست.html 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

وقتی آن چارچوب اولیه ایجاد شد، تنها کاری که باید انجام دهید این است که یک نسخه از اسکریپت خود را ذخیره کنید ، سپس اسکریپت خود را به عنوان یک برنامه وب مستقر کنید .

پس از اینکه اسکریپت به عنوان یک برنامه وب مستقر شد، می‌توانید آن را در یک Google Site نیز جاسازی کنید .

HTML را به عنوان رابط کاربری Google Docs، Sheets، Google Slides یا Forms ارائه دهید

سرویس HTML می‌تواند یک کادر محاوره‌ای یا نوار کناری را در Google Docs، Sheets، Slides یا Forms نمایش دهد، اگر اسکریپت شما به فایل متصل باشد. در Google Forms، رابط‌های کاربری سفارشی فقط برای ویرایشگری که فرم را برای تغییر آن باز می‌کند قابل مشاهده هستند، نه برای کاربری که فرم را برای پاسخ دادن باز می‌کند.

برخلاف یک برنامه وب، اسکریپتی که رابط کاربری برای یک سند، صفحه گسترده یا فرم ایجاد می‌کند، به طور خاص به تابع doGet نیاز ندارد و شما نیازی به ذخیره نسخه‌ای از اسکریپت خود یا استقرار آن ندارید. در عوض، تابعی که رابط کاربری را باز می‌کند باید فایل HTML شما را به عنوان یک شیء HtmlOutput به متدهای showModalDialog یا showSidebar شیء Ui برای سند، فرم یا صفحه گسترده فعال ارسال کند.

این مثال‌ها شامل چند ویژگی اضافی برای راحتی هستند: تابع onOpen یک منوی سفارشی ایجاد می‌کند که به شما در باز کردن رابط کمک می‌کند و دکمه موجود در فایل HTML، google.script.host.close را برای بستن رابط فراخوانی می‌کند.

کد.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');
}

فهرست.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 را انتخاب کنید.