Kartlara etkileşimli kullanıcı arayüzü öğeleri ekleyin

Bu sayfada, kullanıcıların Google Chat uygulamanızla etkileşime geçebilmesi (ör. bir düğmeyi tıklayarak veya bilgi göndererek) için kartlara widget'ların ve kullanıcı arayüzü öğelerinin nasıl ekleneceği açıklanmaktadır.

Chat uygulamaları, etkileşimli kartlar oluşturmak için aşağıdaki Chat arayüzlerini kullanabilir:

  • Bir veya daha fazla kart içeren mesajlar.
  • Chat uygulamasındaki doğrudan mesajlarda Ana Sayfa sekmesinde görünen bir kart olan Ana sayfalar.
  • İletişim kutuları, mesajlar ve ana sayfalardan yeni bir pencerede açılan kartlardır.

Kullanıcılar kartlarla etkileşimde bulunduğunda Chat uygulamaları, aldıkları verileri işlemek ve buna göre yanıt vermek için kullanabilir. Ayrıntılı bilgi için Google Chat kullanıcılarından bilgi toplama ve işleme başlıklı makaleyi inceleyin.

Chat uygulamaları için mesajlaşma ve kullanıcı arayüzlerini tasarlamak ve önizlemek üzere Kart Oluşturucu'yu kullanın:

Kart Oluşturucu'yu açma

Ön koşullar

Etkileşimli özellikler için etkinleştirilmiş bir Google Chat uygulaması. Etkileşimli bir Chat uygulaması oluşturmak için kullanmak istediğiniz uygulama mimarisine göre aşağıdaki hızlı başlangıç kılavuzlarından birini tamamlayın:

Düğme ekleme

ButtonList widget'ı bir dizi düğme gösterir. Düğmeler metin, simge veya hem metin hem de simge görüntüleyebilir. Her bir Button, kullanıcılar düğmeyi tıkladığında gerçekleşen OnClick işlemini destekler. Örneğin:

  • Kullanıcılara ek bilgi sağlamak için OpenLink ile köprü açın.
  • API çağırma gibi özel bir işlev çalıştıran bir action çalıştırın.

Düğmeler, erişilebilirlik için alternatif metni destekler.

Özel işlev çalıştıran bir düğme ekleme

Aşağıda, iki düğmeli bir ButtonList widget'ından oluşan bir kart gösterilmektedir. Bir düğmeyle Google Chat geliştirici dokümanlarını yeni bir sekmede açabilirsiniz. Diğer düğme, goToView() adlı özel bir işlevi çalıştırır ve viewType="BIRD EYE VIEW" parametresini iletir.

Materyal Tasarım stilinde bir düğme ekleme

Aşağıda, farklı Materyal Tasarım düğme stillerinde bir dizi düğme gösterilmektedir.

Materyal Tasarım stilini uygulamak için "renk" özelliğini eklemeyin.

Özel renk ve devre dışı bırakılmış düğme içeren bir düğme ekleyin

"disabled": "true" değerini ayarlayarak kullanıcıların bir düğmeyi tıklamasını engelleyebilirsiniz.

Aşağıda, iki düğmeli ButtonList widget'ından oluşan bir kart görüntülenmektedir. Bir düğmenin arka plan rengini özelleştirmek için Color alanı kullanılır. Diğer düğme, Disabled alanıyla devre dışı bırakılır. Bu, kullanıcının düğmeyi tıklayıp işlevi yürütmesini engeller.

Simge içeren bir düğme ekleyin

Aşağıda, iki simgeli Button widget'ının bulunduğu ButtonList widget'ından oluşan bir kart gösterilmektedir. Bir düğme, Google Chat'in yerleşik e-posta simgesini görüntülemek için knownIcon alanını kullanır. Diğer düğme, özel simge widget'ı görüntülemek için iconUrl alanını kullanır.

Simge ve metin içeren bir düğme ekleyin

