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

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

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

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

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

استخدِم "أداة إنشاء البطاقات" لتصميم واجهات المستخدم والمراسلة لتطبيقات Chat ومعاينتها:

افتح "أداة إنشاء البطاقات"

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

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

إضافة زر

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

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

لتسهيل الاستخدام، تتيح الأزرار استخدام نص بديل.

إضافة زرّ ينفّذ دالة مخصّصة

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

إضافة زر بنمط Material Design

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

لتطبيق نمط Material Design، لا تضمِّن السمة "اللون".

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

يمكنك منع المستخدمين من النقر على زرّ من خلال ضبط "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 للمستخدمين إدخال تاريخ أو وقت أو كليهما. أو يمكن للمستخدمين استخدام أداة الاختيار لتحديد التواريخ والأوقات. إذا أدخل المستخدمون تاريخًا أو وقتًا غير صالحَين، يعرض أداة الاختيار رسالة خطأ تطلب منهم إدخال المعلومات بشكل صحيح.

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

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

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

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

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

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

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

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

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

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

إضافة مفتاح تبديل

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

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

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

يمكنك ملء عناصر قائمة منسدلة بشكل ديناميكي من مصادر البيانات في 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 عنصر تلقائيًا.

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

  • مرِّر عنصر حدث يمثّل تفاعل المستخدِم مع القائمة.
  • تأكَّد من أنّ قيمة invokedFunction في حدث التفاعل تتطابق مع الدالة من الحقل externalDataSource.
  • عندما تتطابق الدالتان، يتم عرض السلع المقترَحة من مصدر البيانات الخارجي. لاقتراح عناصر استنادًا إلى ما يكتبه المستخدم، احصل على قيمة المفتاح 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 وحلّها.