कार्ड पर आधारित इंटरफ़ेस

Google Workspace ऐड-ऑन, कार्ड पर आधारित होते हैं. एडिटर ऐड-ऑन एचटीएमएल पर आधारित होते हैं.

Google Workspace ऐड-ऑन कार्ड इंटरफ़ेस का उदाहरण.

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

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

कार्ड, कॉन्टेक्स्ट के हिसाब से नहीं या कॉन्टेक्स्ट के हिसाब से हो सकते हैं. कॉन्टेक्स्ट के हिसाब से कार्ड, उपयोगकर्ता को तब दिखाए जाते हैं, जब होस्ट ऐप्लिकेशन किसी खास कॉन्टेक्स्ट में होता है. जैसे, Gmail मैसेज या Google Calendar इवेंट खोलते समय. बिना किसी कॉन्टेक्स्ट वाले कार्ड (जैसे कि होम पेज) को उपयोगकर्ता को होस्ट के किसी खास कॉन्टेक्स्ट के बाहर दिखाया जाता है. उदाहरण के लिए, जब उपयोगकर्ता अपना Gmail इनबॉक्स, Google Drive का मुख्य फ़ोल्डर या Calendar देख रहा हो.

Google Apps Script में बनाए गए Google Workspace ऐड-ऑन, कार्ड से यूज़र इंटरफ़ेस बनाने के लिए, कार्ड सेवा का इस्तेमाल करते हैं. अन्य भाषाओं में बनाए गए ऐड-ऑन को, इंटरफ़ेस के लिए सही फ़ॉर्मैट वाला JSON दिखाना होगा, ताकि इंटरफ़ेस को कार्ड के तौर पर रेंडर किया जा सके.

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

कार्ड पर आधारित इंटरफ़ेस के ये फ़ायदे हैं:

  • कार्ड पर आधारित इंटरफ़ेस बनाने के लिए, एचटीएमएल या सीएसएस के बारे में जानकारी होना ज़रूरी नहीं है.
  • कार्ड और विजेट को अपने-आप स्टाइल किया जाता है, ताकि वे Google Workspace के उन ऐप्लिकेशन के साथ अच्छी तरह काम कर सकें जिनके लिए उन्हें बनाया गया है.
  • कार्ड पर आधारित इंटरफ़ेस, डेस्कटॉप और मोबाइल डिवाइसों, दोनों पर काम करते हैं. हालांकि, आपको इंटरफ़ेस को सिर्फ़ एक बार तय करना होगा.

Gmail ही ऐसा होस्ट ऐप्लिकेशन है जिसमें Google Workspace के ऐड-ऑन को मोबाइल पर इस्तेमाल किया जा सकता है.

कार्ड पर आधारित इंटरफ़ेस बनाना

कार्ड पर आधारित ऐड-ऑन बनाते समय, कुछ कॉन्सेप्ट और डिज़ाइन पैटर्न को समझना ज़रूरी है. कार्ड पर आधारित असरदार ऐड-ऑन बनाने के लिए, यहां दी गई गाइड पढ़ें:

कार्ड बनाते समय और यूज़र इंटरफ़ेस (यूआई) के व्यवहार को लागू करते समय, इन पेजों का रेफ़रंस दें. ऐड-ऑन लागू करते समय, आपको यहां दिए गए अन्य सैंपल भी काम के लग सकते हैं:

  • Google Workspace ऐड-ऑन "Cats" के लिए क्विकस्टार्ट गाइड

    इस ऐड-ऑन के सैंपल में, ऐड-ऑन का यूज़र इंटरफ़ेस (यूआई) दिखाया गया है. इसमें कई पेज और होम पेज हैं.

  • Google Workspace ऐड-ऑन: "Translate"

    इस ऐड-ऑन के सैंपल में, एक ऐसा ऐड-ऑन दिखाया गया है जिसकी मदद से उपयोगकर्ता, Docs, Sheets, और Slides में मौजूद टेक्स्ट का अनुवाद कर सकते हैं.

  • Google Workspace ऐड-ऑन: "Teams List"

    इस ऐड-ऑन के सैंपल में, Google Workspace के ऐड-ऑन का ज़्यादा जटिल सैंपल दिखाया गया है. इसमें Gmail मैसेज पाने वालों, Drive फ़ाइल के एडिटर या Calendar इवेंट में शामिल होने वाले लोगों के बारे में उपयोगकर्ता की जानकारी दिखाई गई है. इस ऐड-ऑन का इस्तेमाल सिर्फ़ किसी डोमेन में किया जा सकता है. ऐसा इसलिए, क्योंकि यह उपयोगकर्ता की जानकारी पाने के लिए Directory API का इस्तेमाल करता है.