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ş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.
Mesajlardan ve ana sayfalardan yeni bir pencerede açılan kartlar olan iletişim kutuları.

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üğ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ş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şlevi ç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ı bir özel 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 ekleme

"disabled": "true" değerini ayarlayarak 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ıyla 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ö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 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.

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

Karttaki bölümleri daraltan ve genişleten kontrol düğmesini özelleştirin. Bölümün içeriğini görsel olarak temsil etmek için çeşitli simge veya resimler arasından seçim yaparak kullanıcıların bilgileri daha kolay anlamasını ve bunlarla etkileşim kurmasını sağlayı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ü karmaşık hale getirmeden daha fazla seçenek eklemenize olanak tanır ve 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 açıdan ilgi çekici bir yöntem sunar. Etiketler, kategoriler 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 girişlerini 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 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 girmelerine 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çici, kullanıcıları bilgileri doğru şekilde girmeye teşvik eden bir hata gösterir.

Aşağıda, üç farklı DateTimePicker widget türünden 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 seçilebilir öğeler 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 bir seçim giriş alanında değişiklik yapıldığında (ör. kullanıcı bir öğeyi seçtiğinde veya seçmeyi kaldırdığında) çalışan değişiklikle ilgili işlemleri destekler.Actions

Sohbet uygulamaları, seçili öğ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ı makaleyi inceleyin.

Bu bölümde, SelectionInput widget'ını kullanan kart örnekleri verilmiştir. Örneklerde farklı türde bölüm girişleri 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ıdan bir kişinin profesyonel, kişisel veya her ikisi olduğunu belirtmesini isteyen ve onay kutuları kullanan bir SelectionInput widget'ı içeren bir kart gösterilmektedir:

Radyo düğmesi ekleme

Aşağıda, 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österilmektedir:

Anahtar ekleme

Aşağıda, kullanıcıdan bir kişinin profesyonel, kişisel veya her ikisi olduğunu belirtmesini isteyen bir kart gösterilmektedir. Bu kartta anahtarları kullanan bir SelectionInput widget'ı kullanılmaktadır:

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:

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

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 SelectionItem nesnelerini çıkarırsınız.

Aşağıdaki kodda, Google Workspace kullanıcılarının ç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ı 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ü, defaultToCurrentSpace değerini true olarak da ayarlar. Bu sayede, mevcut alan menüde 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, öğeleri üçüncü taraf veya harici bir veri kaynağından da doldurabilir. Örneğin, kullanıcının bir müşteri ilişkileri yönetimi (CRM) sisteminden satış potansiyeli müşterileri listesinden seçim yapmasına yardımcı olmak için çoklu seçim menüleri kullanabilirsiniz.

Harici bir veri kaynağı kullanmak için externalDataSource alanını kullanarak veri kaynağından öğe 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 kodda, kullanıcının harici bir kişi grubundaki öğelerin yer aldığı çoklu seçim menüsü gösterilmektedir. Menü varsayılan olarak bir kişiyi gösterir ve harici veri kaynağından öğeleri alıp doldurmak için getContacts işlevini çalıştırır:

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ı yazma işlemini tamamlamadan ö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 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ığı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ığı metni temsil eder.

Aşağıdaki kod, harici bir veri kaynağındaki öğeleri otomatik olarak tamamlar. Önceki örneği kullanarak Chat uygulaması, getContacts işlevinin ne zaman tetiklendiğine bağlı olarak öğ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, kartın action ve widget'larına girilen verilerin nasıl doğrulanacağı açıklanmaktadır. Örneğin, bir metin giriş alanının kullanıcı tarafından girilen metin içerdiğini veya belirli sayıda karakter içerdiğ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'ların hiçbirinde değer 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ğ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ı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ç verir. Örneğin, kart mesajı görünmeyebilir.

Chat kullanıcı arayüzünde hata mesajı gösterilmeyebilir ancak Chat uygulamaları için hata günlüğü 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, hata ayıklama ve düzeltme hakkında yardım için Google Chat hatalarını giderme başlıklı makaleyi inceleyin.

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

Ön koşullar

Düğme ekleme

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

Materyal Tasarım stilinde bir düğme ekleme

Özel renk ve devre dışı bırakılmış düğme ekleme

Simge içeren bir düğme ekleme

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

Katlanabilir bir bölüm için düğmeyi ö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 verme

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ğrulamayı 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

Ç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