عناصر رابط کاربری تعاملی را به کارت ها اضافه کنید

این صفحه نحوه اضافه کردن ابزارک‌ها و عناصر رابط کاربری به کارت‌ها را توضیح می‌دهد تا کاربران بتوانند با برنامه Google Chat شما تعامل داشته باشند، مانند کلیک کردن روی یک دکمه یا ارسال اطلاعات.

برنامه‌های چت می‌توانند از رابط‌های چت زیر برای ساخت کارت‌های تعاملی استفاده کنند:

  • پیام‌هایی که حاوی یک یا چند کارت هستند.
  • صفحات اصلی ، که کارتی است که از برگه «خانه» در پیام‌های مستقیم با برنامه چت ظاهر می‌شود.
  • دیالوگ‌ها ، که کارت‌هایی هستند که در یک پنجره جدید از پیام‌ها و صفحات اصلی باز می‌شوند.

وقتی کاربران با کارت‌ها تعامل می‌کنند، برنامه‌های چت می‌توانند از داده‌های دریافتی برای پردازش و پاسخ‌دهی متناسب استفاده کنند. برای جزئیات بیشتر، به بخش «جمع‌آوری و پردازش اطلاعات از کاربران گوگل چت» مراجعه کنید.

از Card Builder برای طراحی و پیش‌نمایش پیام‌رسانی و رابط‌های کاربری برای برنامه‌های چت استفاده کنید:

سازنده کارت را باز کنید

پیش‌نیازها

یک برنامه گوگل چت که برای دریافت و پاسخ به رویدادهای تعاملی پیکربندی شده است. برای ایجاد یک برنامه چت تعاملی، بر اساس معماری برنامه‌ای که می‌خواهید استفاده کنید، یکی از مراحل شروع سریع زیر را انجام دهید:

یک دکمه اضافه کنید

ویجت ButtonList مجموعه‌ای از دکمه‌ها را نمایش می‌دهد. دکمه‌ها می‌توانند متن، یک آیکون یا هر دو متن و یک آیکون را نمایش دهند. هر Button از یک عمل OnClick پشتیبانی می‌کند که هنگام کلیک کاربران روی دکمه رخ می‌دهد. به عنوان مثال:

  • برای ارائه اطلاعات بیشتر به کاربران، یک هایپرلینک را با OpenLink باز کنید.
  • action را اجرا کنید که یک تابع سفارشی را اجرا کند، مانند فراخوانی یک API.

برای دسترسی‌پذیری، دکمه‌ها از متن جایگزین پشتیبانی می‌کنند.

دکمه‌ای اضافه کنید که یک تابع سفارشی را اجرا کند

در ادامه، کارتی متشکل از یک ویجت ButtonList با دو دکمه را مشاهده می‌کنید. یکی از دکمه‌ها، مستندات توسعه‌دهندگان Google Chat را در یک تب جدید باز می‌کند. دکمه‌ی دیگر، یک تابع سفارشی به نام goToView() را اجرا می‌کند و پارامتر viewType="BIRD EYE VIEW" را ارسال می‌کند.

یک دکمه با سبک طراحی متریال اضافه کنید

در ادامه مجموعه‌ای از دکمه‌ها با سبک‌های مختلف طراحی متریال نمایش داده شده است.

برای اعمال سبک طراحی متریال، ویژگی «رنگ» را وارد نکنید.

یک دکمه با رنگ دلخواه و یک دکمه غیرفعال اضافه کنید

شما می‌توانید با تنظیم "disabled": "true" از کلیک کردن کاربران روی یک دکمه جلوگیری کنید.

در ادامه، کارتی شامل یک ویجت ButtonList با دو دکمه نمایش داده می‌شود. یکی از دکمه‌ها از فیلد Color برای سفارشی‌سازی رنگ پس‌زمینه دکمه استفاده می‌کند. دکمه دیگر با فیلد Disabled غیرفعال شده است که مانع از کلیک کاربر روی دکمه و اجرای تابع می‌شود.

یک دکمه با آیکون اضافه کنید