Aşağıda, kullanıcıdan e-posta göndermesini isteyen bir ButtonList widget'ından oluşan bir kart gösterilmektedir. İlk düğmede e-posta simgesi, ikinci düğmede ise metin gösterilir. Kullanıcı, sendEmail işlevini çalıştırmak için simgeyi veya metin düğmesini tıklayabilir.

Katlanabilir bir bölüm için düğmeyi özelleştirme

Bir kart içindeki bölümleri daraltan ve genişleten kontrol düğmesini özelleştirin. Bölümün içeriğini görsel olarak temsil edecek bir dizi simge veya resim arasından seçim yaparak kullanıcıların bilgileri anlamasını ve bunlarla etkileşim kurmasını kolaylaştırın.

Taşma menüsü ekleme

Overflow menu, ek seçenekler ve işlemler sunmak için Chat kartlarında kullanılabilir. Kartın arayüzünü sadeleştirerek daha fazla seçenek eklemenize olanak tanıyarak temiz ve düzenli bir tasarım sağlar.

Çip listesi ekleme

ChipList widget'ı, bilgileri görüntülemek için çok yönlü ve görsel olarak çekici bir yol sunar. Etiketleri, kategorileri veya diğer alakalı verileri temsil etmek için çip listeleri kullanın. Böylece kullanıcıların içeriğinizde gezinmesini ve içeriğinizle etkileşim kurmasını kolaylaştırabilirsiniz.

Kullanıcılardan bilgi toplama

Bu bölümde, metin veya seçimler gibi bilgi toplayan widget'ları nasıl ekleyeceğiniz açıklanmaktadır.

Kullanıcıların girdiği bilgileri nasıl işleyeceğinizi öğrenmek için Google Chat kullanıcılarından bilgi toplama ve işleme başlıklı makaleyi inceleyin.

Metin toplama

TextInput widget'ı, kullanıcıların metin girebileceği bir alan sağlar. Widget, kullanıcıların tek tip veriler girmesine yardımcı olan önerileri ve metin giriş alanında bir değişiklik yapıldığında (ör. kullanıcı metin eklediğinde veya sildiğinde) çalışan değişiklikle ilgili işlemleri Actions destekler.

Kullanıcılardan soyut veya bilinmeyen veriler toplamanız gerektiğinde bu TextInput widget'ını kullanın. Kullanıcılardan tanımlanmış verileri toplamak için SelectionInput widget'ını kullanın.

Aşağıda, TextInput widget'ından oluşan bir kart gösterilmektedir:

Tarih veya saat toplama

DateTimePicker widget'ı kullanıcıların tarih, saat veya hem tarih hem de saat girmesini sağlar. Alternatif olarak, kullanıcılar tarih ve saatleri seçmek için seçiciyi kullanabilir. Kullanıcılar geçersiz bir tarih veya saat girerse seçici, kullanıcılardan bilgileri doğru şekilde girmelerini isteyen bir hata gösterir.

Aşağıda, üç farklı türde DateTimePicker widget'ından oluşan bir kart gösterilmektedir:

Kullanıcıların öğe seçmesine izin verme

SelectionInput widget'ı onay kutuları, radyo düğmeleri, anahtarlar veya açılır menü gibi bir dizi seçilebilir öğe sunar. Kullanıcılardan tanımlanmış ve standartlaştırılmış veriler toplamak için bu widget'ı kullanabilirsiniz. Kullanıcılardan tanımlanmamış veriler toplamak için bunun yerine TextInput widget'ını kullanın.

SelectionInput widget'ı, kullanıcıların tek tip veri girmesine yardımcı olan önerileri ve seçim giriş alanında bir değişiklik gerçekleştiğinde (ör. kullanıcının bir öğeyi seçmesi veya seçimini kaldırması) çalıştırılan Actions işlemlerini destekler.

Chat uygulamaları, seçilen öğelerin değerini alıp işleyebilir. Form girişleriyle çalışma hakkında ayrıntılar için Kullanıcıların girdiği bilgileri işleme sayfasına göz atın.

Bu bölümde, SelectionInput widget'ını kullanan kartlara örnekler verilmiştir. Örneklerde farklı bölüm girişleri kullanılmaktadır:

