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

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

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

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

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

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

आपकी फ़ाइल में, सर्वर पर प्रोसेस होने वाले टेंप्लेट स्क्रिप्टलेट भी शामिल हो सकते हैं से पहले, जैसा कि टेंप्लेट किए गए एचटीएमएल सेक्शन में बताया गया है.

एचटीएमएल को वेब ऐप्लिकेशन के तौर पर इस्तेमाल करना

एचटीएमएल सेवा का इस्तेमाल करके वेब ऐप्लिकेशन बनाने के लिए, आपके कोड में 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 ने showModalDialog()) या showSidebar() तरीके चालू दस्तावेज़, फ़ॉर्म के लिए Ui ऑब्जेक्ट या स्प्रेडशीट.

सुविधा के लिए इन उदाहरणों में कुछ और सुविधाएं भी शामिल हैं: onOpen() फ़ंक्शन एक कस्टम मेन्यू बनाता है, जो से लिंक किया गया है, और HTML फ़ाइल का बटन एक close() तरीका google.script.host API को बंद करने के लिए इंटरफ़ेस पर कॉपी करने की सुविधा मिलती है.

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