ज़्यादातर Editor ऐड-ऑन के लिए, डायलॉग विंडो और साइडबार पैनल, ऐड-ऑन के मुख्य यूज़र इंटरफ़ेस होते हैं. दोनों को स्टैंडर्ड एचटीएमएल और सीएसएस का इस्तेमाल करके पूरी तरह से पसंद के मुताबिक बनाया जा सकता है. साथ ही, जब उपयोगकर्ता साइडबार या डायलॉग के साथ इंटरैक्ट करता है, तब Apps Script फ़ंक्शन चलाने के लिए, Apps Script के क्लाइंट-सर्वर कम्यूनिकेशन मॉडल का इस्तेमाल किया जा सकता है. आपका ऐड-ऑन, कई साइडबार और डायलॉग तय कर सकता है. हालांकि, ऐड-ऑन एक बार में सिर्फ़ एक ही साइडबार या डायलॉग दिखा सकता है.
अगर आपको उपयोगकर्ता को एडिटर के साथ इंटरैक्ट करने से तब तक रोकना है, जब तक वह ऐड-ऑन इंटरफ़ेस में कोई विकल्प नहीं चुन लेता, तो डायलॉग का इस्तेमाल करें. अगर ऐसा नहीं करना है, तो साइडबार का इस्तेमाल करें.
डायलॉग
डायलॉग, विंडो पैनल होते हैं. ये मुख्य एडिटर के कॉन्टेंट पर ओवरले होते हैं. Apps Script के डायलॉग मोडल होते हैं. जब ये डायलॉग खुले होते हैं, तब उपयोगकर्ता एडिटर इंटरफ़ेस के अन्य एलिमेंट के साथ इंटरैक्ट नहीं कर सकता. डायलॉग के कॉन्टेंट और साइज़ को पसंद के मुताबिक बनाया जा सकता है.
ऐड-ऑन डायलॉग को Apps Script के कस्टम डायलॉग की तरह ही बनाया जाता है. इसके लिए, यह तरीका अपनाएं:
- एक स्क्रिप्ट प्रोजेक्ट फ़ाइल बनाएं. इसमें आपके डायलॉग का एचटीएमएल स्ट्रक्चर, सीएसएस, और क्लाइंट-साइड JavaScript के व्यवहार के बारे में बताया गया हो. डायलॉग तय करते समय, एडिटर ऐड-ऑन के स्टाइल गाइडलाइन देखें.
- अपने सर्वर-साइड कोड में, जहां आपको डायलॉग बॉक्स खोलना है वहां
HtmlService.createHtmlOutputFromFile(filename)को कॉल करें. इससे डायलॉग बॉक्स को दिखाने वालाHtmlOutputऑब्जेक्ट बन जाएगा. इसके अलावा, अगर टेंप्लेट वाला एचटीएमएल इस्तेमाल किया जा रहा है, तो टेंप्लेट जनरेट करने के लिएHtmlService.createTemplateFromFile(filename)को कॉल किया जा सकता है. इसके बाद, इसेHtmlOutputऑब्जेक्ट में बदलने के लिएHtmlTemplate.evaluate()को कॉल किया जा सकता है. - उस
HtmlOutputका इस्तेमाल करके डायलॉग दिखाने के लिए,Ui.showModalDialog(htmlOutput, dialogTitle)को कॉल करें.
डायलॉग खुले होने पर, सर्वर-साइड स्क्रिप्ट को निलंबित नहीं करते हैं. क्लाइंट-साइड JavaScript, google.script.run() और उससे जुड़े हैंडलर फ़ंक्शन का इस्तेमाल करके, सर्वर-साइड पर एसिंक्रोनस कॉल कर सकता है. ज़्यादा जानकारी के लिए, क्लाइंट से सर्वर के बीच होने वाला कम्यूनिकेशन लेख पढ़ें.
फ़ाइल खोलने के डायलॉग
फ़ाइल खोलने के डायलॉग पहले से बने हुए डायलॉग होते हैं. इनकी मदद से, आपके उपयोगकर्ता अपनी Google Drive से फ़ाइलें चुन सकते हैं. अपने ऐड-ऑन में फ़ाइल खोलने का डायलॉग जोड़ा जा सकता है. इसके लिए, आपको इसे डिज़ाइन करने की ज़रूरत नहीं है. हालांकि, इसके लिए कुछ और कॉन्फ़िगरेशन की ज़रूरत होती है. Google Picker API चालू करने के लिए, आपको ऐड-ऑन के Cloud Platform प्रोजेक्ट का ऐक्सेस भी चाहिए.
पूरी जानकारी के लिए, फ़ाइल खोलने के डायलॉग देखें.
साइडबार
साइडबार, एडिटर इंटरफ़ेस के दाईं ओर दिखने वाले पैनल होते हैं. ये ऐड-ऑन इंटरफ़ेस का सबसे सामान्य टाइप होता है. डायलॉग के उलट, साइडबार खुला होने पर भी एडिटर इंटरफ़ेस के अन्य एलिमेंट के साथ इंटरैक्ट किया जा सकता है. साइडबार की चौड़ाई तय होती है. हालांकि, इसके कॉन्टेंट को अपनी पसंद के मुताबिक बनाया जा सकता है.
Apps Script के कस्टम साइडबार की तरह ही, ऐड-ऑन साइडबार बनाए जाते हैं. इसके लिए, आम तौर पर यह तरीका सुझाया जाता है:
- एक स्क्रिप्ट प्रोजेक्ट फ़ाइल बनाएं. इसमें साइडबार के एचटीएमएल स्ट्रक्चर, सीएसएस, और क्लाइंट-साइड JavaScript के व्यवहार के बारे में बताया गया हो. साइडबार तय करते समय, एडिटर ऐड-ऑन के स्टाइल से जुड़े दिशा-निर्देश देखें.
अपने सर्वर-साइड कोड में, जहां आपको साइडबार खोलना है वहां
HtmlService.createHtmlOutputFromFile(filename)को कॉल करें. इससे साइडबार को दिखाने वालाHtmlOutputऑब्जेक्ट बन जाएगा. इसके अलावा, अगर टेंप्लेट वाला एचटीएमएल इस्तेमाल किया जा रहा है, तो टेंप्लेट जनरेट करने के लिएHtmlService.createTemplateFromFile(filename)को कॉल किया जा सकता है. इसके बाद, इसेHtmlOutputऑब्जेक्ट में बदलने के लिएHtmlTemplate.evaluate()को कॉल किया जा सकता है.उस
HtmlOutputका इस्तेमाल करके साइडबार दिखाने के लिए,Ui.showSidebar(htmlOutput)को कॉल करें.
साइडबार खुले होने पर, सर्वर-साइड स्क्रिप्ट को निलंबित नहीं करते हैं. क्लाइंट-साइड JavaScript, google.script.run() और उससे जुड़े हैंडलर फ़ंक्शन का इस्तेमाल करके, सर्वर-साइड पर एसिंक्रोनस कॉल कर सकता है. ज़्यादा जानकारी के लिए, क्लाइंट से सर्वर के बीच होने वाला कम्यूनिकेशन लेख पढ़ें.