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

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

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

डायलॉग

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

ऐड-ऑन डायलॉग बनाने का तरीका, Apps Script के कस्टम डायलॉग बनाने के तरीके जैसा ही होता है. आम तौर पर, यह तरीका अपनाने का सुझाव दिया जाता है:

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

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

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

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

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

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

ऐड-ऑन साइडबार बनाने का तरीका, Apps Script के कस्टम साइडबार बनाने के तरीके जैसा ही है. आम तौर पर, यह तरीका अपनाने का सुझाव दिया जाता है:

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

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

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

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