Editor ऐड-ऑन के लिए डायलॉग और साइडबार

ज़्यादातर एडिटर ऐड-ऑनके लिए, डायलॉग विंडो और साइडबार पैनल, ऐड-ऑन के मुख्य यूज़र इंटरफ़ेस होते हैं. इन दोनों को स्टैंडर्ड एचटीएमएल और सीएसएस का इस्तेमाल करके, पूरी तरह से पसंद के मुताबिक बनाया जा सकता है . साथ ही, Google Apps Script's क्लाइंट-सर्वर कम्यूनिकेशन मॉडल का इस्तेमाल करके, Apps Script के फ़ंक्शन चलाए जा सकते हैं. ऐसा तब किया जा सकता है, जब उपयोगकर्ता साइडबार या डायलॉग से इंटरैक्ट करता है. आपका ऐड-ऑन, कई साइडबार और डायलॉग तय कर सकता है. हालांकि, ऐड-ऑन एक बार में सिर्फ़ एक ही साइडबार या डायलॉग दिखा सकता है.

अगर आपको उपयोगकर्ता को एडिटर से तब तक इंटरैक्ट करने से रोकना है, जब तक वह ऐड-ऑन इंटरफ़ेस में कोई विकल्प नहीं चुन लेता, तो डायलॉग का इस्तेमाल करें. इसके अलावा, साइडबार का इस्तेमाल करें.

डायलॉग

डायलॉग, विंडो पैनल होते हैं. ये एडिटर के मुख्य कॉन्टेंट पर दिखते हैं. Apps Script के डायलॉग, मॉडल होते हैं. जब ये खुले होते हैं, तब उपयोगकर्ता एडिटर इंटरफ़ेस के अन्य एलिमेंट से इंटरैक्ट नहीं कर सकता. डायलॉग के कॉन्टेंट और साइज़ को अपनी पसंद के मुताबिक बनाया जा सकता है.

ऐड-ऑन के डायलॉग, Apps Script कस्टम डायलॉग की तरह ही बनाए जाते हैं. डायलॉग बनाने का सामान्य तरीका यहां दिया गया है:

1. एक स्क्रिप्ट प्रोजेक्ट फ़ाइल बनाएं. इसमें डायलॉग का एचटीएमएल स्ट्रक्चर, सीएसएस, और क्लाइंट-साइड JavaScript का व्यवहार तय करें. एडिटर ऐड-ऑन के स्टाइल से जुड़े दिशा-निर्देश देखें.
2. सर्वर-साइड कोड में, जहां आपको डायलॉग खोलना है वहां HtmlService.createHtmlOutputFromFile को कॉल करें. इससे डायलॉग को दिखाने वाला HtmlOutput ऑब्जेक्ट बन जाएगा. इसके अलावा, अगर आप टेंप्लेट वाले एचटीएमएल का इस्तेमाल कर रहे हैं, तो HtmlService.createTemplateFromFile को कॉल करके एक टेंप्लेट जनरेट करें. इसके बाद, HtmlTemplate.evaluate को कॉल करके, इसे HtmlOutput ऑब्जेक्ट में बदलें.
3. दिखाने के लिए, Ui.showModalDialog को कॉल करें, उसका इस्तेमाल करके HtmlOutput.

डायलॉग खुले होने पर, सर्वर-साइड स्क्रिप्ट को निलंबित नहीं करते. क्लाइंट-साइड JavaScript, google.script.run और उससे जुड़े हैंडलर फ़ंक्शन का इस्तेमाल करके, सर्वर-साइड पर एसिंक्रोनस कॉल कर सकती है. ज़्यादा जानकारी के लिए, क्लाइंट-टू-सर्वर कम्यूनिकेशन देखें.

फ़ाइल खोलने के डायलॉग

फ़ाइल खोलने के डायलॉग, पहले से बने डायलॉग होते हैं. इनकी मदद से, आपके उपयोगकर्ता अपने Google Drive से फ़ाइलें चुन सकते हैं. फ़ाइल खोलने का डायलॉग, अपने ऐड-ऑन में डिज़ाइन किए बिना जोड़ा जा सकता है. हालांकि, इसके लिए कुछ अतिरिक्त कॉन्फ़िगरेशन की ज़रूरत होती है. Google Picker API को चालू करने के लिए, आपको ऐड-ऑन के Cloud Platform प्रोजेक्ट का ऐक्सेस भी चाहिए.

ज़्यादा जानकारी के लिए, फ़ाइल खोलने के डायलॉग देखें.

साइडबार

साइडबार, ऐसे पैनल होते हैं जो एडिटर इंटरफ़ेस की दाईं ओर दिखते हैं. ये ऐड-ऑन इंटरफ़ेस का सबसे आम टाइप हैं. डायलॉग के उलट, साइडबार खुले होने पर भी एडिटर इंटरफ़ेस के अन्य एलिमेंट से इंटरैक्ट किया जा सकता है. साइडबार की चौड़ाई तय होती है. हालांकि, इसके कॉन्टेंट को अपनी पसंद के मुताबिक बनाया जा सकता है.

ऐड-ऑन के साइडबार, Apps Script कस्टम साइडबार की तरह ही बनाए जाते हैं. साइडबार बनाने का सामान्य तरीका यहां दिया गया है:

1. एक स्क्रिप्ट प्रोजेक्ट फ़ाइल बनाएं. इसमें साइडबार का एचटीएमएल स्ट्रक्चर, सीएसएस, और क्लाइंट-साइड JavaScript का व्यवहार तय करें. साइडबार तय करते समय, एडिटर ऐड-ऑन के स्टाइल से जुड़े दिशा-निर्देश देखें.

2. सर्वर-साइड कोड में, जहां आपको साइडबार खोलना है वहां HtmlService.createHtmlOutputFromFile को कॉल करें. इससे साइडबार को दिखाने वाला HtmlOutput ऑब्जेक्ट बन जाएगा. इसके अलावा, अगर आप टेंप्लेट वाले एचटीएमएल का इस्तेमाल कर रहे हैं, तो HtmlService.createTemplateFromFile को कॉल करके एक टेंप्लेट जनरेट करें. इसके बाद, HtmlTemplate.evaluate को कॉल करके, इसे HtmlOutput ऑब्जेक्ट में बदलें.

   ऐड-ऑन के साइडबार की चौड़ाई 300 पिक्सल होती है . इसे HtmlOutput.setWidth को कॉल करके बदला नहीं जा सकता.

3. Ui.showSidebar का इस्तेमाल करके साइडबार दिखाने के लिए, HtmlOutput को कॉल करें.

साइडबार खुले होने पर, सर्वर-साइड स्क्रिप्ट को निलंबित नहीं करते. क्लाइंट-साइड JavaScript, google.script.run और उससे जुड़े हैंडलर फ़ंक्शन का इस्तेमाल करके, सर्वर-साइड पर एसिंक्रोनस कॉल कर सकती है. ज़्यादा जानकारी के लिए, क्लाइंट-टू-सर्वर कम्यूनिकेशन देखें.