کد زیر کارتی را نمایش می‌دهد که شامل یک ویجت ButtonList با دو ویجت Button آیکون است. یکی از دکمه‌ها از فیلد knownIcon برای نمایش آیکون ایمیل داخلی Google Chat استفاده می‌کند. دکمه دیگر از فیلد iconUrl برای نمایش یک ویجت آیکون سفارشی استفاده می‌کند.

یک دکمه با آیکون و متن اضافه کنید

در ادامه، کارتی شامل یک ویجت ButtonList نمایش داده می‌شود که کاربر را به ارسال ایمیل ترغیب می‌کند. دکمه اول، آیکون ایمیل و دکمه دوم، متن را نمایش می‌دهد. کاربر می‌تواند برای اجرای تابع sendEmail ، روی آیکون یا دکمه متن کلیک کند.

دکمه را برای یک بخش تاشو سفارشی کنید

دکمه کنترلی که بخش‌های درون کارت را جمع و باز می‌کند، سفارشی‌سازی کنید. از بین طیف وسیعی از آیکون‌ها یا تصاویر، برای نمایش بصری محتوای بخش، یکی را انتخاب کنید و درک و تعامل کاربران با اطلاعات را آسان‌تر کنید.

یک منوی سرریز اضافه کنید

Overflow menu می‌تواند در کارت‌های چت برای ارائه گزینه‌ها و اقدامات اضافی استفاده شود. این منو به شما امکان می‌دهد گزینه‌های بیشتری را بدون شلوغ کردن رابط کارت اضافه کنید و از طراحی تمیز و سازمان‌یافته اطمینان حاصل کنید.

اضافه کردن لیست چیپس‌ها

ویجت ChipList روشی متنوع و بصری جذاب برای نمایش اطلاعات ارائه می‌دهد. از لیست‌های چیپ برای نمایش برچسب‌ها، دسته‌ها یا سایر داده‌های مرتبط استفاده کنید و پیمایش و تعامل با محتوای خود را برای کاربران آسان‌تر کنید.

جمع‌آوری اطلاعات از کاربران

این بخش توضیح می‌دهد که چگونه می‌توانید ویجت‌هایی را اضافه کنید که اطلاعاتی مانند متن یا انتخاب‌ها را جمع‌آوری می‌کنند.

برای آشنایی با نحوه پردازش ورودی‌های کاربران، به بخش جمع‌آوری و پردازش اطلاعات از کاربران گوگل چت مراجعه کنید.

جمع آوری متن

ویجت TextInput فیلدی را فراهم می‌کند که کاربران می‌توانند در آن متن وارد کنند. این ویجت از پیشنهادها پشتیبانی می‌کند که به کاربران کمک می‌کند داده‌های یکنواختی را وارد کنند و از اقدامات هنگام تغییر پشتیبانی می‌کند، Actions که هنگام ایجاد تغییر در فیلد ورودی متن اجرا می‌شوند، مانند اضافه کردن یا حذف متن توسط کاربر.

وقتی نیاز به جمع‌آوری داده‌های انتزاعی یا ناشناخته از کاربران دارید، از این ویجت TextInput استفاده کنید. برای جمع‌آوری داده‌های تعریف‌شده از کاربران، به جای آن از ویجت SelectionInput استفاده کنید.

در زیر یک کارت متشکل از یک ویجت TextInput مشاهده می‌کنید:

جمع‌آوری تاریخ یا زمان

ویجت DateTimePicker به کاربران اجازه می‌دهد تا یک تاریخ، یک زمان یا هر دو را وارد کنند. یا کاربران می‌توانند از انتخابگر برای انتخاب تاریخ‌ها و زمان‌ها استفاده کنند. اگر کاربران تاریخ یا زمان نامعتبری وارد کنند، انتخابگر خطایی را نشان می‌دهد که از کاربران می‌خواهد اطلاعات را به درستی وارد کنند.

در زیر کارتی متشکل از سه نوع مختلف ویجت DateTimePicker نمایش داده شده است:

به کاربران اجازه دهید موارد را انتخاب کنند

