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

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

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

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

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

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

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

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

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

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

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

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

إضافة مفتاح

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

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

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

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

يمكنك تعبئة عناصر لقائمة اختيار متعدّد من مصادر البيانات التالية في 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 وحلّها.