خدمة HTML: إنشاء وعرض HTML

تتيح لك خدمة HTML عرض صفحات ويب يمكنها التفاعل مع دوال Apps Script من جهة الخادم. وهي مفيدة بشكل خاص لإنشاء تطبيقات ويب أو إضافة واجهات مستخدم مخصّصة في "مستندات Google" و"جداول بيانات Google" و"نماذج Google". يمكنك أيضًا استخدامه لإنشاء نص رسالة إلكترونية.

إنشاء ملفات HTML

لإضافة ملف HTML إلى مشروع Apps Script، اتّبِع الخطوات التالية:

  1. افتح أداة تعديل النصوص البرمجية لتطبيقات Google.
  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".

عرض صفحات HTML كواجهة مستخدم في "مستندات Google" أو "جداول بيانات Google" أو "العروض التقديمية من Google" أو "نماذج Google"

يمكن لخدمة HTML عرض مربّع حوار أو لوحة جانبية في "مستندات Google" أو "جداول بيانات Google" أو "العروض التقديمية من Google" أو "نماذج Google" إذا كان النص البرمجي مرتبطًا بالحاوي بالملف. (في "نماذج Google"، لا تظهر واجهات المستخدم المخصّصة إلا للمحرِّر الذي يفتح النموذج بهدف تعديله، وليس للمستخدم الذي يفتح النموذج للردّ).

على عكس تطبيق الويب، لا يحتاج النص البرمجي الذي ينشئ واجهة مستخدم لمستند أو جدول بيانات أو نموذج إلى دالة doGet() على وجه التحديد، ولا تحتاج إلى حفظ إصدار من النص البرمجي أو نشره. بدلاً من ذلك، يجب أن تمرِّر الدالة التي تفتح واجهة المستخدم ملف HTML كعنصر HtmlOutput إلى أسلوبَي showModalDialog()) أو showSidebar() لعنصر Ui للمستند أو النموذج أو جدول البيانات النشط.

تتضمّن هذه الأمثلة بعض الميزات الإضافية لتسهيل الاستخدام: تنشئ الدالة onOpen() قائمة مخصّصة تسهّل فتح الواجهة، ويُستخدَم الزر في ملف HTML لاستدعاء close() الخاصة 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() يدويًا في محرِّر النصوص البرمجية أو إعادة تحميل نافذة محرِّر "مستندات Google" أو "جداول بيانات Google" أو "نماذج Google" (سيؤدي ذلك إلى إغلاق محرر النصوص البرمجية). بعد ذلك، من المفترض أن تظهر القائمة المخصّصة خلال بضع ثوانٍ في كل مرة تفتح فيها الملف. اختَر مربّع الحوار > فتح للاطّلاع على الواجهة.