HTML सेवा: HTML बनाना और उपलब्ध कराना

एचटीएमएल सेवा की मदद से, ऐसे वेब पेज दिखाए जा सकते हैं जो सर्वर-साइड के Apps Script फ़ंक्शन के साथ इंटरैक्ट कर सकते हैं. यह सुविधा, वेब ऐप्लिकेशन बनाने या Google Docs, Sheets, और Forms में कस्टम यूज़र इंटरफ़ेस जोड़ने के लिए खास तौर पर मददगार है. इसका इस्तेमाल, ईमेल का मुख्य हिस्सा जनरेट करने के लिए भी किया जा सकता है.

एचटीएमएल फ़ाइलें बनाना

अपने Apps Script प्रोजेक्ट में एचटीएमएल फ़ाइल जोड़ने के लिए, यह तरीका अपनाएं:

  1. Apps Script एडिटर खोलें.
  2. बाईं ओर, फ़ाइल जोड़ें > एचटीएमएल पर क्लिक करें.

एचटीएमएल फ़ाइल में, ज़्यादातर स्टैंडर्ड एचटीएमएल, सीएसएस, और क्लाइंट-साइड JavaScript को लिखा जा सकता है. पेज को एचटीएमएल5 के तौर पर दिखाया जाएगा. हालांकि, पाबंदियों में बताए गए मुताबिक, एचटीएमएल5 की कुछ बेहतर सुविधाएं उपलब्ध नहीं हैं.

आपकी फ़ाइल में टेंप्लेट स्क्रिप्ट भी शामिल हो सकती हैं. ये स्क्रिप्ट, PHP की तरह ही पेज को उपयोगकर्ता को भेजने से पहले सर्वर पर प्रोसेस की जाती हैं. इस बारे में टेंप्लेट वाले एचटीएमएल सेक्शन में बताया गया है.

एचटीएमएल को वेब ऐप्लिकेशन के तौर पर दिखाना

एचटीएमएल सेवा की मदद से वेब ऐप्लिकेशन बनाने के लिए, आपके कोड में एक 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 साइट में भी एम्बेड किया जा सकता है.

Google Docs, Sheets, Slides या Forms के यूज़र इंटरफ़ेस के तौर पर एचटीएमएल दिखाना

अगर आपकी स्क्रिप्ट, फ़ाइल के कंटेनर-बाउंड है, तो एचटीएमएल सेवा, Google Docs, Sheets, Slides या Forms में डायलॉग या साइडबार दिखा सकती है. (Google Forms में, पसंद के मुताबिक बनाए गए यूज़र इंटरफ़ेस सिर्फ़ उस एडिटर को दिखते हैं जो फ़ॉर्म में बदलाव करने के लिए उसे खोलता है. जवाब देने के लिए फ़ॉर्म खोलने वाले उपयोगकर्ता को ये इंटरफ़ेस नहीं दिखते.)

किसी वेब ऐप्लिकेशन के मुकाबले, दस्तावेज़, स्प्रेडशीट या फ़ॉर्म के लिए यूज़र इंटरफ़ेस बनाने वाली स्क्रिप्ट को खास तौर पर doGet() फ़ंक्शन की ज़रूरत नहीं होती. साथ ही, आपको अपनी स्क्रिप्ट का कोई वर्शन सेव करने या उसे डिप्लॉय करने की ज़रूरत नहीं होती. इसके बजाय, यूज़र इंटरफ़ेस खोलने वाले फ़ंक्शन को आपकी एचटीएमएल फ़ाइल को HtmlOutput ऑब्जेक्ट के तौर पर, ऐक्टिव दस्तावेज़, फ़ॉर्म या स्प्रेडशीट के लिए Ui ऑब्जेक्ट के showModalDialog()) या showSidebar() तरीकों को पास करना होगा.

इन उदाहरणों में, सुविधाओं को आसानी से इस्तेमाल करने के लिए कुछ अतिरिक्त सुविधाएं शामिल हैं: onOpen() फ़ंक्शन, कस्टम मेन्यू बनाता है, जिससे इंटरफ़ेस को आसानी से खोला जा सकता है. साथ ही, एचटीएमएल फ़ाइल में मौजूद बटन, इंटरफ़ेस को बंद करने के लिए google.script.host एपीआई के close() खास तरीके को लागू करता है.

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 एडिटर की विंडो को फिर से लोड करना होगा. इससे स्क्रिप्ट एडिटर बंद हो जाएगा. इसके बाद, हर बार फ़ाइल खोलने पर, कस्टम मेन्यू कुछ ही सेकंड में दिखने लगेगा. इंटरफ़ेस देखने के लिए, डायलॉग > खोलें को चुनें.