Düğme Listesi

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

ButtonList widget'ı bir dizi Button görüntüler. 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:

  • OpenLink bağlantısı olan bir köprü açın (örneğin, https://developers.google.com/chat Google Chat geliştirici dokümanlarının köprüsü).
  • API çağırma gibi özel bir işlev çalıştıran bir action çalıştırın.

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

Erişilebilirlik için düğmeler alternatif metni destekler.

Aşağıdaki resimde iki Button içeren ButtonList widget'ından oluşan bir kart gösterilmektedir. Tek bir düğmeyle Google Chat geliştirici dokümanları yeni bir sekmede açılır. Diğer düğme, goToView() adında özel bir işlev çalıştırır ve şu parametreyi geçirir: viewType="Bird Eye View".

Google Chat'te Metin Paragrafı widget'ını gösteren bir kart mesajı.
Şekil 1: Google Chat'te, iki Button gösteren ButtonList widget'ını gösteren bir kart mesajı.

Kartın JSON'i şöyledir:

JSON

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "widgets": [
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Open a hyperlink",
                      "onClick": {
                        "openLink": {
                          "url": "https://developers.google.com/chat",
                        }
                      }
                    },
                    {
                      "text": "Run a custom function",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "BIRD EYE VIEW",
                            }
                          ],
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

2. Örnek: Özel renkli bir düğme ve devre dışı bırakılmış bir düğme

Aşağıdaki resimde iki Button içeren 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 işlem, kullanıcının düğmeyi tıklayıp işlevi yürütmesini engeller.

Google Chat'te bir ButtonList widget'ını gösteren bir kart mesajı.
Şekil 2: Google Chat'te, iki Button öğesini gösteren ButtonList widget'ını gösteren bir kart mesajı.

Kartın JSON'i şöyledir:

JSON

{
 "cards_v2":[
    {
       "card_id":"exampleCard",
       "card":{
          "sections":[
             {
                "widgets":[
                   {
                      "buttonList":{
                         "buttons":[
                            {
                               "text":"View documentation hyperlink",
                               "onClick":{
                                  "openLink":{
                                     "url":"https://developers.google.com/chat"
                                  }
                               },
                               "color":{
                                  "red":0,
                                  "green":0,
                                  "blue":1,
                                  "alpha":0.5
                               }
                            },
                            {
                               "text":"Button disabled",
                               "onClick":{
                                  "openLink":{
                                     "url":"https://developers.google.com/chat"
                                  }
                               },
                               "disabled":true
                            }
                         ]
                      }
                   }
                ]
             }
          ]
       }
    }
 ]
}

3. Örnek: Simgeleri gösteren düğmeler

Aşağıdaki resimde iki simge Button 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]((https://developers.google.com/chat/api/guides/message-formats/cards#builtinicons)) alanını kullanır. Diğer düğme, özel bir widget simgesi görüntülemek için iconUrl alanını kullanır.

Google Chat'te bir ButtonList widget'ını gösteren bir kart mesajı.
Şekil 3: Google Chat'te, ButtonList simgesi iki simge Button içeren bir kart mesajı.

Kartın JSON'i şöyledir:

JSON

{
"cards_v2": [
  {
  "card_id": "exampleCard",
  "card": {
    "sections": [
    {
      "widgets": [
      {
        "buttonList": {
          "buttons": [
                          {
              "icon": {"knownIcon": "EMAIL",},
              "onClick": {
                "action": {
                  "function": "sendEmail",
                  "parameters": [
                    {
                      "key": "emailContent",
                      "value": "Email value",
                    }
                  ],
                }
              }
            },
            {
              "icon": {"iconUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png",},
              "onClick": {
                "action": {
                  "function": "inviteBot",
                  "parameters": [
                    {
                      "key": "botType",
                      "value": "Bot value",
                    }
                  ],
                }
              }
            },
          ]
        }
      }
    ]
    }
    ]
  }
  }
]
}

4. Örnek: Simge ve metin içeren düğmeler

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

Google Chat'te bir ButtonList widget'ını gösteren bir kart mesajı.
Şekil 1: Google Chat'te, iki Button gösteren ButtonList widget'ını gösteren bir kart mesajı.

Kartın JSON'i şöyledir:

JSON

{
"cards_v2": [
  {
  "card_id": "exampleCard",
  "card": {
    "sections": [
    {
      "widgets": [
      {
        "buttonList": {
          "buttons": [
                          {
              "icon": {"knownIcon": "EMAIL",},
              "onClick": {
                "action": {
                  "function": "sendEmail",
                  "parameters": [
                    {
                      "key": "emailContent",
                      "value": "Email value",
                    }
                  ],
                }
              }
            },
            {
              "text": "Send email",
              "onClick": {
                "action": {
                  "function": "sendEmail",
                  "parameters": [
                    {
                      "key": "sendEmailType",
                      "value": "email value",
                    }
                  ],
                }
              }
            },
          ]
        }
      }
    ]
    }
    ]
  }
  }
]
}

ButtonList JSON gösterimi ve alanları

JSON gösterimi 
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Alanlar
buttons[]

object ( Button )

Bir dizi düğme.

Button JSON gösterimi ve alanları

JSON gösterimi 
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string
}
Alanlar
text

string

Düğmenin içinde görüntülenen metin.

icon

object ( Icon )

Simge resmi. Hem icon hem de text ayarlanmışsa metinden önce simge görünür.

color

object ( Color )

Ayarlanırsa düğme düz bir arka plan rengiyle doldurulur ve arka plan rengiyle kontrastı korumak için yazı tipi rengi değişir. Örneğin, mavi bir arka plan ayarlamak büyük olasılıkla beyaz metne neden olacaktır.

Bu politika ayarlanmadan bırakılırsa resim arka planı beyaz, yazı tipi rengi mavi olur.

Kırmızı, yeşil ve mavi için her alanın değeri, iki şekilde ifade edilebilen bir float numarasıdır: 0 ile 255 arasında bir sayı, 255'e (153/255) bölünebilir veya 0 ile 1 (0,6) arasında bir değer olur. 0, bir rengin yokluğunu; 1 veya 255/255 de RGB ölçeğinde bu rengin tam varlığını belirtir.

İsteğe bağlı olarak alfayı ayarlayın. Bu, şu denklemi kullanarak bir şeffaflık düzeyi belirler: 

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

Alfa için 1 değeri tek bir renge, 0 değeri tamamen şeffaf bir renge karşılık gelir.

Örneğin, aşağıdaki renk yarı saydam kırmızıyı temsil eder: 

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
   "alpha": 0.5
}
onClick

