Google Apps Script के ऐसे प्रोजेक्ट जो Google Docs, Google Sheets या Google Forms से जुड़े होते हैं वे उपयोगकर्ता इंटरफ़ेस के एलिमेंट दिखा सकते हैं. जैसे, पहले से बनी सूचनाएं, प्रॉम्प्ट, सूचनाएं, डायलॉग बॉक्स, और साइडबार. इन एलिमेंट में आम तौर पर कस्टम एचटीएमएल सेवा का कॉन्टेंट होता है. इन्हें अक्सर मेन्यू आइटम से खोला जाता है. Forms में, उपयोगकर्ता इंटरफ़ेस वाले एलिमेंट सिर्फ़ उस एडिटर को दिखते हैं जो फ़ॉर्म में बदलाव करने के लिए उसे खोलता है. ये एलिमेंट, जवाब देने वाले व्यक्ति को नहीं दिखते.
चेतावनी वाले डायलॉग बॉक्स
सूचना, पहले से बना हुआ एक डायलॉग होता है. यह Docs, Sheets, Slides या Forms के एडिटर में खुलता है. इसमें एक मैसेज और ठीक है बटन दिखता है. हालांकि, टाइटल और अन्य बटन दिखाना ज़रूरी नहीं है. यह वेब ब्राउज़र में क्लाइंट-साइड JavaScript में window.alert को कॉल करने जैसा है.
डायलॉग खुला होने पर, सूचनाएं सर्वर-साइड स्क्रिप्ट को निलंबित कर देती हैं. उपयोगकर्ता के डायलॉग बॉक्स बंद करने के बाद स्क्रिप्ट फिर से शुरू हो जाती है. हालांकि, JDBC कनेक्शन निलंबित होने के दौरान बने नहीं रहते.
यहां दिए गए उदाहरण में दिखाया गया है कि Docs, Forms, Slides, और Sheets, सभी Ui.alert तरीके का इस्तेमाल करते हैं. यह तरीका तीन वैरिएंट में उपलब्ध है. डिफ़ॉल्ट OK बटन को बदलने के लिए, buttons आर्ग्युमेंट के तौर पर Ui.ButtonSet enum से कोई वैल्यू पास करें. यह पता लगाने के लिए कि उपयोगकर्ता ने किस बटन पर क्लिक किया, alert की रिटर्न वैल्यू की तुलना Ui.Button enum से करें.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.createMenu("Custom Menu")
.addItem("Show alert", "showAlert")
.addToUi();
}
function showAlert() {
const ui = SpreadsheetApp.getUi(); // Same variations.
const result = ui.alert(
"Please confirm",
"Are you sure you want to continue?",
ui.ButtonSet.YES_NO,
);
// Process the user's response.
if (result === ui.Button.YES) {
// User clicked "Yes".
ui.alert("Confirmation received.");
} else {
// User clicked "No" or X in the title bar.
ui.alert("Permission denied.");
}
}
डायलॉग बॉक्स प्रॉम्प्ट करना
प्रॉम्प्ट, पहले से बना हुआ एक डायलॉग होता है. यह Docs, Sheets, Slides या Forms के एडिटर में खुलता है. इसमें एक मैसेज, टेक्स्ट डालने के लिए फ़ील्ड, और ठीक है बटन दिखता है. हालांकि, टाइटल और अन्य बटन दिखाना ज़रूरी नहीं है. यह वेब ब्राउज़र में क्लाइंट-साइड JavaScript में window.prompt को कॉल करने जैसा है.
डायलॉग बॉक्स खुला होने पर, प्रॉम्प्ट सर्वर-साइड स्क्रिप्ट को निलंबित कर देते हैं. उपयोगकर्ता के डायलॉग बॉक्स बंद करने के बाद स्क्रिप्ट फिर से शुरू हो जाती है. हालांकि, JDBC कनेक्शन निलंबित होने के दौरान बने नहीं रहते.
नीचे दिए गए उदाहरण में दिखाया गया है कि Docs, Forms, Slides, और Sheets, सभी Ui.prompt तरीके का इस्तेमाल करते हैं. यह तरीका तीन वैरिएंट में उपलब्ध है. डिफ़ॉल्ट OK बटन को बदलने के लिए, buttons आर्ग्युमेंट के तौर पर Ui.ButtonSet enum से कोई वैल्यू पास करें. उपयोगकर्ता की प्रतिक्रिया का आकलन करने के लिए, prompt के लिए रिटर्न वैल्यू कैप्चर करें. इसके बाद, उपयोगकर्ता के इनपुट को वापस पाने के लिए PromptResponse.getResponseText को कॉल करें. साथ ही, PromptResponse.getSelectedButton के लिए रिटर्न वैल्यू की तुलना Ui.Button enum से करें.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.createMenu("Custom Menu")
.addItem("Show prompt", "showPrompt")
.addToUi();
}
function showPrompt() {
const ui = SpreadsheetApp.getUi(); // Same variations.
const result = ui.prompt(
"Let's get to know each other!",
"Please enter your name:",
ui.ButtonSet.OK_CANCEL,
);
// Process the user's response.
const button = result.getSelectedButton();
const text = result.getResponseText();
if (button === ui.Button.OK) {
// User clicked "OK".
ui.alert("Your name is " + text + ".");
} else if (button === ui.Button.CANCEL) {
// User clicked "Cancel".
ui.alert("I didn't get your name.");
} else if (button === ui.Button.CLOSE) {
// User clicked X in the title bar.
ui.alert("You closed the dialog.");
}
}
स्प्रेडशीट में दिखने वाली सूचनाएं
"सूचना", Sheets एडिटर के सबसे नीचे दाएं कोने में मौजूद एक छोटी डायलॉग विंडो होती है. इसमें एक मैसेज दिखता है, लेकिन स्क्रिप्ट को निलंबित नहीं किया जाता. यह स्टेटस मैसेज या अपडेट दिखाने का एक अच्छा तरीका है. इसके लिए, उपयोगकर्ता के इंटरैक्शन की ज़रूरत नहीं होती.
नीचे दिए गए उदाहरण में दिखाया गया है कि Sheets, Spreadsheet.toast तरीके का इस्तेमाल करता है.
सूचनाएं सिर्फ़ Sheets में उपलब्ध होती हैं.
function showToast() {
SpreadsheetApp.getActiveSpreadsheet().toast("Task completed successfully.");
}
कस्टम डायलॉग
कस्टम डायलॉग, Docs, Sheets, Slides या Forms के एडिटर में HTML सेवा का यूज़र इंटरफ़ेस दिखा सकता है.
डायलॉग खुला होने पर, कस्टम डायलॉग सर्वर-साइड स्क्रिप्ट को निलंबित नहीं करते हैं.
ये असिंक्रोनस होते हैं. इसलिए, सर्वर-साइड फ़ंक्शन जो डायलॉग बॉक्स खोलता है, वह तुरंत पूरा हो जाता है. कस्टम डायलॉग से सर्वर पर डेटा वापस भेजने के लिए, अपने क्लाइंट-साइड कोड में google.script API का इस्तेमाल करें.
डायलॉग बॉक्स को बंद करने के लिए, एचटीएमएल सेवा वाले इंटरफ़ेस के क्लाइंट साइड में google.script.host.close को कॉल किया जा सकता है. डायलॉग को अन्य इंटरफ़ेस से बंद नहीं किया जा सकता. इसे सिर्फ़ उपयोगकर्ता या खुद से बंद किया जा सकता है.
नीचे दिए गए उदाहरण में दिखाया गया है कि Docs, Forms, Slides, और Sheets, सभी डायलॉग बॉक्स खोलने के लिए Ui.showModalDialog तरीके का इस्तेमाल करते हैं.
Code.gs
function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Custom Menu') .addItem('Show dialog', 'showDialog') .addToUi(); } function showDialog() { const html = HtmlService.createHtmlOutputFromFile('Page') .setWidth(400) .setHeight(300); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showModalDialog(html, 'My custom dialog'); }
Page.html
Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
कस्टम साइडबार
साइडबार, Docs, Forms, Slides, और Sheets के एडिटर में एचटीएमएल सेवा का यूज़र इंटरफ़ेस दिखा सकता है.
डायलॉग खुला होने पर, साइडबार सर्वर-साइड स्क्रिप्ट को निलंबित नहीं करते. क्लाइंट-साइड कॉम्पोनेंट, सर्वर-साइड स्क्रिप्ट को एसिंक्रोनस कॉल कर सकता है. इसके लिए, HTML सेवा वाले इंटरफ़ेस के लिए google.script एपीआई का इस्तेमाल किया जाता है.
एचटीएमएल सेवा वाले इंटरफ़ेस के क्लाइंट साइड में, google.script.host.close को कॉल करके साइडबार को बंद किया जा सकता है. साइडबार को अन्य इंटरफ़ेस से बंद नहीं किया जा सकता. इसे सिर्फ़ उपयोगकर्ता या खुद से बंद किया जा सकता है.
यहां दिए गए उदाहरण में दिखाया गया है कि Docs, Forms, Slides, और Sheets, साइडबार खोलने के लिए Ui.showSidebar तरीके का इस्तेमाल करते हैं.
Code.gs
function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Custom Menu') .addItem('Show sidebar', 'showSidebar') .addToUi(); } function showSidebar() { const html = HtmlService.createHtmlOutputFromFile('Page') .setTitle('My custom sidebar'); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showSidebar(html); }
Page.html
Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
फ़ाइल खोलने के डायलॉग
Google Picker एक JavaScript API है. इसकी मदद से, उपयोगकर्ता Google Drive में मौजूद फ़ाइलें चुन सकते हैं या उन्हें अपलोड कर सकते हैं. HTML सेवा में Google Picker लाइब्रेरी का इस्तेमाल करके, पसंद के मुताबिक बनाया गया एक ऐसा डायलॉग बनाएं जिससे उपयोगकर्ता मौजूदा फ़ाइलें चुन सकें या नई फ़ाइलें अपलोड कर सकें. इसके बाद, चुने गए आइटम को वापस अपनी स्क्रिप्ट में भेजें.
ज़रूरी शर्तें
Google Apps Script के साथ Google Picker का इस्तेमाल करने के लिए, कई ज़रूरी शर्तें पूरी करनी होती हैं:
Google Picker के लिए, अपना एनवायरमेंट सेट अप करें.
आपके स्क्रिप्ट प्रोजेक्ट में, स्टैंडर्ड Google Cloud प्रोजेक्ट का इस्तेमाल किया जाना चाहिए.
अगर
drive.fileस्कोप का इस्तेमाल किया जा रहा है, तोPickerBuilder.setAppIdको वही Cloud प्रोजेक्ट नंबर पास करें.Apps Script के प्रोजेक्ट मेनिफ़ेस्ट में, Google Picker API के लिए ज़रूरी अनुमति के स्कोप के बारे में जानकारी दी जानी चाहिए, ताकि
ScriptApp.getOAuthToken,PickerBuilder.setOauthtokenके लिए सही टोकन दे सके.PickerBuilder.setDeveloperKeyमें सेट किए गए एपीआई पासकोड को Apps Script तक सीमित करें. ऐप्लिकेशन से जुड़ी पाबंदियां में जाकर, यह तरीका अपनाएं:- एचटीटीपी के रेफ़रल देने वाले (वेबसाइटें) चुनें.
- वेबसाइट पाबंदियां में जाकर, कोई आइटम जोड़ें पर क्लिक करें.
- रेफ़र करने वाला पर क्लिक करें और
*.google.comडालें. - कोई दूसरा आइटम जोड़ें और रेफ़रर के तौर पर
*.googleusercontent.comडालें. - हो गया पर क्लिक करें.
PickerBuilder.setOriginपर कॉल करें.
उदाहरण
इस उदाहरण में, Apps Script में Google Picker को दिखाया गया है.