تمت ترجمة هذه الصفحة بواسطة 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، لا تضمِّن السمة "اللون".

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

يمكنك منع المستخدمين من النقر على زر من خلال ضبط "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:

مستخدمو 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

عرض على 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` إجراء في القائمة المنسدلة