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

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

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

डायलॉग

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

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

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

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

फ़ाइल खोलने के लिए डायलॉग बॉक्स

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

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

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

Apps Script कस्टम साइडबार की तरह ही ऐड-ऑन साइडबार भी बनाए जा सकते हैं. सामान्य तौर पर सुझाया गया तरीका यह है:

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

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

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

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