कार्ड पर आधारित ऐड-ऑन, साइडबार में एक पैनल के तौर पर दिखता है. मोबाइल पर, यह मेन्यू से ऐक्सेस की जाने वाली दूसरी गतिविधि वाली विंडो के तौर पर दिखता है. ऐड-ऑन में सबसे ऊपर एक टूलबार होता है. इससे ऐड-ऑन की पहचान होती है और कार्ड दिखता है. यह ऐड-ऑन के यूज़र इंटरफ़ेस (यूआई) का "पेज" होता है. Apps Script, प्रोजेक्ट कोड में कार्ड को Card ऑब्जेक्ट का इस्तेमाल करके दिखाता है.
कार्ड की संरचना
कार्ड, यूज़र इंटरफ़ेस (यूआई) एलिमेंट का एक ग्रुप होता है, जिसे डिज़ाइन किया जाता है. कार्ड में ये सेक्शन होते हैं:
- कार्ड का हेडर. इससे कार्ड की पहचान होती है. इसमें टाइटल टेक्स्ट होता है. साथ ही, इसमें सबटाइटल और आइकॉन भी हो सकता है.
एक या उससे ज़्यादा कार्ड सेक्शन. ये कार्ड के यूज़र इंटरफ़ेस (यूआई) वाले हिस्से के सब-डिविज़न हैं. किसी सेक्शन में, विकल्प के तौर पर टेक्स्ट सेक्शन हेडर हो सकता है. कार्ड के सेक्शन को कार्ड पर, हॉरिज़ॉन्टल रूल से अलग किया जाता है. अगर कार्ड सेक्शन बहुत बड़ा है, तो वह अपने-आप छोटा हो जाता है. लोग इसे अपनी ज़रूरत के हिसाब से बड़ा या छोटा कर सकते हैं. एक कार्ड में 100 से ज़्यादा कार्ड सेक्शन नहीं हो सकते. साथ ही, बेहतर परफ़ॉर्मेंस के लिए, कार्ड में कुछ ही सेक्शन होने चाहिए.
हर कार्ड सेक्शन में एक या उससे ज़्यादा यूज़र इंटरफ़ेस (यूआई) विजेट होते हैं. विजेट, उपयोगकर्ता को जानकारी या इंटरैक्टिव कंट्रोल उपलब्ध कराते हैं. कार्ड और कार्ड सेक्शन, स्ट्रक्चरल विजेट होते हैं. इसलिए, उन्हें कार्ड सेक्शन में नहीं जोड़ा जा सकता. कार्ड सेक्शन में 100 से ज़्यादा विजेट नहीं होने चाहिए. साथ ही, बेहतर परफ़ॉर्मेंस के लिए, इसे जितना हो सके उतना आसान होना चाहिए.
आपको कार्ड, उपयोगकर्ता की खास गतिविधियों या डेटा सेट के हिसाब से डिज़ाइन करने चाहिए. उदाहरण के लिए, Google Workspace के किसी ऐसे ऐड-ऑन के लिए अलग-अलग कार्ड हो सकते हैं जो Google Sheets से लिए गए डेटा को दिखाता है. ऐसा इसलिए, क्योंकि वह ऐड-ऑन हर उस शीट से डेटा लेता है जिसके लिए कार्ड उपलब्ध हैं.
एक से ज़्यादा कार्ड का इस्तेमाल करना
आम तौर पर, ऐड-ऑन में एक से ज़्यादा कार्ड होते हैं. इन कार्ड को, कई कार्ड के साथ बुनियादी नेविगेशन के लिए, सामान्य सूची के तौर पर कॉन्फ़िगर किया जा सकता है. इसके अलावा, नेविगेशन के ज़्यादा जटिल तरीके कॉन्फ़िगर करके, यह कंट्रोल किया जा सकता है कि उपयोगकर्ता कार्ड के बीच कैसे नेविगेट करे.
अगर ऐड-ऑन में बेसिक नेविगेशन का इस्तेमाल किया जाता है, तो पहली बार ऐड-ऑन खोलने पर, Google Workspace ऐप्लिकेशन कार्ड हेडर की सूची बनाता है और उसे उपयोगकर्ता को दिखाता है. कार्ड के हेडर पर क्लिक करने से, वह कार्ड खुल जाता है. कार्ड हेडर की सूची पर वापस जाने के लिए, बैक ऐरो भी दिया गया है. आपको हेडर और वापस जाने वाले ऐरो के लिए कोडिंग करने की ज़रूरत नहीं है. जब ऐड-ऑन में कार्ड तय किए जाते हैं, तो यह काम अपने-आप हो जाता है.
ऐड-ऑन डिज़ाइन करते समय, एक बार में कम कार्ड दिखाएं. ऐसा इसलिए, क्योंकि कार्ड को स्क्रीन पर सीमित जगह मिलती है. कार्ड में ज़रूरत से ज़्यादा जटिलता से बचना भी बेहतर होता है.