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 Site में भी एम्बेड किया जा सकता है.

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

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

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

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