إضافة عناصر واجهة مستخدم تفاعلية إلى البطاقات

توضّح هذه الصفحة كيفية إضافة تطبيقات مصغّرة وعناصر واجهة مستخدم إلى البطاقات ليتمكّن المستخدمون من التفاعل مع تطبيق Google Chat، مثلاً من خلال النقر على زر أو إرسال معلومات.

يمكن لتطبيقات Chat استخدام واجهات Chat التالية لإنشاء بطاقات تفاعلية:

  • الرسائل التي تحتوي على بطاقة واحدة أو أكثر
  • الصفحات الرئيسية، وهي بطاقة تظهر من علامة التبويب الصفحة الرئيسية في الرسائل المباشرة مع تطبيق Chat
  • مربّعات الحوار، وهي بطاقات تفتح في نافذة جديدة من الرسائل والصفحات الرئيسية.

عندما يتفاعل المستخدمون مع البطاقات، يمكن لتطبيقات Chat استخدام البيانات التي تتلقّاها لمعالجتها والردّ عليها وفقًا لذلك. لمعرفة التفاصيل، يُرجى الاطّلاع على مقالة جمع المعلومات من مستخدمي Google Chat ومعالجتها.

استخدِم أداة Card Builder لتصميم واجهات المراسلة وواجهات المستخدم ومعاينتها لتطبيقات Chat:

فتح أداة Card Builder

المتطلبات الأساسية

تطبيق Google Chat تم ضبطه لتلقّي أحداث التفاعل والردّ عليها لإنشاء تطبيق Chat تفاعلي، أكمِل أحد أدلة البدء السريع التالية استنادًا إلى بنية التطبيق التي تريد استخدامها:

إضافة زر

تعرض الأداة ButtonList widget مجموعة من الأزرار. يمكن أن تعرض الأزرار نصًا أو رمزًا أو كلاً من النص والرمز. يسمح كل Button بإجراء OnClick يحدث عندما ينقر المستخدمون على الزر. على سبيل المثال:

  • فتح رابط تشعبي باستخدام OpenLink, لتزويد المستخدمين بمعلومات إضافية
  • تشغيل action يشغّل دالة مخصّصة، مثل استدعاء واجهة برمجة تطبيقات

لتحسين إمكانية الوصول، تسمح الأزرار باستخدام نص بديل.

إضافة زر يشغّل دالة مخصّصة

في ما يلي بطاقة تتألف من أداة ButtonList مع زرّين. يفتح أحد الزرّين مستندات Google Chat الخاصة بالمطوّرين في علامة تبويب جديدة. ويشغّل الزر الآخر دالة مخصّصة باسم goToView() ويمرِّر المَعلمة viewType="BIRD EYE VIEW".

إضافة زر بنمط التصميم المتعدد الأبعاد

في ما يلي مجموعة من الأزرار بأنماط مختلفة من أزرار التصميم المتعدد الأبعاد.

لتطبيق نمط Material Design، لا تُدرِج السمة "color".

إضافة زر بلون مخصّص وزر غير مفعّل

يمكنك منع المستخدمين من النقر على زر من خلال ضبط "disabled": "true".

في ما يلي بطاقة تتألف من أداة ButtonList مع زرّين. يستخدم أحد الزرّين حقل Color لتخصيص لون خلفية الزر. ويتم إيقاف الزر الآخر باستخدام حقل Disabled، ما يمنع المستخدم من النقر على الزر وتنفيذ الدالة.

إضافة زر مع رمز

في ما يلي بطاقة تتألف من أداة ButtonList مع أداتَي رمز Button. يستخدم أحد الزرّين الحقل knownIcon لعرض رمز البريد الإلكتروني المضمّن في Google Chat. ويستخدم الزر الآخر حقل iconUrl لعرض أداة رمز مخصّصة.

إضافة زر مع رمز ونص

في ما يلي بطاقة تتألف من أداة ButtonList تطلب من المستخدم إرسال رسالة إلكترونية. يعرض الزر الأول رمز بريد إلكتروني ويعرض الزر الثاني نصًا. يمكن للمستخدم النقر على الزر الذي يعرض الرمز أو النص لتشغيل الدالة sendEmail.

