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