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

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

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

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

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

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

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