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

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

Chat ऐप्लिकेशन के लिए, JSON कार्ड मैसेज डिज़ाइन करने और उनकी झलक देखने के लिए, Card Builder का इस्तेमाल करें:

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

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

  • Google Workspace खाता इसके ऐक्सेस के साथ Google Chat.
  • पब्लिश किया गया Chat ऐप्लिकेशन. किसी चैट ऐप्लिकेशन, इसे फ़ॉलो करें क्विकस्टार्ट है.

    • बटन जोड़ें

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

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

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

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

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

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

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

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

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

    नीचे दिए गए कार्ड में दो आइकॉन वाला ButtonList विजेट मौजूद है Button विजेट. एक बटन knownIcon इस फ़ील्ड में, Google Chat में पहले से मौजूद ईमेल का आइकॉन दिखेगा. अन्य बटन दिखाने के लिए 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"
    }
  }
}

    नीचे दिया गया कोड, Chat के कई विकल्पों वाला मेन्यू दिखाता है स्पेसेज़. स्पेस भरने के लिए, चुनने का इनपुट 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 विजेट:

    कार्ड में डाले गए डेटा की पुष्टि करना

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

    कार्रवाइयों के लिए ज़रूरी विजेट सेट करें

    कार्ड के action के हिस्से के तौर पर, उन विजेट के नाम जोड़ें जिन्हें किसी कार्रवाई की requiredWidgets सूची में जोड़ना है.

    अगर इस कार्रवाई को शुरू करने पर, यहां दिए गए किसी भी विजेट में कोई वैल्यू नहीं होती, तो तो फ़ॉर्म कार्रवाई सबमिशन रद्द कर दिया जाएगा.

    जब "all_widgets_are_required": "true" को किसी कार्रवाई के लिए सेट किया जाता है, तो सभी विजेट इस कार्रवाई के लिए कार्ड में मौजूद सभी कीवर्ड की जानकारी ज़रूरी है.

    एक से ज़्यादा आइटम चुनने के लिए, all_widgets_are_required कार्रवाई सेट करें

    JSON

    {
  "sections": [
    {
      "header": "Select contacts",
      "widgets": [
        {
          "selectionInput": {
            "type": "MULTI_SELECT",
            "label": "Selected contacts",
            "name": "contacts",
            "multiSelectMaxSelectedItems": 3,
            "multiSelectMinQueryLength": 1,
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "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
              }
            ]
          }
        }
      ]
    }
  ]
}

    तारीख समय पिकर में all_widgets_are_required कार्रवाई सेट करें

    JSON

    {
  "sections": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "A datetime picker widget with both date and time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_and_time",
            "label": "meeting",
            "type": "DATE_AND_TIME"
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just date:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_only",
            "label": "Choose a date",
            "type": "DATE_ONLY",
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_time_only",
            "label": "Select a time",
            "type": "TIME_ONLY"
          }
        }
      ]
    }
  ]
}

    ड्रॉप-डाउन मेन्यू में, all_widgets_are_required कार्रवाई सेट करें

    JSON

    {
  "sections": [
    {
      "header": "Section Header",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 1,
      "widgets": [
        {
          "selectionInput": {
            "name": "location",
            "label": "Select Color",
            "type": "DROPDOWN",
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "items": [
              {
                "text": "Red",
                "value": "red",
                "selected": false
              },
              {
                "text": "Green",
                "value": "green",
                "selected": false
              },
              {
                "text": "White",
                "value": "white",
                "selected": false
              },
              {
                "text": "Blue",
                "value": "blue",
                "selected": false
              },
              {
                "text": "Black",
                "value": "black",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}

    टेक्स्ट इनपुट विजेट के लिए पुष्टि सेट करें

    textInput में विजेट का सत्यापन फ़ील्ड है, तो यह यह टेक्स्ट इनपुट विजेट.

    टेक्स्ट इनपुट विजेट के लिए वर्ण सीमा सेट करें

    JSON

    {
  "sections": [
    {
      "header": "Tell us about yourself",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "favoriteColor",
            "label": "Favorite color",
            "type": "SINGLE_LINE",
            "validation": {"character_limit":15},
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        }
      ]
    }
  ]
}

    टेक्स्ट इनपुट विजेट के लिए इनपुट प्रकार सेट करें

    JSON

    {
  "sections": [
    {
      "header": "Validate text inputs by input types",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "mailing_address",
            "label": "Please enter a valid email address",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "EMAIL"
            },
            "onChangeAction": {
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textInput": {
            "name": "validate_integer",
            "label": "Please enter a number",
              "type": "SINGLE_LINE",
            "validation": {
              "input_type": "INTEGER"
            }
          }
        },
        {
          "textInput": {
            "name": "validate_float",
            "label": "Please enter a number with a decimal",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "FLOAT"
            }
          }
        }
      ]
    }
  ]
}

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

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

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