HTML सेवा: HTML बनाएं और दिखाएं

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

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

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

वेब ऐप्लिकेशन के उलट, ऐसी स्क्रिप्ट जो दस्तावेज़, स्प्रेडशीट या फ़ॉर्म के लिए यूज़र इंटरफ़ेस बनाती है, उसके लिए खास तौर पर doGet() फ़ंक्शन की ज़रूरत नहीं होती है. आपको अपनी स्क्रिप्ट का कोई वर्शन सेव करने या उसे डिप्लॉय करने की ज़रूरत नहीं होती. इसके बजाय, यूज़र इंटरफ़ेस खोलने वाले फ़ंक्शन को चालू दस्तावेज़, फ़ॉर्म या स्प्रेडशीट के लिए, showModalDialog()) या showSidebar() मैथड के Ui ऑब्जेक्ट के तौर पर अपनी एचटीएमएल फ़ाइल को 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()फ़ंक्शन को स्क्रिप्ट संपादक में मैन्युअल रूप से चलाना होगा या दस्तावेज़ों, Sheets या फ़ॉर्म संपादक के लिए विंडो को फिर से लोड करना होगा (जो स्क्रिप्ट एडिटर को बंद कर देगा). उसके बाद, जब भी आप फ़ाइल खोलेंगे, तब कस्टम मेन्यू कुछ सेकंड के अंदर दिखेगा. इंटरफ़ेस देखने के लिए, डायलॉग &gt खोलें चुनें.