Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Bu sayfada, kullanıcıların Google Chat uygulamanızla etkileşim kurabilmesi için kartlara nasıl widget ve kullanıcı arayüzü öğesi ekleneceği açıklanmaktadır. Kullanıcılar, örneğin bir düğmeyi tıklayabilir veya bilgi gönderebilir.

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ıyla doğrudan mesajlarda Ana Sayfa sekmesinden görünen bir kart olan ana sayfalar.
İletişim kutuları: İletilerden 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 bu bilgileri işleme başlıklı makaleyi inceleyin.

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

Kart Oluşturucu'yu açın

Ön koşullar

Etkileşim etkinliklerini alıp bunlara yanıt verecek şekilde yapılandırılmış 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ıçlardan birini tamamlayın:

Düğme ekleme

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

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

Erişilebilirlik için düğmelerde alternatif metin desteği bulunur.

Ö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üğme, Google Chat geliştirici dokümanlarını yeni sekmede açar. Diğer düğme, goToView() adlı özel bir işlevi çalıştırır ve viewType="BIRD EYE VIEW" parametresini iletir.

Material Design stiline sahip bir düğme ekleme

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

Material Design stilini uygulamak için "renk" özelliğini eklemeyin.

Özel renge sahip bir düğme ve devre dışı bırakılmış bir düğme ekleme

"disabled": "true" ayarını yaparak kullanıcıların bir düğmeyi tıklamasını engelleyebilirsiniz.

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

Simge içeren bir düğme ekleme

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

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

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.

Daraltılabilir bir bölümün düğmesini özelleştirme

Bir karttaki bölümleri daraltıp genişleten kontrol düğmesini özelleştirin. Bölümün içeriğini görsel olarak temsil etmek için çeşitli simgeler veya resimler arasından seçim yapın. Böylece kullanıcılar bilgileri daha kolay anlayıp bunlarla etkileşim kurabilir.

Taşma menüsü ekleme

Overflow menu, Chat kartlarında ek seçenekler ve işlemler sunmak için kullanılabilir. Bu özellik, kartın arayüzünü karıştırmadan daha fazla seçenek eklemenize olanak tanır ve temiz ve düzenli bir tasarım sağlar.

Çip listesi ekleme

ChipList widget'ı, bilgileri çok yönlü ve görsel açıdan çekici bir şekilde görüntülemenizi sağlar. Etiketleri, kategorileri veya diğer alakalı verileri temsil etmek için çip listelerini kullanın. Böylece kullanıcıların içeriğinizde gezinmesi ve içerikle etkileşimde bulunması kolaylaşır.

Kullanıcılardan bilgi toplama

Bu bölümde, metin veya seçim gibi bilgileri toplayan widget'ları nasıl ekleyebileceğ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 bu bilgileri 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 değişiklik olduğunda (ör. kullanıcı metin eklediğinde veya sildiğinde) çalışan Actions olan on-change eylemlerini destekler.

Kullanıcılardan soyut veya bilinmeyen veriler toplamanız gerektiğinde bu TextInput widget'ını kullanın. Kullanıcılardan tanımlı verileri toplamak için bunun yerine 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 girmesine olanak tanır. Kullanıcılar, tarih ve saat seçmek için seçiciyi de kullanabilir. Kullanıcılar geçersiz bir tarih veya saat girerse seçicide, kullanıcılardan bilgileri doğru şekilde girmelerini isteyen bir hata gösterilir.

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

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

SelectionInput widget'ı onay kutuları, radyo düğmeleri, anahtarlar veya açılır menü gibi bir dizi seçilebilir öğe sağlar. Bu widget'ı kullanarak kullanıcılardan tanımlanmış ve standartlaştırılmış veriler toplayabilirsiniz. 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 bir seçim giriş alanında değişiklik olduğunda (ör. kullanıcı bir öğeyi seçtiğinde veya seçimini kaldırdığında) çalışan Actions olan değişiklik üzerine işlemleri destekler.

Sohbet uygulamaları, seçilen öğelerin değerini alıp işleyebilir. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Kullanıcılar tarafından girilen bilgileri işleme başlıklı makaleye bakın.

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

Onay kutuları
Radyo düğmeleri
Anahtarlar
Açılır menü
Çoklu seçim menüsü

Onay kutusu ekleme

Aşağıda, kullanıcının bir kişinin profesyonel mi, kişisel mi yoksa her ikisi mi olduğunu belirtmesini isteyen bir kart gösterilmektedir. Bu kartta, onay kutularını kullanan bir SelectionInput widget'ı bulunur:

Radyo düğmesi ekleme

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

Anahtar ekleme

Aşağıdaki resimde, kullanıcının bir kişinin profesyonel mi, kişisel mi yoksa her ikisi mi olduğunu belirtmesini isteyen bir kart gösteriliyor. Bu kartta, açma/kapatma düğmelerini kullanan bir SelectionInput widget'ı yer alıyor:

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