Onay kutusu ekleme

Aşağıdakiler, onay kutuları kullanan bir SelectionInput widget'ı ile kullanıcıdan bir kişinin profesyonel mi, kişisel mi yoksa her ikisini de mi belirtmesini isteyen bir kart görüntüler:

Radyo düğmesi ekleme

Aşağıdakiler, radyo düğmeleri kullanan bir SelectionInput widget'ı ile kullanıcıdan bir kişinin profesyonel mi yoksa kişisel mi olduğunu belirtmesini isteyen bir kart görüntüler:

Anahtar ekleme

Aşağıdakiler, anahtarları kullanan bir SelectionInput widget'ı ile kullanıcıdan bir kişinin profesyonel mi, kişisel mi yoksa her ikisinin birden mi geçerli olduğunu belirtmesini isteyen bir kart görüntüler:

Aşağıda, kullanıcıdan bir kişinin profesyonel mi yoksa kişisel mi olduğunu belirtmesini isteyen bir kart gösterilmektedir. Bu kartta, açılır menü kullanan bir SelectionInput widget'ı yer alır:

Çoklu seçim menüsü ekleme

Aşağıda, kullanıcıdan çoklu seçim menüsünden kişileri seçmesini isteyen bir kart görüntülenmektedir:

Google Workspace'teki aşağıdaki veri kaynaklarından çoklu seçim menüsü öğeleri doldurabilirsiniz:

  • Google Workspace kullanıcıları: Yalnızca aynı Google Workspace kuruluşundaki kullanıcıları doldurabilirsiniz.
  • Chat alanları: Çoklu seçim menüsüne öğe giren kullanıcı, yalnızca Google Workspace kuruluşunda ait olduğu alanları görüntüleyebilir ve seçebilir.

Google Workspace veri kaynaklarını kullanmak için platformDataSource alanını belirtirsiniz. Diğer seçim girişi türlerinden farklı olarak, bu seçim öğeleri Google Workspace'ten dinamik olarak alındığından SectionItem nesnelerini çıkarırsınız.

Aşağıdaki kodda, Google Workspace kullanıcılarının çoklu seçim menüsü gösterilmektedir. Seçim girişi, kullanıcıları doldurmak için commonDataSource değerini USER olarak ayarlar:

JSON

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

Aşağıdaki kodda, Sohbet alanlarını içeren bir çoklu seçim menüsü gösterilmektedir. Boşlukları doldurmak için seçim girişi hostAppDataSource alanını belirtir. Çoklu seçim menüsü, mevcut alanı menüdeki varsayılan seçim haline getiren defaultToCurrentSpace değerini de true olarak ayarlar:

JSON

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

Çoklu seçim menüleri, üçüncü taraf veya harici veri kaynağındaki öğeleri de doldurabilir. Örneğin, kullanıcının bir müşteri ilişkileri yönetimi (CRM) sisteminden satış potansiyeli müşterileri listesinde seçim yapmasına yardımcı olmak için çoklu seçim menüleri kullanabilirsiniz.

Harici bir veri kaynağı kullanmak isterseniz veri kaynağındaki öğeleri döndüren bir işlev belirtmek için externalDataSource alanını kullanırsınız.

Harici bir veri kaynağına yapılan istekleri azaltmak için kullanıcılar menüye yazmadan önce çoklu seçim menüsünde görünen önerilen öğeleri ekleyebilirsiniz. Örneğin, kullanıcı için son aranan kişileri doldurabilirsiniz. Önerilen öğeleri harici bir veri kaynağından doldurmak için SelectionItem nesnelerini belirtin.

Aşağıdaki kodda, kullanıcının harici bir kişi grubundaki öğelerin yer aldığı çoklu seçim menüsü gösterilmektedir. Menüde varsayılan olarak bir kişi gösterilir ve harici veri kaynağından öğe alıp doldurmak için getContacts işlevi çalıştırılır:

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 Komut Dosyası

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

