इंटरैक्टिव कार्ड या डायलॉग बॉक्स डिज़ाइन करना

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

कार्ड बिल्डर से कार्ड डिज़ाइन करें और उनकी झलक देखें.

कार्ड बिल्डर खोलें

ज़रूरी शर्तें

  • Google Workspace खाता, जिसमें Google Chat का ऐक्सेस हो.
  • पब्लिश किया गया Chat ऐप्लिकेशन. Chat ऐप्लिकेशन बनाने के लिए, इस quickstart को अपनाएं.

    • बटन जोड़ें

    ButtonList विजेट में बटन का सेट दिखता है. बटनों में टेक्स्ट, एक आइकॉन या टेक्स्ट और आइकॉन दोनों दिख सकते हैं. हर Button बटन पर क्लिक करने से OnClick ऐक्शन लिया जा सकता है. उदाहरण के लिए:

    • उपयोगकर्ताओं को ज़्यादा जानकारी देने के लिए, OpenLink वाला हाइपरलिंक खोलें.
    • ऐसा action चलाएं जो एपीआई को कॉल करने जैसा कस्टम फ़ंक्शन चलाता हो.

    सुलभता के लिए, बटन पर वैकल्पिक टेक्स्ट इस्तेमाल किया जा सकता है.

    कस्टम फ़ंक्शन चलाने वाला बटन जोड़ें

    नीचे दिया गया कार्ड, जिसमें दो बटन वाला ButtonList विजेट होता है. एक बटन पर क्लिक करने से, Google Chat का डेवलपर दस्तावेज़ नए टैब में खुलता है. दूसरा बटन, goToView() नाम का कस्टम फ़ंक्शन चलाता है और viewType="BIRD EYE VIEW" पैरामीटर को पास करता है.

    पसंद के मुताबिक रंग वाला बटन और बंद किया गया बटन जोड़ें

    "disabled": "true" सेट करके, उपयोगकर्ताओं को बटन पर क्लिक करने से रोका जा सकता है.

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

    आइकॉन के साथ बटन जोड़ें

    नीचे एक कार्ड दिखाया गया है, जिसमें ButtonList विजेट के साथ दो आइकॉन Button विजेट हैं. Google Chat में पहले से मौजूद ईमेल आइकॉन दिखाने के लिए, एक बटन में knownIcon फ़ील्ड का इस्तेमाल होता है. दूसरा बटन, कस्टम आइकॉन विजेट को दिखाने के लिए, iconUrl फ़ील्ड का इस्तेमाल करता है.

    आइकॉन और टेक्स्ट वाला बटन जोड़ें

    यहां ButtonList विजेट वाला कार्ड दिखाया गया है, जो लोगों को ईमेल भेजने का निर्देश देता है. पहला बटन एक ईमेल आइकॉन दिखाता है और दूसरा बटन टेक्स्ट दिखाता है. sendEmail फ़ंक्शन चलाने के लिए, उपयोगकर्ता आइकॉन या टेक्स्ट बटन पर क्लिक कर सकता है.

    चुने जा सकने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट जोड़ना

    SelectionInput विजेट में, चुने जा सकने वाले आइटम का सेट होता है, जैसे कि चेकबॉक्स, रेडियो बटन, स्विच या ड्रॉप-डाउन मेन्यू. इस विजेट का इस्तेमाल, उपयोगकर्ताओं से तय और स्टैंडर्ड डेटा इकट्ठा करने के लिए किया जा सकता है. उपयोगकर्ताओं से तय डेटा इकट्ठा करने के लिए, TextInput विजेट का इस्तेमाल करें.

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

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

    इस सेक्शन में ऐसे कार्ड के उदाहरण दिए गए हैं जो SelectionInput विजेट का इस्तेमाल करते हैं. इन उदाहरणों में अलग-अलग तरह के सेक्शन इनपुट का इस्तेमाल किया गया है:

    चेकबॉक्स जोड़ें

    यहां एक डायलॉग बॉक्स दिखता है. इसमें, लोगों से यह बताने के लिए कहा जाता है कि कोई संपर्क पेशेवर है, निजी है या दोनों में से एक है. इसके लिए, SelectionInput विजेट का इस्तेमाल किया जाता है, जिसमें चेकबॉक्स का इस्तेमाल होता है:

    रेडियो बटन जोड़ें

    यहां एक डायलॉग बॉक्स दिखाया गया है. इसमें, रेडियो बटन का इस्तेमाल करने वाले SelectionInput विजेट की मदद से, लोगों से यह जानकारी मांगी जाती है कि कोई संपर्क पेशेवर है या निजी है:

    स्विच जोड़ें

    यहां एक डायलॉग बॉक्स दिखता है. इसमें लोगों से यह बताने के लिए कहा जाता है कि कोई संपर्क पेशेवर है, निजी है या स्विच का इस्तेमाल करने वाले SelectionInput विजेट की मदद से, दोनों में से कोई एक है:

    यहां एक डायलॉग बॉक्स दिखाया गया है. इसमें लोगों से यह बताने के लिए कहा जाता है कि कोई संपर्क, ड्रॉप-डाउन मेन्यू का इस्तेमाल करने वाले SelectionInput विजेट की मदद से पेशेवर है या निजी है:

    कई आइटम चुनने का मेन्यू जोड़ें

    नीचे एक डायलॉग दिखाया जाता है, जिसमें उपयोगकर्ता से एक से ज़्यादा चुनें मेन्यू से संपर्कों को चुनने के लिए कहा जाता है:

    एक से ज़्यादा मेन्यू चुनने के लिए डेटा सोर्स का इस्तेमाल करना

    इस सेक्शन में बताया गया है कि डाइनैमिक सोर्स, जैसे कि Google Workspace ऐप्लिकेशन या बाहरी डेटा सोर्स से डेटा भरने के लिए, एक से ज़्यादा विकल्पों वाले मेन्यू का इस्तेमाल कैसे करें.

    Google Workspace से मिले डेटा सोर्स

    कई आइटम चुनने के लिए उपलब्ध मेन्यू में, अपने-आप जानकारी भरने के लिए, Google Workspace में इन डेटा सोर्स का इस्तेमाल करें:

    • Google Workspace के उपयोगकर्ताओं के लिए: सिर्फ़ एक ही Google Workspace संगठन के उपयोगकर्ताओं की जानकारी अपने-आप भरी जा सकती है.
    • चैट स्पेस: एक से ज़्यादा आइटम चुनने वाले मेन्यू में जो उपयोगकर्ता आइटम इनपुट कर रहे हैं वे सिर्फ़ उन स्पेस को देख और चुन सकते हैं जिनमें वे अपने Google Workspace संगठन में शामिल हैं.

    Google Workspace के डेटा सोर्स का इस्तेमाल करने के लिए, आपको platformDataSource फ़ील्ड की जानकारी देनी होगी. चुने गए अन्य इनपुट टाइप के उलट, इसमें SectionItem ऑब्जेक्ट को हटा दिया जाता है, क्योंकि चुनने के ये आइटम Google Workspace से डाइनैमिक तौर पर लिए जाते हैं.

    इस कोड में, Google Workspace उपयोगकर्ताओं के एक से ज़्यादा विकल्प वाला मेन्यू दिखाया गया है. उपयोगकर्ताओं की जानकारी अपने-आप भरने के लिए, चुना गया इनपुट commonDataSource को USER पर सेट करता है:

    JSON

    {
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "commonDataSource": "USER"
    }
  }
}

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

    JSON

    {
  "selectionInput": {
    "name": "spaces",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 3,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "hostAppDataSource": {
        "chatDataSource": {
          "spaceDataSource": {
            "defaultToCurrentSpace": true
          }
        }
      }
    }
  }
}
    Google Workspace से बाहर के डेटा सोर्स

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

    किसी बाहरी डेटा सोर्स का इस्तेमाल करने के लिए, externalDataSource फ़ील्ड का इस्तेमाल करके उस फ़ंक्शन के बारे में बताएं जो डेटा सोर्स से आइटम दिखाता है.

    किसी बाहरी डेटा सोर्स के अनुरोधों को कम करने के लिए, उपयोगकर्ताओं के मेन्यू में टाइप करने से पहले, सुझाए गए वे आइटम शामिल करें जो मल्टीसिलेक्ट मेन्यू में दिखते हैं. उदाहरण के लिए, उपयोगकर्ता के लिए हाल ही में खोजे गए संपर्कों की जानकारी अपने-आप भरी जा सकती है. किसी बाहरी डेटा सोर्स से सुझाए गए आइटम को अपने-आप भरने के लिए, SelectionItem ऑब्जेक्ट की जानकारी दें.

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

    JSON

    {
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 2,
    "externalDataSource": {
      "function": "getContacts"
    },
    "items": [
      {
        "text": "Contact 3",
        "value": "contact-3",
        "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
        "bottomText": "Contact three description",
        "selected": false
      }
    ]
  }
}

    बाहरी डेटा सोर्स के लिए, उन आइटम को भी अपने-आप पूरा किया जा सकता है जिन्हें उपयोगकर्ता मल्टीसिलेक्ट मेन्यू में टाइप करना शुरू करते हैं. उदाहरण के लिए, अगर कोई व्यक्ति किसी ऐसे मेन्यू के लिए Atl टाइप करना शुरू करता है जो अमेरिका के शहरों की जानकारी देता है, तो टाइपिंग का काम पूरा करने से पहले, आपका Chat ऐप्लिकेशन अपने-आप Atlanta का सुझाव दे सकता है. अपने-आप ज़्यादा से ज़्यादा 100 आइटम अपने-आप पूरे किए जा सकते हैं.

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

    • उस इवेंट ऑब्जेक्ट को पास करें जो मेन्यू के साथ उपयोगकर्ता के इंटरैक्शन को दिखाता है.
    • पहचानें कि इंटरैक्शन इवेंट की invokedFunction वैल्यू, externalDataSource फ़ील्ड के फ़ंक्शन से मेल खाती है.
    • फ़ंक्शन के मेल खाने पर, बाहरी डेटा सोर्स से सुझाए गए आइटम दिखाएं. उपयोगकर्ता के टाइप के हिसाब से आइटम के सुझाव देने के लिए, autocomplete_widget_query कुंजी की वैल्यू पाएं. इस वैल्यू से पता चलता है कि उपयोगकर्ता, मेन्यू में क्या टाइप करता है.

    नीचे दिया गया कोड, किसी बाहरी डेटा संसाधन से आइटम अपने-आप पूरा करता है. पिछले उदाहरण का इस्तेमाल करते हुए, Chat ऐप्लिकेशन getContacts फ़ंक्शन के ट्रिगर होने के समय के आधार पर आइटम के सुझाव देता है:

    Apps Script

    apps-script/selection-input/on-widget-update.gs
    /**
 * Widget update event handler.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  const actionName = event.common["invokedFunction"];
  if (actionName !== "getContacts") {
    return {};
  }

  return {
    actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: {
        suggestions: {
          items: [
            {
              value: "contact-1",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 1",
              bottomText: "Contact one description",
              selected: false
            },
            {
              value: "contact-2",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 2",
              bottomText: "Contact two description",
              selected: false
            },
            {
              value: "contact-3",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 3",
              bottomText: "Contact three description",
              selected: false
            },
            {
              value: "contact-4",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 4",
              bottomText: "Contact four description",
              selected: false
            },
            {
              value: "contact-5",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 5",
              bottomText: "Contact five description",
              selected: false
            },
          ]
        }
      }
    }
  };
}

    Node.js

    node/selection-input/on-widget-update.js
    /**
 * Widget update event handler.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  const actionName = event.common["invokedFunction"];
  if (actionName !== "getContacts") {
    return {};
  }

  return {
    actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: {
        suggestions: {
          items: [
            {
              value: "contact-1",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 1",
              bottomText: "Contact one description",
              selected: false
            },
            {
              value: "contact-2",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 2",
              bottomText: "Contact two description",
              selected: false
            },
            {
              value: "contact-3",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 3",
              bottomText: "Contact three description",
              selected: false
            },
            {
              value: "contact-4",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 4",
              bottomText: "Contact four description",
              selected: false
            },
            {
              value: "contact-5",
              startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
              text: "Contact 5",
              bottomText: "Contact five description",
              selected: false
            },
          ]
        }
      }
    }
  };
}

    ऐसा फ़ील्ड जोड़ें जिसमें उपयोगकर्ता टेक्स्ट डाल सके

    TextInput विजेट में एक ऐसा फ़ील्ड होता है जिसमें लोग टेक्स्ट डाल सकते हैं. विजेट में सुझाव भी मिलते हैं. इनसे उपयोगकर्ताओं को एक जैसा डेटा डालने में मदद मिलती है. साथ ही, बदलाव करने पर कार्रवाइयां भी की जा सकती हैं. ये कार्रवाइयां Actions टेक्स्ट इनपुट फ़ील्ड में कोई बदलाव होने पर चलती हैं. जैसे, उपयोगकर्ता को टेक्स्ट जोड़ना या मिटाना.

    उपयोगकर्ताओं से एब्सट्रैक्ट या अज्ञात डेटा इकट्ठा करने के लिए, इस TextInput विजेट का इस्तेमाल करें. उपयोगकर्ताओं का तय डेटा इकट्ठा करने के लिए, SelectionInput विजेट का इस्तेमाल करें.

    उपयोगकर्ताओं के डाले गए टेक्स्ट को प्रोसेस करने के लिए, फ़ॉर्म का डेटा पाना देखें.

    नीचे दिया गया कार्ड, TextInput विजेट से मिलकर बना है:

    उपयोगकर्ता को तारीख और समय चुनने की अनुमति दें

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

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

    नीचे एक कार्ड दिखाया गया है जिसमें तीन अलग-अलग तरह के DateTimePicker विजेट हैं:

    समस्या हल करें

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

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