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

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

إنشاء ملفات HTML

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

  1. افتح أداة تعديل النصوص البرمجية في Apps Script.
  2. على يمين الصفحة، انقر على "إضافة ملف" > HTML.

يمكنك كتابة معظم رموز HTML وCSS وJavaScript العادية من جهة العميل ضمن ملف HTML. سيتم عرض الصفحة بتنسيق 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" إذا كان النص البرمجي مرتبطًا بالحاوية بالملف. (في &quot;نماذج Google&quot;، لا تظهر واجهات المستخدم المخصّصة إلا للمحرّر الذي يفتح النموذج لتعديله، وليس للمستخدم الذي يفتح النموذج للردّ عليه).

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