تخصيص الزر لقسم قابل للتصغير

يمكنك تخصيص زر التحكّم الذي يصغّر الأقسام ويوسّعها ضِمن البطاقة. يمكنك الاختيار من بين مجموعة من الرموز أو الصور لتمثيل محتوى القسم بشكل مرئي، ما يسهّل على المستخدمين فهم المعلومات والتفاعل معها.

إضافة قائمة كاملة

يمكن استخدام Overflow menu في بطاقات Chat لتقديم خيارات وإجراءات إضافية. تتيح لك هذه القائمة تضمين المزيد من الخيارات بدون إحداث فوضى في واجهة البطاقة، ما يضمن تصميمًا نظيفًا ومنظّمًا.

إضافة قائمة شرائح

توفر الأداة ChipList طريقة متعدّدة الاستخدامات وجذابة بصريًا لعرض المعلومات. يمكنك استخدام قوائم الشرائح لتمثيل العلامات أو الفئات أو البيانات الأخرى ذات الصلة، ما يسهّل على المستخدمين التنقّل في المحتوى والتفاعل معه.

جمع المعلومات من المستخدمين

يوضّح هذا القسم كيفية إضافة أدوات تجمع المعلومات، مثل النصوص أو الخيارات.

لمعرفة كيفية معالجة ما يُدخله المستخدمون، يُرجى الاطّلاع على مقالة جمع المعلومات من مستخدمي Google Chat ومعالجتها.

جمع النصوص

توفر الأداة TextInput حقلاً يمكن للمستخدمين إدخال نص فيه. تسمح الأداة بالاقتراحات التي تساعد المستخدمين في إدخال بيانات موحّدة، والإجراءات عند التغيير، وهي Actions التي يتم تشغيلها عند حدوث تغيير في حقل إدخال النص، مثل إضافة المستخدم نصًا أو حذفه.

عندما تحتاج إلى جمع بيانات مجرّدة أو غير معروفة من المستخدمين، استخدِم أداة TextInput هذه. لجمع بيانات محدّدة من المستخدمين، استخدِم الـ SelectionInput بدلاً من ذلك.

في ما يلي بطاقة تتألف من أداة TextInput:

جمع التواريخ أو الأوقات

تسمح الأداة DateTimePicker widget للمستخدمين بإدخال تاريخ أو وقت أو كليهما. أو يمكن للمستخدمين استخدام أداة الاختيار لتحديد التواريخ والأوقات. إذا أدخل المستخدمون تاريخًا أو وقتًا غير صالحَين، ستعرض أداة الاختيار خطأ يطلب من المستخدمين إدخال المعلومات بشكل صحيح.

في ما يلي بطاقة تتألف من ثلاثة أنواع مختلفة من أدوات DateTimePicker:

السماح للمستخدمين باختيار العناصر

توفر الأداة SelectionInput مجموعة من العناصر القابلة للاختيار، مثل مربّعات الاختيار أو أزرار الاختيار أو المفاتيح أو قائمة منسدلة. يمكنك استخدام هذه الأداة لجمع بيانات محدّدة وموحّدة من المستخدمين. لجمع بيانات غير محدّدة من المستخدمين، استخدِم الأداة TextInput بدلاً من ذلك.

تسمح الأداة SelectionInput بالاقتراحات التي تساعد المستخدمين في إدخال بيانات موحّدة ، والإجراءات عند التغيير، وهي Actions التي يتم تشغيلها عند حدوث تغيير في حقل إدخال الخيارات، مثل اختيار المستخدم عنصرًا أو إلغاء اختياره.

يمكن لتطبيقات Chat تلقّي قيمة العناصر المحدّدة ومعالجتها. لمعرفة التفاصيل حول استخدام حقول إدخال النماذج، يُرجى الاطّلاع على مقالة معالجة المعلومات التي يُدخلها المستخدمون.