object ( OnClick )

Zorunlu. Düğme tıklandığında gerçekleştirilecek işlemdir (ör. köprü açma veya özel bir işlev çalıştırma).

disabled

boolean

true düğmesi varsa düğme etkin değil durumunda gösterilir ve kullanıcı eylemlerine yanıt vermez.

altText

string

Erişilebilirlik için kullanılan alternatif metin.

Kullanıcılara düğmenin işlevini bildirin. Örneğin, bir düğme köprü açarsa şunu yazabilirsiniz: "Yeni bir tarayıcı sekmesi açar ve https://developers.google.com/chat" adresindeki Google Chat geliştirici belgelerine gider.

Icon

Karttaki bir widget'ta gösterilen simge.

Yerleşik ve özel simgeleri destekler.

JSON gösterimi 
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string
  // End of list of possible types for union field icons.
}
Alanlar
altText

string

İsteğe bağlı. Erişilebilirlik için kullanılan simgenin açıklaması. Belirtilmemesi durumunda varsayılan değer "Düğme" olarak sağlanmıştır. En iyi uygulama olarak, simgenin gösterdiği şeyler ve (varsa) ne işe yaradığı hakkında faydalı bir açıklama belirlemeniz gerekir. Örneğin, A user's account portrait veya Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat .

Simge bir Button içinde ayarlanırsa kullanıcı fareyle üzerine geldiğinde altText yardımcı metin olarak görünür. Bununla birlikte, düğme text olarak ayarlanırsa simgenin altText simgesi yok sayılır.

imageType

enum ( ImageType )

Resme uygulanan kırpma stili. Bazı durumlarda CIRCLE kırpma uygulamak, görüntünün yerleşik bir simgeden daha büyük çizilmesine neden olur.

Birlik alanı icons . Karttaki widget'ta gösterilen simge. icons aşağıdakilerden yalnızca biri olabilir:
knownIcon

string

Google Workspace tarafından sağlanan yerleşik simgelerden birini görüntüleyin.

Örneğin, bir uçak simgesi görüntülemek için AIRPLANE değerini belirtin. Otobüs için BUS değerini belirtin.

Desteklenen simgelerin tam listesi için yerleşik simgeler bölümüne bakın.

iconUrl

string

HTTPS URL'sinde barındırılan bir özel simge görüntüleyin.

Örneğin: 

"iconUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png"

Desteklenen dosya türleri şunları içerir: .png ve .jpg .

ImageType

Resmi kırpmak için kullanılan şekil.

Sıralamalar
SQUARE Varsayılan değer. Resme kare maske ekler. Örneğin, 4x3 boyutunda bir resim 3x3 olur.
CIRCLE Görsele dairesel bir maske uygular. Örneğin, 4x3 boyutunda bir resim çapı 3 olan bir daire haline gelir.

Onclick

Kullanıcılar, karttaki etkileşimli bir öğeyi (ör. bir düğmeyi) tıkladıklarında nasıl yanıt vereceklerini temsil eder.

JSON gösterimi 
{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  }
  // End of list of possible types for union field data.
}
Alanlar

Birlik alanı data .

data aşağıdakilerden yalnızca biri olabilir:

action

object ( Action )

Belirtilirse bu onClick tarafından bir işlem tetiklenir.

card

object ( Card )

Belirtilirse, tıklama işleminden sonra kart yığınına yeni bir kart aktarılır.

Google Workspace eklentileri tarafından desteklenir ancak Chat uygulamaları tarafından desteklenmez.

