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

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

لتطبيق نمط التصميم المتعدد الأبعاد، لا تضمِّن السمة "اللون".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • مستخدمو Google Workspace: يمكنك تعبئة المستخدمين فقط ضمن مؤسّسة Google Workspace نفسها.
  • مساحات Chat: لا يمكن للمستخدم الذي يُدخل عناصر في قائمة الاختيار المتعدّد سوى عرض المساحات التي ينتمي إليها واختيارها ضمن مؤسسته على 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
          }
        }
      }
    }
  }
}

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

لاستخدام مصدر بيانات خارجي، استخدِم الحقل 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" في "منتقي التاريخ والوقت"

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 وحلّها.