يقدّم هذا القسم أمثلة على البطاقات التي تستخدم الأداة SelectionInput. تستخدم الأمثلة أنواعًا مختلفة من حقول إدخال الأقسام:

إضافة مربّع اختيار

في ما يلي بطاقة تطلب من المستخدم تحديد ما إذا كانت جهة الاتصال مهنية أو شخصية أو كليهما، باستخدام أداة SelectionInput تستخدم مربّعات الاختيار:

إضافة زر اختيار

في ما يلي بطاقة تطلب من المستخدم تحديد ما إذا كانت جهة الاتصال مهنية أو شخصية باستخدام أداة SelectionInput تستخدم أزرار الاختيار:

إضافة مفتاح

في ما يلي بطاقة تطلب من المستخدم تحديد ما إذا كانت جهة الاتصال مهنية أو شخصية أو كليهما باستخدام أداة SelectionInput تستخدم المفاتيح:

في ما يلي بطاقة تطلب من المستخدم تحديد ما إذا كانت جهة الاتصال مهنية أو شخصية باستخدام أداة SelectionInput تستخدم قائمة منسدلة:

تعبئة القوائم المنسدلة بشكل ديناميكي

هذه الميزة متاحة لتطبيقات Google Chat.

يمكنك تعبئة عناصر القائمة المنسدلة بشكل ديناميكي من مصادر البيانات في Google Workspace أو من مصدر بيانات خارجي. لاستخدام مصادر البيانات الديناميكية، عليك تحديد الحقل data_source_configs، وهو عبارة عن مصفوفة من عناصر DataSourceConfig. يمكن أن يحتوي كل DataSourceConfig على platformDataSource أو remoteDataSource. لا يمكن استخدام سوى DataSourceConfig واحد في الوقت الحالي.

تعبئة العناصر من Google Workspace

لتعبئة العناصر من مصادر بيانات Google Workspace، مثل مستخدمي Google Workspace، عليك تحديد الحقل platformDataSource ضِمن DataSourceConfig. على عكس استخدام items الثابتة، عليك حذف عناصر SelectionItem، لأنّ هذه العناصر يتم الحصول عليها بشكل ديناميكي من Google Workspace.

يعرض الرمز التالي قائمة منسدلة يتم تعبئتها بمستخدمي Google Workspace:

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "contacts",
            "type": "DROPDOWN",
            "label": "Select contact from organization",
            "data_source_configs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "min_characters_trigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}
تعبئة العناصر من مصدر بيانات خارجي

لتعبئة العناصر من مصدر بيانات خارجي أو تابع لجهة خارجية، مثل نظام إدارة علاقات العملاء (CRM)، عليك استخدام حقل remoteDataSource ضِمن DataSourceConfig لتحديد دالة تعرض العناصر من مصدر البيانات.

يعرض الرمز التالي قائمة منسدلة يتم تعبئتها بالعناصر من مجموعة جهات اتصال خارجية من خلال تشغيل الدالة getCrmLeads:

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "crm_leads",
            "type": "DROPDOWN",
            "label": "Select CRM Lead",
            "data_source_configs": [
              {
                "remoteDataSource": {
                  "function": "getCrmLeads"
                },
                "min_characters_trigger": 2
              }
            ],
            "items": [
              {
                "text": "Suggested Lead 1",
                "value": "lead-1"
              }
            ]
          }
        }
      ]
    }
  ]
}

لتقليل الطلبات إلى مصدر بيانات ديناميكي، يمكنك تضمين العناصر المقترَحة التي تظهر في القائمة المنسدلة قبل أن يكتب المستخدمون. يمكنك أيضًا ضبط القائمة المنسدلة لإكمال العناصر تلقائيًا استنادًا إلى ما يكتبه المستخدمون من خلال ضبط min_characters_trigger ضِمن DataSourceConfig. عندما يكتب المستخدم عدد الأحرف المحدّد في min_characters_trigger على الأقل، يتم تشغيل الدالة المحدّدة في remoteDataSource. يتضمّن عنصر الحدث الذي يتم تمريره إلى الدالة إدخال المستخدم في المفتاح autocomplete_widget_query.