ویجت SelectionInput مجموعه‌ای از آیتم‌های قابل انتخاب، مانند چک‌باکس‌ها، دکمه‌های رادیویی، سوئیچ‌ها یا یک منوی کشویی را فراهم می‌کند. می‌توانید از این ویجت برای جمع‌آوری داده‌های تعریف‌شده و استاندارد از کاربران استفاده کنید. برای جمع‌آوری داده‌های تعریف‌نشده از کاربران، به جای آن از ویجت TextInput استفاده کنید.

ویجت SelectionInput از پیشنهادها، که به کاربران کمک می‌کند داده‌های یکنواختی را وارد کنند، و اقدامات هنگام تغییر، که Actions هستند که هنگام وقوع تغییر در یک فیلد ورودی انتخاب، مانند انتخاب یا لغو انتخاب یک مورد توسط کاربر، اجرا می‌شوند، پشتیبانی می‌کند.

برنامه‌های چت می‌توانند مقدار موارد انتخاب شده را دریافت و پردازش کنند. برای جزئیات بیشتر در مورد کار با ورودی‌های فرم، به بخش «پردازش اطلاعات ورودی توسط کاربران» مراجعه کنید.

این بخش نمونه‌هایی از کارت‌هایی را ارائه می‌دهد که از ویجت SelectionInput استفاده می‌کنند. این مثال‌ها از انواع مختلف ورودی‌های بخش استفاده می‌کنند:

اضافه کردن کادر انتخاب

در ادامه، کارتی نمایش داده می‌شود که از کاربر می‌خواهد مشخص کند که آیا یک مخاطب، حرفه‌ای، شخصی یا هر دو است و این کار را با استفاده از ویجت SelectionInput که از کادرهای انتخاب استفاده می‌کند، انجام می‌دهد:

اضافه کردن دکمه رادیویی

در ادامه، کارتی نمایش داده می‌شود که از کاربر می‌خواهد با استفاده از ویجت SelectionInput که از دکمه‌های رادیویی استفاده می‌کند، مشخص کند که آیا مخاطب مورد نظر حرفه‌ای است یا شخصی:

اضافه کردن سوئیچ

در ادامه، کارتی نمایش داده می‌شود که از کاربر می‌خواهد با استفاده از ویجت SelectionInput که از سوئیچ‌ها استفاده می‌کند، مشخص کند که آیا یک مخاطب حرفه‌ای، شخصی یا هر دو است:

در ادامه، کارتی نمایش داده می‌شود که از کاربر می‌خواهد با استفاده از ویجت SelectionInput که از یک منوی کشویی استفاده می‌کند، مشخص کند که آیا مخاطب مورد نظر حرفه‌ای است یا شخصی:

منوهای کشویی را به صورت پویا پر کنید

شما می‌توانید به صورت پویا آیتم‌های یک منوی کشویی را از منابع داده در Google Workspace یا از یک منبع داده خارجی پر کنید. برای استفاده از منابع داده پویا، فیلد data_source_configs را مشخص می‌کنید که آرایه‌ای از اشیاء DataSourceConfig است. هر DataSourceConfig می‌تواند شامل یک platformDataSource یا یک remoteDataSource باشد. در حال حاضر فقط یک DataSourceConfig پشتیبانی می‌شود.

موارد را از Google Workspace پر کنید

برای پر کردن آیتم‌ها از منابع داده Google Workspace، مانند کاربران Google Workspace، فیلد platformDataSource را در DataSourceConfig مشخص می‌کنید. برخلاف استفاده از items استاتیک، اشیاء SelectionItem را حذف می‌کنید، زیرا این آیتم‌های انتخابی به صورت پویا از Google Workspace منبع‌یابی می‌شوند.

کد زیر یک منوی کشویی را نشان می‌دهد که کاربران Google Workspace را نمایش می‌دهد:

جی‌سون 

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "contacts",
            "type": "DROPDOWN",
            "label": "Select contact from organization",
            "data_source_configs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "min_characters_trigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}
پر کردن آیتم‌ها از یک منبع داده خارجی

برای پر کردن موارد از یک منبع داده شخص ثالث یا خارجی، مانند یک سیستم مدیریت ارتباط با مشتری (CRM)، از فیلد remoteDataSource در DataSourceConfig برای مشخص کردن تابعی که موارد را از منبع داده برمی‌گرداند، استفاده می‌کنید.

