تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

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

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

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

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

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

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

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

خدمة HTTP باستخدام Google Cloud Functions
برمجة تطبيقات Google
Google Cloud Dialogflow CX
Google Cloud Pub/Sub

إضافة زر

تعرِض أداة 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 المصغّر الذي يستخدم أزرار اختيار:

إضافة مفتاح

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

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

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

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

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

Node.js

node/selection-input/index.js

العرض على GitHub

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

العرض على GitHub

'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

العرض على GitHub

.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

العرض على GitHub

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

العرض على GitHub

/**
 * 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

العرض على GitHub

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

العرض على GitHub

// 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

العرض على GitHub

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

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

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

إضافة زر

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

إضافة زرّ بتصميم Material Design

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

إضافة زرّ يتضمّن رمزًا

إضافة زرّ يتضمّن رمزًا ونصًا

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

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

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

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

جمع النصوص

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

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

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

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

إضافة مفتاح

إضافة قائمة منسدلة

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

JSON

JSON

Node.js

Python

Java

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

Node.js

Python

Java

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

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

ضبط التطبيقات المصغّرة المطلوبة للإجراءات

ضبط إجراء all_widgets_are_required في الاختيار المتعدّد

JSON

ضبط إجراء all_widgets_are_required في dateTimePicker

JSON

ضبط إجراء all_widgets_are_required في القائمة المنسدلة

JSON

ضبط عملية التحقّق من صحة أداة إدخال نص

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

JSON

ضبط نوع الإدخال لأداة إدخال النص

JSON

تحديد المشاكل وحلّها

مواضيع ذات صلة

ضبط إجراء `all_widgets_are_required` في الاختيار المتعدّد

ضبط إجراء `all_widgets_are_required` في dateTimePicker

ضبط إجراء `all_widgets_are_required` في القائمة المنسدلة