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

एचटीएमएल सेवा की मदद से, ऐसे वेब पेज दिखाए जा सकते हैं जो सर्वर-साइड Apps Script फ़ंक्शन के साथ इंटरैक्ट कर सकते हैं. यह खास तौर पर वेब ऐप्लिकेशन बनाने या Google Docs, Google 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, Google Slides या Forms के यूज़र इंटरफ़ेस (यूआई) के तौर पर एचटीएमएल दिखाना

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

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