إضافة قائمة اختيار متعدّد

في ما يلي بطاقة تطلب من المستخدم اختيار جهات اتصال من قائمة اختيار متعدّد:

يمكنك تعبئة عناصر قائمة اختيار متعدّد من مصادر البيانات التالية في Google Workspace:

  • مستخدمو Google Workspace: لا يمكنك تعبئة المستخدمين إلا ضِمن مؤسسة Google Workspace نفسها.
  • مساحات Chat: لا يمكن للمستخدم الذي يُدخل العناصر في قائمة الاختيار المتعدّد عرض المساحات التي ينتمي إليها واختيارها فقط ضِمن مؤسسة Google Workspace.

لاستخدام مصادر بيانات Google Workspace، عليك تحديد الـ platformDataSource حقل. على عكس أنواع حقول إدخال الخيارات الأخرى، عليك حذف SelectionItem ، لأنّ هذه العناصر يتم الحصول عليها بشكل ديناميكي من 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
          }
        }
      }
    }
  }
}

يمكن أن تعبّئ قوائم الاختيار المتعدّد أيضًا العناصر من مصدر بيانات خارجي أو تابع لجهة خارجية. على سبيل المثال، يمكنك استخدام قوائم الاختيار المتعدّد لمساعدة المستخدم في الاختيار من قائمة العملاء المحتملين من نظام إدارة علاقات العملاء (CRM).

لاستخدام مصدر بيانات خارجي، عليك استخدام حقل externalDataSource لتحديد دالة تعرض العناصر من مصدر البيانات.

لتقليل الطلبات إلى مصدر بيانات خارجي، يمكنك تضمين العناصر المقترَحة التي تظهر في قائمة الاختيار المتعدّد قبل أن يكتب المستخدمون في القائمة. على سبيل المثال، يمكنك تعبئة جهات الاتصال التي تم البحث عنها مؤخرًا للمستخدم. لتعبئة العناصر المقترَحة من مصدر بيانات خارجي، عليك تحديد SelectionItem عناصر.

يعرض الرمز التالي قائمة اختيار متعدّد بالعناصر من مجموعة جهات اتصال خارجية للمستخدم. تعرض القائمة جهة اتصال واحدة تلقائيًا وتشغّل الدالة getContacts لاسترداد العناصر وتعبئتها من مصدر البيانات الخارجي:

Node.js

node/selection-input/index.js
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

Python

python/selection-input/main.py
'selectionInput': {
  'name': "contacts",
  'type': "MULTI_SELECT",
  'label': "Selected contacts",
  'multiSelectMaxSelectedItems': 3,
  'multiSelectMinQueryLength': 1,
  'externalDataSource': { 'function': "getContacts" },
  # Suggested items loaded by default.
  # The list is static here but it could be dynamic.
  'items': [get_contact("3")]
}

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java
.setSelectionInput(new GoogleAppsCardV1SelectionInput()
  .setName("contacts")
  .setType("MULTI_SELECT")
  .setLabel("Selected contacts")
  .setMultiSelectMaxSelectedItems(3)
  .setMultiSelectMinQueryLength(1)
  .setExternalDataSource(new GoogleAppsCardV1Action().setFunction("getContacts"))
  .setItems(List.of(getContact("3")))))))))));

برمجة التطبيقات

apps-script/selection-input/selection-input.gs
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

بالنسبة إلى مصادر البيانات الخارجية، يمكنك أيضًا إكمال العناصر تلقائيًا التي يبدأ المستخدمون في كتابتها في قائمة الاختيار المتعدّد. على سبيل المثال، إذا بدأ المستخدم في كتابة Atl لقائمة تعبّئ المدن في الولايات المتحدة، يمكن لتطبيق Chat أن يقترح تلقائيًا Atlanta قبل أن يكمل المستخدم الكتابة. يمكنك الإكمال التلقائي لما يصل إلى 100 عنصر.

