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

ऐड-ऑन कार्ड का उदाहरण

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

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

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

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

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

कार्ड वाले इंटरफ़ेस के ये फ़ायदे हैं:

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

  • कार्ड-आधारित इंटरफ़ेस, डेस्कटॉप और मोबाइल डिवाइस, दोनों पर काम करते हैं. हालांकि, आपको सिर्फ़ एक बार इंटरफ़ेस तय करना होगा.

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

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

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

  • Google Workspace ऐड-ऑन "बिल्लियां" क्विकस्टार्ट

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

  • Google Workspace ऐड-ऑन: "अनुवाद करें"

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

  • Google Workspace ऐड-ऑन: "टीम की सूची"

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