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 के यूज़र इंटरफ़ेस के तौर पर एचटीएमएल दिखाना

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