Harici veri kaynakları için, kullanıcıların çoklu seçim menüsünde yazmaya başladığı öğeleri de otomatik olarak tamamlayabilirsiniz. Örneğin, bir kullanıcı ABD'deki şehirlerin doldurulduğu bir menü için Atl yazmaya başlarsa Chat uygulamanız, kullanıcı yazmayı tamamlamadan Atlanta önce otomatik olarak öneride bulunabilir. En fazla 100 öğeyi otomatik tamamlayabilirsiniz.

Öğeleri otomatik olarak tamamlamak için harici veri kaynağını sorgulayan ve bir kullanıcı çoklu seçim menüsüne her yazdığında öğeleri döndüren bir işlev oluşturursunuz. İşlev aşağıdakileri yapmalıdır:

  • Kullanıcının menüyle etkileşimini temsil eden bir etkinlik nesnesi iletin.
  • Etkileşim etkinliğinin invokedFunction değerinin externalDataSource alanındaki işlevle eşleştiğini belirleyin.
  • İşlevler eşleştiğinde harici veri kaynağından önerilen öğeleri döndürür. Kullanıcının yazdıklarına göre öğe önermek için autocomplete_widget_query anahtarının değerini alın. Bu değer, kullanıcının menüde yazdığı şeyi temsil eder.

Aşağıdaki kod, harici bir veri kaynağındaki öğeleri otomatik olarak tamamlar. Önceki örneğe göre Chat uygulaması, getContacts işlevinin tetiklendiği zamana göre öğeler önerir:

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 Komut Dosyası

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

Kartlara girilen verileri doğrulayın

Bu sayfada, kartın action ve widget'larına girilen verilerin nasıl doğrulanacağı açıklanmaktadır. Örneğin, bir metin giriş alanına kullanıcı tarafından girilen metni veya belirli sayıda karakter içerdiğini doğrulayabilirsiniz.

İşlemler için gerekli widget'ları ayarla

Kartın action bölümünde, bir işlemin ihtiyaç duyduğu widget'ların adlarını requiredWidgets listesine ekleyin.

Bu işlem çağrıldığında burada listelenen widget'ların hiçbirinde değer yoksa form işlemi gönderimi iptal edilir.

"all_widgets_are_required": "true" bir işlem için ayarlandığında, bu işlemin karttaki tüm widget'ları kullanması gerekir.

Çoklu seçimde all_widgets_are_required işlemi ayarlama

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
              }
            ]
          }
        }
      ]
    }
  ]
}
dateTime Picker'da bir all_widgets_are_required işlemi ayarlayın

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"
          }
        }
      ]
    }
  ]
}
Açılır menüde all_widgets_are_required işlemi ayarlama

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

Metin girişi widget'ı için doğrulamayı ayarlama

textInput widget'ının doğrulama alanında, bu metin giriş widget'ı için karakter sınırını ve giriş türünü belirtebilirsiniz.

Metin girişi widget'ı için karakter sınırlaması ayarlayın

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
            }
          }
        }
      ]
    }
  ]
}
Metin girişi widget'ı için giriş türünü ayarlayın

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

Sorun giderme

Bir Google Chat uygulaması veya kartı hata döndürdüğünde Chat arayüzünde "Bir hata oluştu" mesajı gösterilir. veya "İsteğiniz işlenemiyor." Bazı durumlarda Chat kullanıcı arayüzünde herhangi bir hata mesajı gösterilmez ancak Chat uygulaması veya kartı beklenmedik bir sonuç verir. Örneğin, kart mesajı görünmeyebilir.

Chat kullanıcı arayüzünde hata mesajı görüntülenmeyebilir. Ancak Chat uygulamaları için hata günlük kaydı etkinleştirildiğinde hataları düzeltmenize yardımcı olmak amacıyla açıklayıcı hata mesajları ve günlük verileri sunulur. Hataları görüntüleme, hata ayıklama ve düzeltme konusunda yardım almak için Google Chat hatalarını giderme ve düzeltme başlıklı makaleyi inceleyin.