Bu sayfada, kullanıcıların bir düğmeyi tıklayarak veya bilgi göndererek Google Chat uygulamanızla etkileşim kurabilmesi için kart veya iletişim kutusu mesajlarına nasıl widget ve kullanıcı arayüzü öğeleri ekleyeceğiniz açıklanmaktadır.
Chat uygulamaları için JSON kartı mesajlarını tasarlamak ve önizlemek üzere Kart Oluşturucu'yu kullanın:
Card Builder'ı açınÖn koşullar
Düğme ekle
ButtonList
widget'ında bir dizi düğme gösterilir. Düğmeler bir metni, bir simgeyi
veya hem metni hem de bir simgeyi görüntüleyebilir. Her Button
, kullanıcı 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 bir köprü açın. - API çağırma gibi özel işlevler çalıştıran bir
action
çalıştırın.
Erişilebilirlik için düğmeler alternatif metinleri destekler.
Özel işlev çalıştıran bir düğme ekleyin
Aşağıda, iki düğmeli bir ButtonList
widget'ından oluşan kart gösterilmektedir.
Bir düğme, Google Chat geliştirici dokümanlarını yeni bir sekmede açar. Diğer düğme, goToView()
adlı özel bir işlevi çalıştırır ve viewType="BIRD EYE VIEW"
parametresini iletir.
Özel renkli ve devre dışı bırakılmış bir düğme ekleyin
"disabled": "true"
ayarları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ıyla devre dışı bırakılır. Bu durum, kullanıcının düğmeyi tıklamasını ve işlevi yürütmesini engeller.
Simge içeren bir düğme ekleyin
Aşağıda, iki adet Button
widget'ı içeren bir ButtonList
widget'ından oluşan 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'ını 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 ButtonList
widget'ından oluşan bir kart gösterilmektedir. İlk düğme bir e-posta simgesi,
ikinci düğme ise bir metin gösterir. Kullanıcı, sendEmail
işlevini çalıştırmak için simgeyi veya metin düğmesini tıklayabilir.
Seçilebilir kullanıcı arayüzü öğeleri ekleyin
SelectionInput
widget'ında onay kutuları, radyo düğmeleri, anahtarlar veya açılır menüler gibi bir dizi seçilebilir öğe bulunur. Kullanıcılardan tanımlanmış ve standartlaştırılmış verileri toplamak için bu widget'ı kullanabilirsiniz. Kullanıcılardan tanımlanmamış veriler toplamak için TextInput
widget'ını kullanın.
SelectionInput
widget'ı, kullanıcıların tek tip veri girmelerine yardımcı olan önerileri ve değişiklik sırasında yapılan işlemleri destekler. Bu işlemler, seçim giriş alanında kullanıcının öğe seçmesi veya seçimini kaldırma gibi bir değişiklik gerçekleştiğinde gerçekleşen Actions
işlemidir.
Chat uygulamaları, seçilen öğelerin değerini alıp işleyebilir. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verileri alma bölümüne bakın.
Bu bölümde, SelectionInput
widget'ının kullanıldığı kart örnekleri sunulmaktadır.
Örneklerde farklı türde bölüm girişleri kullanılmaktadır:
Onay kutusu ekle
Aşağıda, onay kutuları kullanan bir SelectionInput
widget'ıyla kullanıcıdan bir kişinin profesyonel, kişisel veya her ikisini de belirtmesini isteyen bir iletişim kutusu görüntülenmektedir:
Radyo düğmesi ekle
Aşağıda, radyo düğmeleri kullanan bir SelectionInput
widget'ı kullanılarak kullanıcıdan bir kişinin profesyonel mi yoksa kişisel mi olduğunu belirtmesini isteyen bir iletişim kutusu görüntülenir:
Anahtar ekle
Aşağıda, kullanıcıdan, anahtarları kullanan bir SelectionInput
widget'ıyla bir kişinin profesyonel, kişisel veya her ikisini de belirtmesini isteyen bir iletişim kutusu görüntülenir:
Açılır menü ekleme
Aşağıda, kullanıcıdan, açılır menü kullanan bir SelectionInput
widget'ında kişinin profesyonel mi yoksa kişisel mi olduğunu belirtmesini isteyen bir iletişim kutusu yer alır:
Çoklu seçim menüsü ekle
Aşağıda, kullanıcıdan bir çoklu seçim menüsünden kişi seçmesini isteyen bir iletişim kutusu görüntülenir:
Çoklu seçim menüleri için veri kaynaklarını kullan
Aşağıdaki bölümde, Google Workspace uygulaması veya harici veri kaynağı gibi dinamik kaynaklardan veri doldurmak için çoklu seçim menülerinin nasıl kullanılacağı açıklanmaktadır.
Google Workspace'teki veri kaynakları
Çoklu seçim menüsü öğelerini Google Workspace'te 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 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ürlerinin aksine SectionItem
nesneleri atlanır çünkü bu seçim öğeleri dinamik olarak Google Workspace'ten alınır.
Aşağıdaki kodda, Google Workspace kullanıcılarından oluşan ç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, Chat alanlarını içeren çok seçimli bir menü gösterilmektedir. Seçim girişi, boşlukları doldurmak için hostAppDataSource
alanını belirtir. Çoklu seçim menüsü de defaultToCurrentSpace
değerini true
olarak ayarlar. Bu da mevcut alanı menüde varsayılan seçim yapar:
JSON
{
"selectionInput": {
"name": "spaces",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 3,
"multiSelectMinQueryLength": 1,
"platformDataSource": {
"hostAppDataSource": {
"chatDataSource": {
"spaceDataSource": {
"defaultToCurrentSpace": true
}
}
}
}
}
}
Google Workspace dışındaki veri kaynakları
Çoklu seçim menüleri, üçüncü taraf veya harici bir veri kaynağından gelen öğeleri de doldurabilir. Örneğin, kullanıcının bir müşteri ilişkileri yönetimi (CRM) sisteminden gelen satış potansiyel müşterileri listesinden seçim yapmasına yardımcı olmak için çoklu seçim menülerini kullanabilirsiniz.
Harici bir veri kaynağı kullanmak istiyorsanız veri kaynağından öğeler döndüren bir işlev belirtmek için externalDataSource
alanını kullanırsınız.
Harici bir veri kaynağına gönderilen istekleri azaltmak için, kullanıcılar menüye yazmadan önce çoklu seçim menüsünde görüntülenen önerilen öğeleri ekleyebilirsiniz. Örneğin, kullanıcı için yakın zamanda aranan kişileri doldurabilirsiniz. Önerilen öğeleri harici bir veri kaynağından doldurmak için SelectionItem
nesneleri belirtin.
Aşağıdaki kod, kullanıcıya yönelik harici bir kişi kümesinden öğe içeren çoklu seçim menüsünü gösterir. Menü, varsayılan olarak bir kişi görüntüler ve harici veri kaynağından öğe almak ve doldurmak için getContacts
işlevini çalıştırır:
JSON
{
"selectionInput": {
"name": "contacts",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 5,
"multiSelectMinQueryLength": 2,
"externalDataSource": {
"function": "getContacts"
},
"items": [
{
"text": "Contact 3",
"value": "contact-3",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"bottomText": "Contact three description",
"selected": false
}
]
}
}
Harici veri kaynaklarında, kullanıcıların çoklu seçim menüsünden yazmaya başladığı öğeleri otomatik olarak da tamamlayabilirsiniz. Örneğin, bir kullanıcı ABD'deki şehirleri dolduran bir menü için Atl
yazmaya başlarsa Chat uygulamanız, kullanıcı yazmayı tamamlamadan önce otomatik olarak Atlanta
önerisinde bulunabilir. 100 adede kadar öğeyi otomatik tamamlayabilirsiniz.
Öğeleri otomatik olarak tamamlamak için harici veri kaynağını sorgulayan ve bir kullanıcı çoklu seçim menüsünde 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ğerininexternalDataSource
alanındaki işlevle eşleşip eşleşmediğini belirleyin. - İşlevler eşleştiğinde harici veri kaynağından önerilen öğeleri döndürün. Kullanıcının yazdıklarına dayalı olarak öğe önermek için
autocomplete_widget_query
anahtarının değerini alın. Bu değer, kullanıcının menüye ne yazdığını gösterir.
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 dayalı olarak öğeler önerir:
Apps Komut Dosyası
Node.js
Kullanıcının metin girebileceği bir alan ekleyin
TextInput
widget'ı kullanıcıların metin girebileceği bir alan sağlar. Widget, kullanıcıların tek tip veriler girmelerine yardımcı olan önerileri ve değişiklik sırasında yapılan işlemleri destekler. Bunlar, metin giriş alanında bir kullanıcının metin eklemesi veya silmesi gibi bir değişiklik meydana geldiğinde çalışan Actions
işlemleridir.
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.
Kullanıcıların girdiği metni işlemek için Form verilerini alma bölümünü inceleyin.
Aşağıda, TextInput
widget'ından oluşan bir kart gösterilmektedir:
Kullanıcının tarih ve saat seçmesine izin verin
DateTimePicker
widget'ı kullanıcıların tarih, saat veya hem tarih hem de saat girmelerine olanak tanır. Alternatif olarak, kullanıcılar tarih ve saat 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 girmelerini isteyen bir hata gösterir.
Kullanıcıların girdiği tarih ve saat değerlerini işlemek için Form verilerini alma bölümünü inceleyin.
Aşağıda, üç farklı türde DateTimePicker
widget'ından oluşan bir kart gösterilmektedir:
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ında kullanıcı tarafından girilen metnin bulunduğunu veya belirli sayıda karakter içerdiğini doğrulayabilirsiniz.
İşlemler için gerekli widget'ları ayarlayın
Kart action
öğesinin bir parçası olarak, bir işlemin requiredWidgets
listesine eklenmesi gereken widget'ların adlarını ekleyin.
Burada listelenen widget'lardan herhangi biri, bu işlem çağrıldığında bir değere sahip değilse form işlemi gönderme işlemi iptal edilir.
"all_widgets_are_required": "true"
bir işlem için ayarlandığında bu işlem, karttaki tüm widget'ları gerektirir.
Çoklu seçimde bir all_widgets_are_required
işlemi ayarla
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
}
]
}
}
]
}
]
}
dateTimeChooseer'da bir all_widgets_are_required
işlemi ayarla
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 ayarlayın
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ırlamasını ve giriş türünü belirtebilir.
Metin giriş widget'ı için karakter sınırı ayarlama
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ş 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 bir hata mesajı gösterilmese de, Chat uygulamaları için hata günlük kaydı etkinken hataları düzeltmenize yardımcı olacak açıklayıcı hata mesajları ve günlük verileri mevcuttur. Hataları görüntüleme, hata ayıklama ve düzeltme konusunda yardım için Google Chat hatalarını giderme ve düzeltme bölümünü inceleyin.