Aşağıdaki örnekte, kullanıcının çoklu seçim menüsünden kişileri seçmesini isteyen bir kart gösterilmektedir:

Çoklu seçim menüsündeki öğeleri Google Workspace'teki aşağıdaki veri kaynaklarından 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 üyesi 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ürlerinin aksine, bu seçim öğeleri Google Workspace'ten dinamik olarak alındığından SelectionItem nesnelerini atlıyorsunuz.

Aşağıdaki kodda, Google Workspace kullanıcılarının bulunduğu çoklu seçim menüsü gösterilmektedir. Kullanıcıları doldurmak için seçim girişi 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ın ç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ü, defaultToCurrentSpace öğesini true olarak da ayarlar. Bu sayede, geçerli alan menüdeki varsayılan seçim olur:

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 kaynaklarındaki öğelerle de doldurulabilir. Örneğin, bir kullanıcının müşteri ilişkileri yönetimi (CRM) sistemindeki satış potansiyel müşterileri listesinden seçim yapmasına yardımcı olmak için çoklu seçim menülerini kullanabilirsiniz.

Harici bir veri kaynağını kullanmak için externalDataSource alanını kullanarak veri kaynağından öğeler döndüren bir işlev belirtirsiniz.

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 kod, kullanıcı için harici bir kişi grubundaki öğelerin çoklu seçim menüsünü gösterir. Menüde varsayılan olarak bir kişi gösterilir ve getContacts işlevi çalıştırılarak harici veri kaynağından öğeler alınır ve doldurulur:

Node.js

node/selection-input/index.js

GitHub'da göster

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'da göster

'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'da göster

.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

GitHub'da göster

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 şehirleri dolduran bir menü için Atl yazmaya başlarsa Chat uygulamanız, kullanıcı yazmayı bitirmeden önce Atlanta otomatik olarak önerebilir. En fazla 100 öğeyi otomatik olarak tamamlayabilirsiniz.

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

Menüyle kullanıcı 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ğındaki ö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üye yazdıklarını gösterir.

Aşağıdaki kod, harici bir veri kaynağındaki öğeleri otomatik olarak tamamlar. Önceki örneği kullanarak Chat uygulaması, getContacts işlevi tetiklendiğinde öğeler önerir:

Node.js

node/selection-input/index.js

GitHub'da göster

/**
 * 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'da göster

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'da göster

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

GitHub'da göster

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

Bu sayfada, bir 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 metin girildiğini veya belirli sayıda karakter girildiğini doğrulayabilirsiniz.

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

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'lardan herhangi birinin değeri yoksa form işlemi gönderimi iptal edilir.

Bir işlem için "all_widgets_are_required": "true" ayarlandığında karttaki tüm widget'lar bu işlem için gereklidir.

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

dateTimePicker'da `all_widgets_are_required` işlemi ayarlama

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ğrulama ayarlama

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

Metin girişi widget'ı için karakter sınırı belirleme

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ü ayarlama

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." Bazen Chat kullanıcı arayüzünde hata mesajı gösterilmez ancak Chat uygulaması veya kartı beklenmedik bir sonuç üretir. Örneğin, kart mesajı görünmeyebilir.

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

Kartlara etkileşimli kullanıcı arayüzü öğeleri ekleyin Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Ön koşullar

Düğme ekleme

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

Material Design stiline sahip bir düğme ekleme

Özel renge sahip bir düğme ve devre dışı bırakılmış bir düğme ekleme

Simge içeren bir düğme ekleme

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

Daraltılabilir bir bölümün düğmesini özelleştirme

Taşma menüsü ekleme

Çip listesi ekleme

Kullanıcılardan bilgi toplama

Metin toplama

Tarih veya saat toplama

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

Onay kutusu ekleme

Radyo düğmesi ekleme

Anahtar ekleme

Açılır menü ekleme

Çoklu seçim menüsü ekleme

JSON

JSON

Node.js

Python

Java

Apps Komut Dosyası

Node.js

Python

Java

Apps Komut Dosyası

Kartlara girilen verileri doğrulama

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

Çoklu seçimde all_widgets_are_required işlemi ayarlama

JSON

dateTimePicker'da all_widgets_are_required işlemi ayarlama

JSON

Açılır menüde all_widgets_are_required işlemi ayarlama

JSON

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

Metin girişi widget'ı için karakter sınırı belirleme

JSON

Metin girişi widget'ı için giriş türünü ayarlama

JSON

Sorun giderme

İlgili konular

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

Çoklu seçimde `all_widgets_are_required` işlemi ayarlama

dateTimePicker'da `all_widgets_are_required` işlemi ayarlama

Açılır menüde `all_widgets_are_required` işlemi ayarlama