کد زیر یک منوی کشویی را نشان می‌دهد که با اجرای تابع getCrmLeads ، آیتم‌هایی را از یک مجموعه مخاطبین خارجی پر می‌کند:

جی‌سون 

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "crm_leads",
            "type": "DROPDOWN",
            "label": "Select CRM Lead",
            "data_source_configs": [
              {
                "remoteDataSource": {
                  "function": "getCrmLeads"
                },
                "min_characters_trigger": 2
              }
            ],
            "items": [
              {
                "text": "Suggested Lead 1",
                "value": "lead-1"
              }
            ]
          }
        }
      ]
    }
  ]
}

برای کاهش درخواست‌ها به یک منبع داده پویا، می‌توانید موارد پیشنهادی را که قبل از تایپ کاربران در منوی کشویی ظاهر می‌شوند، اضافه کنید. همچنین می‌توانید با تنظیم min_characters_trigger در DataSourceConfig ، منوی کشویی را طوری پیکربندی کنید که موارد را بر اساس آنچه کاربران تایپ می‌کنند، به صورت خودکار تکمیل کند. وقتی کاربری حداقل تعداد کاراکترهای مشخص شده در min_characters_trigger را تایپ کند، تابع مشخص شده در remoteDataSource فعال می‌شود. شیء رویداد ارسال شده به تابع شما، ورودی کاربر را در کلید autocomplete_widget_query لحاظ می‌کند.

اضافه کردن منوی چندگزینه‌ای

در ادامه، کارتی نمایش داده می‌شود که از کاربر می‌خواهد مخاطبین را از یک منوی چندگزینه‌ای انتخاب کند:

می‌توانید موارد مربوط به یک منوی چندگزینه‌ای را از منابع داده زیر در Google Workspace پر کنید:

  • کاربران Google Workspace : شما فقط می‌توانید کاربرانی را که در یک سازمان Google Workspace هستند، وارد کنید.
  • فضاهای چت : کاربری که موارد را در منوی چندگزینه‌ای وارد می‌کند، فقط می‌تواند فضاهایی را که به آنها در سازمان Google Workspace خود تعلق دارد، مشاهده و انتخاب کند.

برای استفاده از منابع داده Google Workspace، فیلد platformDataSource را مشخص می‌کنید. برخلاف سایر انواع ورودی‌های انتخابی، اشیاء SelectionItem را حذف می‌کنید، زیرا این آیتم‌های انتخابی به صورت پویا از Google Workspace منبع‌یابی می‌شوند.

کد زیر یک منوی چندگزینه‌ای از کاربران Google Workspace را نشان می‌دهد. برای پر کردن کاربران، ورودی انتخاب، commonDataSource را روی USER تنظیم می‌کند:

جی‌سون 

{
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "commonDataSource": "USER"
    }
  }
}

کد زیر یک منوی چندگزینه‌ای از فضاهای چت را نشان می‌دهد. برای پر کردن فضاها، ورودی انتخاب، فیلد hostAppDataSource را مشخص می‌کند. منوی چندگزینه‌ای همچنین defaultToCurrentSpace روی true تنظیم می‌کند که فضای فعلی را به عنوان انتخاب پیش‌فرض در منو قرار می‌دهد:

جی‌سون 

{
  "selectionInput": {
    "name": "spaces",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 3,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "hostAppDataSource": {
        "chatDataSource": {
          "spaceDataSource": {
            "defaultToCurrentSpace": true
          }
        }
      }
    }
  }
}

منوهای چندگزینه‌ای همچنین می‌توانند مواردی را از یک منبع داده شخص ثالث یا خارجی پر کنند. به عنوان مثال، می‌توانید از منوهای چندگزینه‌ای برای کمک به کاربر در انتخاب از لیست سرنخ‌های فروش از یک سیستم مدیریت ارتباط با مشتری (CRM) استفاده کنید.

برای استفاده از یک منبع داده خارجی، از فیلد externalDataSource برای مشخص کردن تابعی که آیتم‌ها را از منبع داده برمی‌گرداند، استفاده می‌کنید.