للإكمال التلقائي للعناصر، عليك إنشاء دالة تستعلم عن مصدر البيانات الخارجي وتعرض العناصر كلما كتب المستخدم في قائمة الاختيار المتعدّد. يجب أن تنفّذ الدالة ما يلي:

  • تمرير عنصر حدث يمثّل تفاعل المستخدم مع القائمة
  • تحديد أنّ قيمة عنصر حدث التفاعل تطابق الدالة من حقل externalDataSourceinvokedFunction
  • عندما تتطابق الدالتان، يتم عرض العناصر المقترَحة من مصدر البيانات الخارجي. لاقتراح العناصر استنادًا إلى ما يكتبه المستخدم، عليك الحصول على قيمة المفتاح autocomplete_widget_query. تمثّل هذه القيمة ما يكتبه المستخدم في القائمة.

يكمل الرمز التالي العناصر تلقائيًا من مصدر بيانات خارجي. باستخدام المثال السابق، يقترح تطبيق Chat العناصر استنادًا إلى وقت تشغيل الدالة getContacts:

Node.js

node/selection-input/index.js
/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

Python

python/selection-input/main.py
def on_widget_update(event: dict) -> dict:
  """Responds to a WIDGET_UPDATE event in Google Chat."""
  if "getContacts" == event.get("common").get("invokedFunction"):
    query = event.get("common").get("parameters").get("autocomplete_widget_query")
    return { 'actionResponse': {
      'type': "UPDATE_WIDGET",
      'updatedWidget': { 'suggestions': { 'items': list(filter(lambda e: query is None or query in e["text"], [
        # The list is static here but it could be dynamic.
        get_contact("1"), get_contact("2"), get_contact("3"), get_contact("4"), get_contact("5")
      # Only return items based on the query from the user
      ]))}}
    }}


def get_contact(id: str) -> dict:
  """Generate a suggested contact given an ID."""
  return {
    'value': id,
    'startIconUri': "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    'text': "Contact " + id
  }

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java
// Responds to a WIDGET_UPDATE event in Google Chat.
Message onWidgetUpdate(JsonNode event) {
  if ("getContacts".equals(event.at("/invokedFunction").asText())) {
    String query = event.at("/common/parameters/autocomplete_widget_query").asText();
    return new Message().setActionResponse(new ActionResponse()
      .setType("UPDATE_WIDGET")
      .setUpdatedWidget(new UpdatedWidget()
        .setSuggestions(new SelectionItems().setItems(List.of(
          // The list is static here but it could be dynamic.
          getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
        // Only return items based on the query from the user
        ).stream().filter(e -> query == null || e.getText().indexOf(query) > -1).toList()))));
  }
  return null;
}

// Generate a suggested contact given an ID.
GoogleAppsCardV1SelectionItem getContact(String id) {
  return new GoogleAppsCardV1SelectionItem()
    .setValue(id)
    .setStartIconUri("https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png")
    .setText("Contact " + id);
}

برمجة التطبيقات

apps-script/selection-input/selection-input.gs
/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

التحقّق من صحة البيانات التي يتم إدخالها في البطاقات

توضّح هذه الصفحة كيفية التحقّق من صحة البيانات التي يتم إدخالها في البطاقة 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 في أداة dateTimePicker

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 أو بطاقة خطأً، تعرض واجهة Chat رسالة "حدث خطأ ما." أو "يتعذّر معالجة طلبك." في بعض الأحيان، لا تعرض واجهة مستخدم Chat أي رسالة خطأ، ولكن تطبيق Chat أو البطاقة يعرض نتيجة غير متوقّعة، مثلاً قد لا تظهر رسالة البطاقة.

على الرغم من أنّه قد لا يتم عرض رسالة خطأ في واجهة مستخدم Chat، تتوفّر رسائل خطأ وصفية وبيانات السجلّ لمساعدتك في حلّ الأخطاء عند تفعيل تسجيل الأخطاء لتطبيقات Chat. للحصول على مساعدة في عرض الأخطاء وتصحيحها وتحديد المشاكل فيها وحلّها، يُرجى الاطّلاع على مقالة تحديد المشاكل وحلّها في أخطاء Google Chat.