Action

Form gönderildiğinde davranışı açıklayan bir işlem. Örneğin, formu işlemek için Apps Komut Dosyası çağırılabilir. İşlem tetiklenirse form değerleri sunucuya gönderilir.

JSON gösterimi 
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
Alanlar
function

string

Kapsayıcı öğe tıklandığında veya alt özellik etkinleştirildiğinde çağrılan özel işlev.

Örneğin, Etkileşimli kart oluşturma bölümüne göz atın.

parameters[]

object ( ActionParameter )

İşlem parametrelerinin listesi.

loadIndicator

enum ( LoadIndicator )

Harekete geçirici mesaj gösterilirken işlemin gösterdiği yükleme göstergesini belirtir.

persistValues

boolean

Form değerlerinin işlemden sonra da devam edip etmediğini belirtir. Varsayılan değer: false .

true değeri belirlenirse form değerleri işlem tetiklendikten sonra da kalır. Kullanıcının işlem sırasında değişiklik yapmasına izin vermek için LoadEndator değerini NONE olarak ayarlayın. Chat uygulamalarındaki kart mesajları için işlemin Yanıt Türü 'nü UPDATE_MESSAGE olarak ayarlamanız ve işlemi içeren karttaki cardId cardId özelliğini kullanmanız gerekir.

false değeri belirlenirse işlem tetiklendiğinde form değerleri temizlenir. İşlem sırasında kullanıcının değişiklik yapmasını engellemek için LoadEndator değerini SPINNER olarak ayarlayın.

interaction

enum ( Interaction )

İsteğe bağlı. İletişim kutusu açılırken gerekir.

Bir kullanıcının etkileşimine yanıt olarak yapılması gerekenler (ör. bir kullanıcı, kart mesajındaki düğmeyi tıkladığında).

Belirtilmemesi halinde uygulama, normal şekilde bir action işlemi (bağlantı açma veya bir işlevi çalıştırma gibi) çalıştırarak yanıt verir.

Uygulama, interaction belirterek özel etkileşimli şekillerde yanıt verebilir. Örneğin, interaction öğesini OPEN_DIALOG olarak ayarladığınızda, uygulama bir iletişim kutusu açabilir.

Belirtildiğinde yükleme göstergesi gösterilmez.

Chat uygulamaları tarafından desteklenir ancak Google Workspace eklentileri tarafından desteklenmez. Bir eklenti için belirtilirse, kartın tamamı çıkarılır ve istemcide hiçbir şey gösterilmez.

ActionParameter

İşlem yöntemi çağrıldığında verilecek dize parametrelerinin listesi. Örneğin, şu üç erteleme düğmesini kullanabilirsiniz: "ertele", "1 gün ertele", "ertesi hafta ertele". Dize parametreleri listesinde erteleme türünü ve erteleme zamanını ileterek işlem yöntemi = pause() işlemini kullanabilirsiniz.

Daha fazla bilgi için CommonEventObject bölümüne bakın.

JSON gösterimi 
{
  "key": string,
  "value": string
}
Alanlar
key

string

İşlem komut dosyası için parametrenin adı.

value

string

Parametrenin değeri.

LoadIndicator

Harekete geçirici mesaj gösterilirken işlemin gösterdiği yükleme göstergesini belirtir.

Sıralamalar
SPINNER İçeriğin yüklendiğini belirtmek için bir döner simge görüntüler.
NONE Hiçbir şey gösterilmez.

Interaction

İsteğe bağlı. İletişim kutusu açılırken gerekir.

Bir kullanıcının etkileşimine yanıt olarak yapılması gerekenler (ör. bir kullanıcı, kart mesajındaki düğmeyi tıkladığında).

Belirtilmemesi halinde uygulama, normal şekilde bir action işlemi (bağlantı açma veya bir işlevi çalıştırma gibi) çalıştırarak yanıt verir.

Uygulama, interaction belirterek özel etkileşimli şekillerde yanıt verebilir. Örneğin, interaction öğesini OPEN_DIALOG olarak ayarladığınızda, uygulama bir iletişim kutusu açabilir.

Belirtildiğinde yükleme göstergesi gösterilmez.

Chat uygulamaları tarafından desteklenir ancak Google Workspace eklentileri tarafından desteklenmez. Bir eklenti için belirtilirse, kartın tamamı çıkarılır ve istemcide hiçbir şey gösterilmez.

Sıralamalar
INTERACTION_UNSPECIFIED Varsayılan değer. action normal şekilde çalışır.
OPEN_DIALOG

Chat uygulamalarının kullanıcılarla etkileşim kurmak için kullandığı, pencereye dayalı, kart tabanlı bir arayüz olan iletişim kutusunu açar.

Yalnızca kart mesajlarındaki düğme tıklamalarına yanıt olarak Chat uygulamaları tarafından desteklenir.

Google Workspace eklentileri tarafından desteklenmez. Bir eklenti için belirtilirse, kartın tamamı çıkarılır ve istemcide hiçbir şey gösterilmez.