برای کاهش درخواست‌ها به یک منبع داده خارجی، می‌توانید موارد پیشنهادی را که در منوی چندگزینه‌ای قبل از تایپ کاربر در منو ظاهر می‌شوند، اضافه کنید. به عنوان مثال، می‌توانید مخاطبین اخیراً جستجو شده را برای کاربر پر کنید. برای پر کردن موارد پیشنهادی از یک منبع داده خارجی، اشیاء SelectionItem را مشخص کنید.

کد زیر یک منوی چندگزینه‌ای از آیتم‌ها از یک مجموعه مخاطبین خارجی را برای کاربر نشان می‌دهد. این منو به طور پیش‌فرض یک مخاطب را نمایش می‌دهد و تابع getContacts را برای بازیابی و پر کردن آیتم‌ها از منبع داده خارجی اجرا می‌کند:

نود جی اس

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")]
}

پایتون

پایتون/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/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 برای منویی کند که شامل شهرهای ایالات متحده است، برنامه چت شما می‌تواند قبل از اینکه کاربر تایپ خود را تمام کند، به طور خودکار Atlanta پیشنهاد دهد. می‌توانید تا ۱۰۰ مورد را به صورت خودکار تکمیل کنید.

برای تکمیل خودکار آیتم‌ها، تابعی ایجاد می‌کنید که از منبع داده خارجی پرس‌وجو می‌کند و هر زمان که کاربر در منوی چندگزینه‌ای تایپ می‌کند، آیتم‌ها را برمی‌گرداند. این تابع باید موارد زیر را انجام دهد:

  • یک شیء رویداد که نشان‌دهنده‌ی تعامل کاربر با منو است، ارسال کنید.
  • مشخص کنید که مقدار invokedFunction رویداد تعامل با تابع موجود در فیلد externalDataSource مطابقت دارد.
  • وقتی توابع مطابقت داشتند، موارد پیشنهادی را از منبع داده خارجی برگردانید. برای پیشنهاد موارد بر اساس آنچه کاربر تایپ می‌کند، مقدار کلید autocomplete_widget_query را دریافت کنید. این مقدار نشان دهنده چیزی است که کاربر در منو تایپ می‌کند.

کد زیر آیتم‌ها را از یک منبع داده خارجی به صورت خودکار تکمیل می‌کند. با استفاده از مثال قبلی، برنامه چت بر اساس زمان فعال شدن تابع getContacts ، آیتم‌هایی را پیشنهاد می‌دهد:

نود جی اس

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
  };
}

پایتون

پایتون/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/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 در multiselect

جی‌سون 

{
  "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 تنظیم کنید.

جی‌سون 

{
  "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 در منوی کشویی تنظیم کنید

جی‌سون 

{
  "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 ، می‌توان محدودیت کاراکتر و نوع ورودی را برای این ویجت ورودی متن مشخص کرد.

محدودیت کاراکتر برای ویجت ورودی متن تنظیم کنید

جی‌سون 

{
  "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
            }
          }
        }
      ]
    }
  ]
}
نوع ورودی را برای یک ویجت ورودی متن تنظیم کنید

جی‌سون 

{
  "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"
            }
          }
        }
      ]
    }
  ]
}

عیب‌یابی

وقتی یک برنامه یا کارت چت گوگل خطایی را برمی‌گرداند، رابط چت پیامی با عنوان «مشکلی پیش آمده است» یا «درخواست شما قابل پردازش نیست» نمایش می‌دهد. گاهی اوقات رابط کاربری چت هیچ پیام خطایی را نمایش نمی‌دهد، اما برنامه یا کارت چت نتیجه غیرمنتظره‌ای را ایجاد می‌کند؛ برای مثال، ممکن است پیام کارت ظاهر نشود.

اگرچه ممکن است پیام خطا در رابط کاربری چت نمایش داده نشود، پیام‌های خطای توصیفی و داده‌های گزارش برای کمک به شما در رفع خطاها هنگام فعال بودن ثبت خطا برای برنامه‌های چت در دسترس هستند. برای کمک به مشاهده، اشکال‌زدایی و رفع خطاها، به عیب‌یابی و رفع خطاهای گوگل چت مراجعه کنید.