Cards v2

Karta

Interfejs karty wyświetlany w wiadomości w Google Chat lub w dodatku do Google Workspace.

Karty obsługują określony układ, interaktywne elementy interfejsu, takie jak przyciski, oraz multimedia, np. obrazy. Używaj kart, aby prezentować szczegółowe informacje, zbierać dane od użytkowników i kierować ich do wykonania kolejnego kroku.

Projektuj i wyświetlaj podgląd kart za pomocą narzędzia do tworzenia kart.

Otwórz narzędzie do tworzenia kart

Aby dowiedzieć się, jak tworzyć karty, zapoznaj się z tą dokumentacją:

Uwaga: do każdej karty możesz dodać maksymalnie 100 widżetów. Wszystkie widżety powyżej tego limitu są ignorowane. Ten limit dotyczy zarówno wiadomości z kartami, jak i okien w aplikacjach Google Chat oraz kart w dodatkach do Google Workspace.

Przykład: wiadomość w formie karty dla aplikacji Google Chat

Przykładowa wizytówka

Aby utworzyć przykładową wiadomość z kartą w Google Chat, użyj tego kodu JSON: 

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
           "title": "Sasha",
           "subtitle": "Software Engineer",
           "imageUrl":
           "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png",
           "imageType": "CIRCLE",
           "imageAltText": "Avatar for Sasha"
         },
         "sections": [
           {
             "header": "Contact Info",
             "collapsible": true,
             "uncollapsibleWidgetsCount": 1,
             "widgets": [
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "EMAIL"
                   },
                   "text": "sasha@example.com"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PERSON"
                   },
                   "text": "<font color=\"#80e27e\">Online</font>"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PHONE"
                   },
                   "text": "+1 (555) 555-1234"
                 }
               },
               {
                 "buttonList": {
                   "buttons": [
                     {
                       "text": "Share",
                       "onClick": {
                        "openLink": {
                           "url": "https://example.com/share"
                         }
                       }
                     },
                     {
                       "text": "Edit",
                       "onClick": {
                         "action": {
                           "function": "goToView",
                           "parameters": [
                             {
                               "key": "viewType",
                               "value": "EDIT"
                             }
                           ]
                         }
                       }
                     }
                   ]
                 }
               }
             ]
           }
         ]
       }
    }
  ]
}
Zapis JSON 
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
Pola
header

object (CardHeader)

Nagłówek karty. Nagłówek zwykle zawiera obraz na początku i tytuł. Nagłówki zawsze pojawiają się u góry karty.

sections[]

object (Section)

Zawiera kolekcję widżetów. Każda sekcja ma własny, opcjonalny nagłówek. Sekcje są wizualnie oddzielone linią. Przykład w aplikacjach Google Chat znajdziesz w artykule Definiowanie sekcji karty.

sectionDividerStyle

enum (DividerStyle)

Styl separatora między nagłówkiem, sekcjami i stopką.

cardActions[]

object (CardAction)

Działania związane z kartą. Działania są dodawane do menu paska narzędzi karty.

Dostępne w przypadku dodatków do Google Workspace, ale niedostępne w przypadku aplikacji Google Chat.

Na przykład poniższy kod JSON tworzy menu działań na karcie z opcjami Settings i Send Feedback: 

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

Nazwa karty. Używany jako identyfikator karty w nawigacji po kartach.

Dostępne w przypadku dodatków do Google Workspace, ale niedostępne w przypadku aplikacji Google Chat.

displayStyle

enum (DisplayStyle)

W dodatkach do Google Workspace ustawia właściwości wyświetlania elementu peekCardHeader.

Dostępne w przypadku dodatków do Google Workspace, ale niedostępne w przypadku aplikacji Google Chat.

peekCardHeader

object (CardHeader)

Podczas wyświetlania treści kontekstowych nagłówek karty podglądu działa jako element zastępczy, dzięki czemu użytkownik może przechodzić między kartami na stronie głównej a kartami kontekstowymi.

Dostępne w przypadku dodatków do Google Workspace, ale niedostępne w przypadku aplikacji Google Chat.

CardHeader

Reprezentuje nagłówek karty. Przykład w aplikacjach Google Chat znajdziesz w artykule Dodawanie nagłówka.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "title": string,
  "subtitle": string,
  "imageType": enum (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
Pola
title

string

Wymagane. Tytuł nagłówka karty. Nagłówek ma stałą wysokość: jeśli podasz zarówno tytuł, jak i podtytuł, każdy z nich zajmie jeden wiersz. Jeśli podasz tylko tytuł, zajmie on oba wiersze.

subtitle

string

Podtytuł nagłówka karty. Jeśli jest określony, pojawia się w osobnym wierszu pod elementem title.

imageType

enum (ImageType)

Kształt użyty do przycięcia obrazu.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

imageUrl

string

Adres URL HTTPS obrazu w nagłówku karty.

imageAltText

string

Tekst alternatywny tego obrazu używany na potrzeby ułatwień dostępu.

ImageType

Kształt użyty do przycięcia obrazu.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Wartości w polu enum
SQUARE Wartość domyślna. Stosuje do obrazu kwadratową maskę. Na przykład obraz o proporcjach 4:3 zmieni się na 3:3.
CIRCLE Stosuje do obrazu okrągłą maskę. Na przykład obraz o proporcjach 4:3 stanie się okręgiem o średnicy 3.

Sekcja

Sekcja zawiera kolekcję widżetów, które są renderowane pionowo w kolejności, w jakiej zostały określone.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer,
  "collapseControl": {
    object (CollapseControl)
  }
}
Pola
header

string

Tekst wyświetlany u góry sekcji. Obsługuje tekst sformatowany w prostym formacie HTML. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatkach do Google Workspace.

widgets[]

object (Widget)

Wszystkie widżety w sekcji. Musi zawierać co najmniej 1 widżet.

collapsible

boolean

Wskazuje, czy tę sekcję można zwinąć.

Zwijane sekcje ukrywają niektóre lub wszystkie widżety, ale użytkownicy mogą rozwinąć sekcję, aby wyświetlić ukryte widżety, klikając Pokaż więcej. Użytkownicy mogą ponownie ukryć widżety, klikając Pokaż mniej.

Aby określić, które widżety są ukryte, wpisz uncollapsibleWidgetsCount.

uncollapsibleWidgetsCount

integer

Liczba niewijanych widżetów, które pozostają widoczne nawet po zwinięciu sekcji.

Jeśli na przykład sekcja zawiera 5 widżetów, a wartość parametru uncollapsibleWidgetsCount jest ustawiona na 2, pierwsze 2 widżety są zawsze wyświetlane, a ostatnie 3 są domyślnie zwinięte. Wartość uncollapsibleWidgetsCount jest brana pod uwagę tylko wtedy, gdy collapsible ma wartość true.

collapseControl

object (CollapseControl)

Opcjonalnie. Zdefiniuj przycisk rozwijania i zwijania sekcji. Ten przycisk będzie widoczny tylko wtedy, gdy sekcję można zwinąć. Jeśli to pole nie jest skonfigurowane, używany jest przycisk domyślny.

Widżet

Każda karta składa się z widżetów.

Widżet to obiekt złożony, który może reprezentować tekst, obrazy, przyciski i inne typy obiektów.

Zapis JSON 
{
  "horizontalAlignment": enum (HorizontalAlignment),

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  },
  "columns": {
    object (Columns)
  },
  "carousel": {
    object (Carousel)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
Pola
horizontalAlignment

enum (HorizontalAlignment)

Określa, czy widżety mają być wyrównane do lewej, prawej czy środka kolumny.

Pole uniidata. Widżet może zawierać tylko jeden z tych elementów. Aby wyświetlić więcej elementów, możesz użyć wielu pól widżetu. data może mieć tylko jedną z tych wartości:
textParagraph

object (TextParagraph)

Wyświetla akapit tekstu. Obsługuje tekst sformatowany w prostym formacie HTML. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatkach do Google Workspace.

Na przykład ten kod JSON tworzy tekst pogrubiony: 

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object (Image)

Wyświetla obraz.

Na przykład poniższy kod JSON tworzy obraz z tekstem alternatywnym: 

"image": {
  "imageUrl":
  "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}
decoratedText

object (DecoratedText)

Wyświetla element tekstowy z dekoracją.

Na przykład ten kod JSON tworzy widżet z tekstem dekoracyjnym, który wyświetla adres e-mail: 

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "text": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchControl": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "CHECKBOX"
  }
}
buttonList

object (ButtonList)

Lista przycisków.

Na przykład ten kod JSON tworzy 2 przyciski. Pierwszy to niebieski przycisk tekstowy, a drugi to przycisk z obrazem, który otwiera link: 

"buttonList": {
  "buttons": [
    {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
textInput

object (TextInput)

Wyświetla pole tekstowe, w którym użytkownicy mogą wpisywać tekst.

Na przykład ten kod JSON tworzy pole tekstowe do wpisywania adresu e-mail: 

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

Inny przykład: poniższy kod JSON tworzy pole wprowadzania tekstu dla języka programowania ze statycznymi sugestiami: 

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object (SelectionInput)

Wyświetla kontrolkę wyboru, która umożliwia użytkownikom wybieranie elementów. Elementy sterujące wyborem mogą być polami wyboru, przyciskami opcji, przełącznikami lub menu.

Na przykład poniższy kod JSON tworzy menu, które umożliwia użytkownikom wybór rozmiaru: 

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object (DateTimePicker)

Wyświetla widżet, który umożliwia użytkownikom wprowadzanie daty, godziny lub daty i godziny.

Na przykład ten kod JSON tworzy selektor daty i godziny do planowania spotkań: 

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DATE_AND_TIME",
  "valueMsEpoch": 796435200000
}
divider

object (Divider)

Wyświetla poziomą linię oddzielającą widżety.

Na przykład ten kod JSON tworzy separator: 

"divider": {
}
grid

object (Grid)

Wyświetla siatkę z kolekcją elementów.

Siatka obsługuje dowolną liczbę kolumn i elementów. Liczba wierszy jest określana przez górną granicę liczby produktów podzieloną przez liczbę kolumn. Siatka z 10 elementami i 2 kolumnami ma 5 wierszy. Siatka z 11 elementami i 2 kolumnami ma 6 wierszy.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Na przykład ten kod JSON tworzy siatkę z 2 kolumnami i 1 elementem: 

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
columns

object (Columns)

Wyświetla maksymalnie 2 kolumny.

Aby uwzględnić więcej niż 2 kolumny lub użyć wierszy, użyj widżetu Grid.

Na przykład ten kod JSON tworzy 2 kolumny, z których każda zawiera akapity tekstu: 

"columns": {
  "columnItems": [
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "First column text paragraph"
          }
        }
      ]
    },
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "Second column text paragraph"
          }
        }
      ]
    }
  ]
}
carousel

object (Carousel)

Karuzela zawiera zbiór zagnieżdżonych widżetów. Oto na przykład reprezentacja JSON karuzeli zawierającej 2 akapi tekstowe. 

{
  "widgets": [
    {
      "textParagraph": {
        "text": "First text paragraph in the carousel."
      }
    },
    {
      "textParagraph": {
        "text": "Second text paragraph in the carousel."
      }
    }
  ]
}
chipList

object (ChipList)

Lista ikon.

Na przykład ten kod JSON tworzy 2 elementy. Pierwszy to element tekstowy, a drugi to element z ikoną, który otwiera link: 

"chipList": {
  "chips": [
    {
      "text": "Edit",
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}

TextParagraph

Akapit tekstu z obsługą formatowania. Przykład w aplikacjach Google Chat znajdziesz w artykule Dodawanie akapitu sformatowanego tekstu. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatkach do Google Workspace.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "text": string,
  "maxLines": integer,
  "textSyntax": enum (TextSyntax)
}
Pola
text

string

Tekst wyświetlany w widżecie.

maxLines

integer

Maksymalna liczba wierszy tekstu wyświetlanych w widżecie. Jeśli tekst przekracza określoną maksymalną liczbę wierszy, nadmiarowa treść jest ukryta za przyciskiem pokaż więcej. Jeśli tekst jest równy lub krótszy niż określona maksymalna liczba wierszy, przycisk pokaż więcej nie jest wyświetlany.

Wartość domyślna to 0, co oznacza, że wyświetlany jest cały kontekst. Wartości ujemne są ignorowane.

textSyntax

enum (TextSyntax)

Składnia tekstu. Jeśli nie jest ustawiony, tekst jest renderowany jako HTML.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

TextSyntax

Składnia formatowania tekstu.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Wartości w polu enum
TEXT_SYNTAX_UNSPECIFIED Jeśli nie określono inaczej, tekst jest renderowany jako HTML.
HTML Tekst jest renderowany jako HTML. Jest to wartość domyślna.
MARKDOWN Tekst jest renderowany w formacie Markdown.

Obraz

Obraz określony przez adres URL, który może mieć onClick. Przykład znajdziesz w artykule Dodawanie obrazu.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
Pola
imageUrl

string

Adres URL HTTPS, na którym hostowany jest obraz.

Na przykład: 

https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png
onClick

object (OnClick)

Gdy użytkownik kliknie obraz, kliknięcie wywoła to działanie.

altText

string

Tekst alternatywny tego obrazu używany na potrzeby ułatwień dostępu.

OnClick

Określa, jak reagować, gdy użytkownicy klikną interaktywny element na karcie, np. przycisk.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{

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

Pole uniidata.

data może mieć tylko jedną z tych wartości:

action

object (Action)

Jeśli jest określony, działanie jest wywoływane przez ten element onClick.

card

object (Card)

Po kliknięciu nowa karta jest przenoszona do stosu kart (jeśli tak określono).

Dostępne w przypadku dodatków do Google Workspace, ale niedostępne w przypadku aplikacji Google Chat.

overflowMenu

object (OverflowMenu)

Jeśli jest określony, ten element onClick otwiera rozszerzone menu.

Działanie

Czynność opisująca zachowanie po przesłaniu formularza. Możesz na przykład wywołać skrypt Apps Script, aby obsłużyć formularz. Jeśli działanie zostanie wywołane, wartości formularza zostaną wysłane na serwer.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction),
  "requiredWidgets": [
    string
  ],
  "allWidgetsAreRequired": boolean
}
Pola
function

string

Funkcja niestandardowa, która ma być wywoływana, gdy element zawierający zostanie kliknięty lub w inny sposób aktywowany.

Przykłady użycia znajdziesz w artykule Odczytywanie danych z formularza.

parameters[]

object (ActionParameter)

Lista parametrów działania.

loadIndicator

enum (LoadIndicator)

Określa wskaźnik ładowania, który jest wyświetlany podczas wykonywania wywołania działania.

persistValues

boolean

Wskazuje, czy wartości formularza są zachowywane po wykonaniu działania. Wartością domyślną jest false.

Jeśli true, wartości formularza pozostają po wywołaniu działania. Aby zezwolić użytkownikowi na wprowadzanie zmian podczas przetwarzania działania, ustaw wartość LoadIndicator na NONE. W przypadku wiadomości z kartami w aplikacjach do czatowania musisz też ustawić wartość ResponseType działania na UPDATE_MESSAGE i użyć tego samego parametru cardId z karty, która zawierała działanie.

Jeśli wartość to false, wartości formularza są czyszczone po wywołaniu działania. Aby uniemożliwić użytkownikowi wprowadzanie zmian podczas przetwarzania działania, ustaw wartość LoadIndicator na SPINNER.

interaction

enum (Interaction)

Opcjonalnie. Wymagany podczas otwierania okna.

Co zrobić w odpowiedzi na interakcję z użytkownikiem, np. kliknięcie przez niego przycisku w wiadomości na karcie.

Jeśli nie zostanie określony, aplikacja odpowie, wykonując action – np. otwierając link lub uruchamiając funkcję – w normalny sposób.

Określając interaction, aplikacja może odpowiadać w specjalny interaktywny sposób. Na przykład ustawiając interaction na OPEN_DIALOG, aplikacja może otworzyć okno. Jeśli ten parametr jest określony, wskaźnik wczytywania nie jest wyświetlany. Jeśli jest to określone w przypadku dodatku, cała karta jest usuwana i w aplikacji nie jest wyświetlane nic.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

requiredWidgets[]

string

Opcjonalnie. Wypełnij tę listę nazwami widżetów, których ta czynność wymaga do prawidłowego przesłania.

Jeśli widżety wymienione w tym miejscu nie mają wartości w momencie wywołania tej akcji, przesyłanie formularza zostanie przerwane.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

allWidgetsAreRequired

boolean

Opcjonalnie. Jeśli wartość to prawda, wszystkie widżety są uznawane za wymagane przez to działanie.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

ActionParameter

Lista parametrów tekstowych do podania podczas wywoływania metody działania. Na przykład możesz mieć 3 przyciski odkładania: odłóż teraz, odłóż o 1 dzień lub odłóż na przyszły tydzień. Możesz użyć funkcji action method = snooze(), przekazując typ i czas odroczenia na liście parametrów ciągu znaków.

Więcej informacji znajdziesz w sekcji CommonEventObject.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "key": string,
  "value": string
}
Pola
key

string

Nazwa parametru skryptu działania.

value

string

Wartość parametru.

LoadIndicator

Określa wskaźnik ładowania, który jest wyświetlany podczas wykonywania wywołania działania.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Wartości w polu enum
SPINNER Wyświetla spinner, aby wskazać, że treść się wczytuje.
NONE Nic się nie wyświetla.

Interakcja

Opcjonalnie. Wymagany podczas otwierania okna.

Co zrobić w odpowiedzi na interakcję z użytkownikiem, np. kliknięcie przez niego przycisku w wiadomości na karcie.

Jeśli nie zostanie określony, aplikacja odpowie, wykonując action – np. otwierając link lub uruchamiając funkcję – w normalny sposób.

Określając interaction, aplikacja może odpowiadać w specjalny interaktywny sposób. Na przykład ustawiając interaction na OPEN_DIALOG, aplikacja może otworzyć okno.

Jeśli ten parametr jest określony, wskaźnik wczytywania nie jest wyświetlany. Jeśli jest to określone w przypadku dodatku, cała karta jest usuwana i w aplikacji nie jest wyświetlane nic.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Wartości w polu enum
INTERACTION_UNSPECIFIED Wartość domyślna. Funkcja action jest wykonywana normalnie.
OPEN_DIALOG

Otwiera okno, czyli interfejs oparty na kartach, którego aplikacje do obsługi czatu używają do interakcji z użytkownikami.

Obsługiwane tylko przez aplikacje do obsługi czatu w odpowiedzi na kliknięcia przycisków w wiadomościach z kartami. Jeśli jest to określone w przypadku dodatku, cała karta jest usuwana i w aplikacji nie jest wyświetlane nic.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

OpenAs

Gdy działanie OnClick otwiera link, klient może go otworzyć w pełnowymiarowym oknie (jeśli jest to ramka używana przez klienta) lub w nakładce (np. w wyskakującym okienku). Implementacja zależy od możliwości platformy klienta, a wybrana wartość może zostać zignorowana, jeśli klient jej nie obsługuje. FULL_SIZE jest obsługiwany przez wszystkich klientów.

Dostępne w przypadku dodatków do Google Workspace, ale niedostępne w przypadku aplikacji Google Chat.

Wartości w polu enum
FULL_SIZE Link otworzy się w oknie o pełnym rozmiarze (jeśli klient używa takiej ramki).
OVERLAY Link otworzy się jako nakładka, np. wyskakujące okienko.

OnClose

Co robi klient, gdy link otwarty przez działanie OnClick zostanie zamknięty.

Wdrożenie zależy od możliwości platformy klienta. Na przykład przeglądarka internetowa może otworzyć link w wyskakującym okienku z  OnClose obsługą.

Jeśli ustawione są oba moduły obsługi OnOpen i OnClose, a platforma klienta nie obsługuje obu wartości, moduł OnClose ma pierwszeństwo.

Dostępne w przypadku dodatków do Google Workspace, ale niedostępne w przypadku aplikacji Google Chat.

Wartości w polu enum
NOTHING Wartość domyślna. Karta nie wczytuje się ponownie i nic się nie dzieje.
RELOAD

Ponownie wczytuje kartę po zamknięciu okna podrzędnego.

Jeśli jest używane w połączeniu z OpenAs.OVERLAY, okno podrzędne działa jak okno modalne, a karta nadrzędna jest blokowana do momentu zamknięcia okna podrzędnego.

OverflowMenu

Widżet, który wyświetla wyskakujące menu z co najmniej 1 działaniem, które użytkownicy mogą wywołać. Na przykład wyświetlanie działań innych niż główne na karcie. Możesz użyć tego widżetu, gdy działania nie mieszczą się w dostępnym miejscu. Aby go użyć, określ ten widżet w OnClick działaniu widżetów, które go obsługują. Na przykład w Button.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "items": [
    {
      object (OverflowMenuItem)
    }
  ]
}
Pola
items[]

object (OverflowMenuItem)

Wymagane. Lista opcji menu.

OverflowMenuItem

Opcja, którą użytkownicy mogą wywołać w menu rozwijanym.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "startIcon": {
    object (Icon)
  },
  "text": string,
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean
}
Pola
startIcon

object (Icon)

Ikona wyświetlana przed tekstem.

text

string

Wymagane. Tekst, który identyfikuje lub opisuje produkt użytkownikom.

onClick

object (OnClick)

Wymagane. Działanie wywoływane po wybraniu opcji menu. Ten elementOnClicknie może zawieraćOverflowMenu. Jeśli zawieraOverflowMenu, zostanie on usunięty, a pozycja menu zostanie wyłączona.

disabled

boolean

Określa, czy opcja menu jest wyłączona. Wartość domyślna to fałsz.

Ikona

Ikona wyświetlana w widżecie na karcie. Przykład w aplikacjach Google Chat znajdziesz w artykule Dodawanie ikony.

Obsługuje wbudowane i niestandardowe ikony.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string,
  "materialIcon": {
    object (MaterialIcon)
  }
  // End of list of possible types for union field icons.
}
Pola
altText

string

Opcjonalnie. Opis ikony używany na potrzeby ułatwień dostępu. Jeśli wartość nie zostanie podana, domyślnie jest to Button. Zgodnie ze sprawdzonymi metodami warto dodać przydatny opis tego, co wyświetla ikona, a w stosownych przypadkach – co robi. Na przykład: A user's account portrait lub Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/workspace/chat.

Jeśli ikona jest ustawiona w Button, po najechaniu kursorem na przycisk jako tekst pomocniczy pojawi się altText. Jeśli jednak przycisk ustawia też wartość text, atrybut altText ikony jest ignorowany.

imageType

enum (ImageType)

Styl przycięcia zastosowany do obrazu. W niektórych przypadkach zastosowanie przycięciaCIRCLEsprawia, że obraz jest rysowany w większym rozmiarze niż wbudowana ikona.

Pole uniiicons. Ikona wyświetlana w widżecie na karcie. icons może mieć tylko jedną z tych wartości:
knownIcon

string

Wyświetl jedną z wbudowanych ikon udostępnianych przez Google Workspace.

Aby na przykład wyświetlić ikonę samolotu, wpisz AIRPLANE. W przypadku autobusu podaj wartość BUS.

Pełną listę obsługiwanych ikon znajdziesz w sekcji wbudowane ikony.

iconUrl

string

Wyświetlanie ikony niestandardowej hostowanej pod adresem URL HTTPS.

Na przykład: 

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

Obsługiwane typy plików to .png i .jpg.

materialIcon

object (MaterialIcon)

Wyświetl jedną z ikon Material Design od Google.

Aby na przykład wyświetlić ikonę pola wyboru, użyj 

"materialIcon": {
  "name": "check_box"
}

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

MaterialIcon

ikony Material Design od Google, które obejmują ponad 2500 opcji;

Aby na przykład wyświetlić ikonę pola wyboru o dostosowanej wadze i ocenie, wpisz: 

{
  "name": "check_box",
  "fill": true,
  "weight": 300,
  "grade": -25
}

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Zapis JSON 
{
  "name": string,
  "fill": boolean,
  "weight": integer,
  "grade": integer
}
Pola
name

string

Nazwa ikony zdefiniowana w Google Material Icon, np. check_box. Nieprawidłowe nazwy są odrzucane i zastępowane pustym ciągiem znaków, co powoduje, że ikona nie jest renderowana.

fill

boolean

Określa, czy ikona jest wypełniona. Wartość domyślna to fałsz.

Aby wyświetlić podgląd różnych ustawień ikon, otwórz stronę Ikony czcionek Google i dostosuj ustawienia w sekcji Dostosuj.

weight

integer

Grubość konturu ikony. Wybierz jedną z wartości: {100, 200, 300, 400, 500, 600, 700}. Jeśli nie jest obecny, wartością domyślną jest 400. Jeśli podasz inną wartość, zostanie użyta wartość domyślna.

Aby wyświetlić podgląd różnych ustawień ikon, otwórz stronę Ikony czcionek Google i dostosuj ustawienia w sekcji Dostosuj.

grade

integer

Waga i stopień wpływają na grubość symbolu. Korekty oceny są bardziej szczegółowe niż korekty wagi i mają niewielki wpływ na rozmiar symbolu. Wybierz jedną z wartości: {-25, 0, 200}. Jeśli nie podasz żadnej opcji, domyślną wartością będzie 0. Jeśli podasz inną wartość, zostanie użyta wartość domyślna.

Aby wyświetlić podgląd różnych ustawień ikon, otwórz stronę Ikony czcionek Google i dostosuj ustawienia w sekcji Dostosuj.

DecoratedText

Widżet, który wyświetla tekst z opcjonalnymi dekoracjami, takimi jak etykieta nad lub pod tekstem, ikona przed tekstem, widżet wyboru lub przycisk po tekście. Przykład w aplikacjach Google Chat znajdziesz w artykule Wyświetlanie tekstu z dekoracyjnym formatowaniem.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "startIconVerticalAlignment": enum (VerticalAlignment),
  "topLabel": string,
  "topLabelText": {
    object (TextParagraph)
  },
  "text": string,
  "contentText": {
    object (TextParagraph)
  },
  "wrapText": boolean,
  "bottomLabel": string,
  "bottomLabelText": {
    object (TextParagraph)
  },
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}
Pola
icon
(deprecated)

object (Icon)

Wycofane na rzecz startIcon.

startIcon

object (Icon)

Ikona wyświetlana przed tekstem.

startIconVerticalAlignment

enum (VerticalAlignment)

Opcjonalnie. Wyrównanie pionowe ikony rozpoczęcia. Jeśli nie zostanie ustawiona, ikona będzie wyśrodkowana w pionie.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

topLabel

string

Tekst, który pojawia się nad text. Zawsze obcina.

topLabelText

object (TextParagraph)

TextParagraph odpowiednik topLabel. Zawsze obcina. Umożliwia bardziej złożone formatowanie niż topLabel.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

text

string

Wymagane. Tekst główny.

Obsługuje proste formatowanie. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatkach do Google Workspace.

contentText

object (TextParagraph)

TextParagraph odpowiednik text. Umożliwia bardziej złożone formatowanie niż text.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

wrapText

boolean

Ustawienie zawijania tekstu. Jeśli true, tekst jest zawijany i wyświetlany w kilku wierszach. W przeciwnym razie tekst zostanie obcięty.

Dotyczy tylko urządzenia text, a nie topLabel i bottomLabel.

bottomLabel

string

Tekst wyświetlany pod ikonątext. Zawsze zawija.

bottomLabelText

object (TextParagraph)

TextParagraph odpowiednik bottomLabel. Zawsze zawija. Umożliwia bardziej złożone formatowanie niż bottomLabel.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

onClick

object (OnClick)

Ta czynność jest wywoływana, gdy użytkownicy klikną topLabel lub bottomLabel.

Pole uniicontrol. Przycisk, przełącznik, pole wyboru lub obraz, który pojawia się po prawej stronie tekstu w decoratedTextwidżecie. control może mieć tylko jedną z tych wartości:
button

object (Button)

Przycisk, który użytkownik może kliknąć, aby wywołać działanie.

switchControl

object (SwitchControl)

Widżet przełącznika, który użytkownik może kliknąć, aby zmienić jego stan i wywołać działanie.

endIcon

object (Icon)

Ikona wyświetlana po tekście.

Obsługuje wbudowane i niestandardowe ikony.

VerticalAlignment

Reprezentuje atrybut wyrównania w pionie.

Wartości w polu enum
VERTICAL_ALIGNMENT_UNSPECIFIED Nieokreślony typ. Nie używać.
TOP Wyrównanie do góry.
MIDDLE Wyrównanie do pozycji środkowej.
BOTTOM Wyrównanie do dołu.

Przycisk

Przycisk z tekstem, ikoną lub tekstem i ikoną, który użytkownicy mogą klikać. Przykład w aplikacjach Google Chat znajdziesz w artykule Dodawanie przycisku.

Aby obraz stał się przyciskiem, który można kliknąć, określ element Image (nie ImageComponent) i ustaw działanie onClick.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string,
  "type": enum (Type)
}
Pola
text

string

Tekst wyświetlany wewnątrz przycisku.

icon

object (Icon)

Ikona wyświetlana w przycisku. Jeśli ustawisz zarówno parametr icon, jak i text, ikona będzie się wyświetlać przed tekstem.

color

object (Color)

Opcjonalnie. Kolor przycisku. Jeśli jest ustawiony, przycisk type jest ustawiony na FILLED , a kolor pól text i icon jest ustawiony na kontrastowy kolor, aby zwiększyć czytelność. Jeśli na przykład kolor przycisku jest ustawiony na niebieski, cały tekst i wszystkie ikony na przycisku będą białe.

Aby ustawić kolor przycisku, określ wartość w polach red, green i blue. Wartość musi być liczbą zmiennoprzecinkową z zakresu od 0 do 1 na podstawie wartości koloru RGB, gdzie 0 (0/255) oznacza brak koloru, a 1 (255/255) oznacza maksymalne natężenie koloru.

Na przykład poniższy kod ustawia kolor czerwony o maksymalnej intensywności: 

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
}

Pole alpha jest niedostępne w przypadku koloru przycisku. Jeśli to pole zostanie podane, będzie ignorowane.

onClick

object (OnClick)

Wymagane. Działanie, które ma zostać wykonane, gdy użytkownik kliknie przycisk, np. otwarcie hiperlinku lub uruchomienie funkcji niestandardowej.

disabled

boolean

Jeśli true, przycisk jest wyświetlany w stanie nieaktywnym i nie reaguje na działania użytkownika.

altText

string

Tekst alternatywny używany na potrzeby ułatwień dostępu.

Ustaw tekst opisowy, który informuje użytkowników o działaniu przycisku. Jeśli na przykład przycisk otwiera hiperlink, możesz napisać: „Otwiera nową kartę przeglądarki i przechodzi do dokumentacji dla programistów Google Chat na stronie https://developers.google.com/workspace/chat"”.

type

enum (Type)

Opcjonalnie. Typ przycisku. Jeśli nie jest ustawiony, domyślny typ przycisku to OUTLINED. Jeśli pole color jest ustawione, typ przycisku jest wymuszany na FILLED , a wszelkie wartości ustawione w tym polu są ignorowane.

Kolor

Reprezentuje kolor w przestrzeni kolorów RGBA. Ta reprezentacja została zaprojektowana z myślą o łatwości konwersji na reprezentacje kolorów w różnych językach i z nich, a nie o kompaktowości. Na przykład pola tej reprezentacji można w prosty sposób przekazać do konstruktora java.awt.Colorw języku Java, a także do metody +colorWithRed:green:blue:alpha klasy UIColor w systemie iOS. Po niewielkich modyfikacjach można je też łatwo sformatować w ciąg znaków rgba() w języku JavaScript.

Na tej stronie referencyjnej nie ma informacji o bezwzględnej przestrzeni kolorów, która powinna być używana do interpretowania wartości RGB, np. sRGB, Adobe RGB, DCI-P3 i BT.2020. Domyślnie aplikacje powinny zakładać przestrzeń kolorów sRGB.

Jeśli trzeba określić, czy dwa kolory są równe, implementacje, o ile nie podano inaczej w dokumentacji, traktują dwa kolory jako równe, jeśli wszystkie ich wartości czerwieni, zieleni, niebieskiego i alfa różnią się od siebie o co najwyżej 1e-5.

Przykład (Java): 

 import com.google.type.Color;

 // ...
 public static java.awt.Color fromProto(Color protocolor) {
   float alpha = protocolor.hasAlpha()
       ? protocolor.getAlpha().getValue()
       : 1.0;

   return new java.awt.Color(
       protocolor.getRed(),
       protocolor.getGreen(),
       protocolor.getBlue(),
       alpha);
 }

 public static Color toProto(java.awt.Color color) {
   float red = (float) color.getRed();
   float green = (float) color.getGreen();
   float blue = (float) color.getBlue();
   float denominator = 255.0;
   Color.Builder resultBuilder =
       Color
           .newBuilder()
           .setRed(red / denominator)
           .setGreen(green / denominator)
           .setBlue(blue / denominator);
   int alpha = color.getAlpha();
   if (alpha != 255) {
     result.setAlpha(
         FloatValue
             .newBuilder()
             .setValue(((float) alpha) / denominator)
             .build());
   }
   return resultBuilder.build();
 }
 // ...

Przykład (iOS / Obj-C): 

 // ...
 static UIColor* fromProto(Color* protocolor) {
    float red = [protocolor red];
    float green = [protocolor green];
    float blue = [protocolor blue];
    FloatValue* alpha_wrapper = [protocolor alpha];
    float alpha = 1.0;
    if (alpha_wrapper != nil) {
      alpha = [alpha_wrapper value];
    }
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
 }

 static Color* toProto(UIColor* color) {
     CGFloat red, green, blue, alpha;
     if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
       return nil;
     }
     Color* result = [[Color alloc] init];
     [result setRed:red];
     [result setGreen:green];
     [result setBlue:blue];
     if (alpha <= 0.9999) {
       [result setAlpha:floatWrapperWithValue(alpha)];
     }
     [result autorelease];
     return result;
}
// ...

Przykład (JavaScript): 

// ...

var protoToCssColor = function(rgb_color) {
   var redFrac = rgb_color.red || 0.0;
   var greenFrac = rgb_color.green || 0.0;
   var blueFrac = rgb_color.blue || 0.0;
   var red = Math.floor(redFrac * 255);
   var green = Math.floor(greenFrac * 255);
   var blue = Math.floor(blueFrac * 255);

   if (!('alpha' in rgb_color)) {
      return rgbToCssColor(red, green, blue);
   }

   var alphaFrac = rgb_color.alpha.value || 0.0;
   var rgbParams = [red, green, blue].join(',');
   return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};

var rgbToCssColor = function(red, green, blue) {
  var rgbNumber = new Number((red << 16) | (green << 8) | blue);
  var hexString = rgbNumber.toString(16);
  var missingZeros = 6 - hexString.length;
  var resultBuilder = ['#'];
  for (var i = 0; i < missingZeros; i++) {
     resultBuilder.push('0');
  }
  resultBuilder.push(hexString);
  return resultBuilder.join('');
};

// ...
Zapis JSON 
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
Pola
red

number

Ilość czerwieni w kolorze jako wartość z przedziału [0, 1].

green

number

Ilość zieleni w kolorze jako wartość z przedziału [0, 1].

blue

number

Ilość niebieskiego w kolorze jako wartość z przedziału [0, 1].

alpha

number

Ułamek tego koloru, który ma zostać zastosowany do piksela. Oznacza to, że ostateczny kolor piksela jest określany przez to równanie:

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

Oznacza to, że wartość 1,0 odpowiada jednolitemu kolorowi, a wartość 0,0 – całkowicie przezroczystemu kolorowi. Używa to wiadomości opakowującej zamiast prostego skalaru zmiennoprzecinkowego, dzięki czemu można odróżnić wartość domyślną od wartości nieustawionej. Jeśli ten obiekt koloru zostanie pominięty, będzie renderowany jako jednolity kolor (tak jakby wartość alfa miała wartość 1,0).

Typ

Opcjonalnie. Typ przycisku. Jeśli pole color jest ustawione, pole type jest wymuszane na FILLED.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Wartości w polu enum
TYPE_UNSPECIFIED Nie używaj. Nie określono.
OUTLINED Przyciski z konturem to przyciski o średnim stopniu wyróżnienia. Zwykle zawierają one działania, które są ważne, ale nie są głównym działaniem w aplikacji do obsługi Google Chat ani w dodatku.
FILLED Wypełniony przycisk ma kontener w jednolitym kolorze. Ma największy wpływ wizualny i jest zalecany w przypadku ważnych i podstawowych działań w aplikacji do obsługi czatu lub dodatku.
FILLED_TONAL Wypełniony przycisk tonalny to alternatywne rozwiązanie pośrednie między przyciskami wypełnionymi a przyciskami z obramowaniem. Przydają się w sytuacjach, w których przycisk o niższym priorytecie wymaga nieco większego wyróżnienia niż przycisk konturowy.
BORDERLESS Przycisk nie ma niewidocznego kontenera w stanie domyślnym. Jest on często używany w przypadku działań o najniższym priorytecie, zwłaszcza gdy prezentowanych jest wiele opcji.

SwitchControl

Przełącznik lub pole wyboru w widżecie decoratedText.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Ta funkcja jest obsługiwana tylko w widżecie decoratedText.

Zapis JSON 
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
Pola
name

string

Nazwa, pod którą widżet przełącznika jest identyfikowany w zdarzeniu wprowadzania danych w formularzu.

Więcej informacji o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych z formularza.

value

string

Wartość wpisana przez użytkownika, zwracana w ramach zdarzenia wprowadzania danych w formularzu.

Więcej informacji o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych z formularza.

selected

boolean

Gdy true, przełącznik jest włączony.

onChangeAction

object (Action)

Czynność do wykonania po zmianie stanu przełącznika, np. funkcja do uruchomienia.

controlType

enum (ControlType)

Sposób wyświetlania przełącznika w interfejsie.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

ControlType

Sposób wyświetlania przełącznika w interfejsie.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Wartości w polu enum
SWITCH Przełącznik w stylu przełącznika dwupozycyjnego.
CHECKBOX Wycofane na rzecz CHECK_BOX.
CHECK_BOX Pole wyboru.

ButtonList

Lista przycisków ułożonych poziomo. Przykład w aplikacjach Google Chat znajdziesz w artykule Dodawanie przycisku.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Pola
buttons[]

object (Button)

Tablica przycisków.

TextInput

Pole, w którym użytkownicy mogą wpisywać tekst. Obsługuje sugestie i działania po zmianie. Obsługuje weryfikację przesłanych formularzy. Gdy parametr Action.all_widgets_are_required ma wartość true lub ten widżet jest określony w parametrze Action.required_widgets, działanie przesyłania jest blokowane, chyba że zostanie wprowadzona wartość. Przykład w aplikacjach Google Chat znajdziesz w artykule Dodawanie pola, w którym użytkownik może wpisać tekst.

Aplikacje do obsługi czatu otrzymują i mogą przetwarzać wartość wpisanego tekstu podczas zdarzeń wprowadzania danych w formularzu. Więcej informacji o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych z formularza.

Jeśli musisz zbierać od użytkowników niezdefiniowane lub abstrakcyjne dane, użyj pola wprowadzania tekstu. Aby zbierać od użytkowników zdefiniowane lub wyliczone dane, użyj widżetu SelectionInput.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  },
  "validation": {
    object (Validation)
  },
  "placeholderText": string
}
Pola
name

string

Nazwa, pod którą wprowadzony tekst jest identyfikowany w zdarzeniu wprowadzania danych w formularzu.

Więcej informacji o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych z formularza.

label

string

Tekst, który pojawia się nad polem wprowadzania tekstu w interfejsie.

Określ tekst, który pomoże użytkownikowi wpisać informacje potrzebne aplikacji. Jeśli na przykład pytasz o imię i nazwisko, ale potrzebujesz tylko nazwiska, wpisz surname zamiast name.

Wymagany, jeśli nie określono wartości hintText. W przeciwnym razie jest opcjonalne.

hintText

string

Tekst wyświetlany pod polem wprowadzania tekstu, który ma pomóc użytkownikom, zachęcając ich do wpisania określonej wartości. Ten tekst jest zawsze widoczny.

Wymagany, jeśli nie określono wartości label. W przeciwnym razie jest opcjonalne.

value

string

Wartość wpisana przez użytkownika, zwracana w ramach zdarzenia wprowadzania danych w formularzu.

Więcej informacji o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych z formularza.

type

enum (Type)

Sposób wyświetlania pola wprowadzania tekstu w interfejsie. Na przykład czy pole jest jedno- czy wielowierszowe.

onChangeAction

object (Action)

Co zrobić, gdy w polu wprowadzania tekstu nastąpi zmiana. Na przykład użytkownik dodaje tekst do pola lub go usuwa.

Przykłady działań, które możesz wykonać, to uruchomienie funkcji niestandardowej lub otwarcie okna w Google Chat.

initialSuggestions

object (Suggestions)

Sugerowane wartości, które użytkownicy mogą wpisać. Te wartości pojawiają się, gdy użytkownicy klikną pole wprowadzania tekstu. W miarę wpisywania przez użytkowników sugerowane wartości są dynamicznie filtrowane, aby pasowały do wpisanego tekstu.

Na przykład pole tekstowe do wpisywania języka programowania może sugerować Java, JavaScript, Python i C++. Gdy użytkownicy zaczną pisać Jav, lista sugestii zostanie przefiltrowana tak, aby wyświetlać tylko Java i  JavaScript.

Sugerowane wartości pomagają użytkownikom wpisywać wartości, które Twoja aplikacja może interpretować. Niektórzy użytkownicy mogą wpisywać javascript, a inni java script. SugestieJavaScriptmogą ujednolicić sposób interakcji użytkowników z aplikacją.

Jeśli jest określony, element TextInput.type zawsze ma wartość SINGLE_LINE, nawet jeśli jest ustawiony na MULTIPLE_LINE.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

autoCompleteAction

object (Action)

Opcjonalnie. Określ, jakie działanie ma być wykonywane, gdy pole wprowadzania tekstu wyświetla sugestie użytkownikom, którzy z niego korzystają.

Jeśli nie zostanie określony, sugestie są ustawiane przez initialSuggestions i przetwarzane przez klienta.

Jeśli jest to określone, aplikacja wykonuje działanie podane w tym miejscu, np. uruchamia funkcję niestandardową.

Dostępne w przypadku dodatków do Google Workspace, ale niedostępne w przypadku aplikacji Google Chat.

validation

object (Validation)

Określ sprawdzanie poprawności formatu danych wejściowych wymagane w przypadku tego pola tekstowego.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

placeholderText

string

Tekst, który pojawia się w polu do wprowadzania tekstu, gdy jest ono puste. Użyj tego tekstu, aby zachęcić użytkowników do wpisania wartości. Na przykład: Enter a number from 0 to 100.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Typ

Sposób wyświetlania pola wprowadzania tekstu w interfejsie. Na przykład czy jest to pole wprowadzania z 1 wierszem czy z wieloma wierszami. Jeśli określono parametr initialSuggestions, parametr type zawsze ma wartość SINGLE_LINE, nawet jeśli jest ustawiony na MULTIPLE_LINE.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Wartości w polu enum
SINGLE_LINE Pole wprowadzania tekstu ma stałą wysokość 1 wiersza.
MULTIPLE_LINE Pole wprowadzania tekstu ma stałą wysokość wielu wierszy.

RenderActions

Zestaw instrukcji renderowania, które nakazują karcie wykonanie działania lub aplikacji hosta dodatku albo aplikacji do obsługi czatu wykonanie działania specyficznego dla aplikacji.

 Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Pola
action

Action

Działanie

Pola
navigations[]

Navigation

Wysyła, wyświetla lub aktualizuje kartę.

Dodatki w Google Chat

Dodaj nową kartę do stosu (przejdź do przodu). W przypadku aplikacji do obsługi czatu jest to dostępne tylko na stronie głównej aplikacji.

 Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

navigations: {
  pushCard: CARD
}

Zastąp górną kartę nową. W przypadku aplikacji do obsługi czatu jest to dostępne tylko na stronie głównej aplikacji.

 Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

navigations: {
  updateCard: CARD
}

Sugestie

Sugerowane wartości, które użytkownicy mogą wpisać. Te wartości pojawiają się, gdy użytkownicy klikną pole wprowadzania tekstu. W miarę wpisywania przez użytkowników sugerowane wartości są dynamicznie filtrowane, aby pasowały do wpisanego tekstu.

Na przykład pole tekstowe do wpisywania języka programowania może sugerować Java, JavaScript, Python i C++. Gdy użytkownicy zaczną pisać Jav, lista sugestii zostanie przefiltrowana i wyświetli Java i  JavaScript.

Sugerowane wartości pomagają użytkownikom wpisywać wartości, które Twoja aplikacja może interpretować. Niektórzy użytkownicy mogą wpisywać javascript, a inni java script. SugestieJavaScriptmogą ujednolicić sposób interakcji użytkowników z aplikacją.

Jeśli jest określony, element TextInput.type zawsze ma wartość SINGLE_LINE, nawet jeśli jest ustawiony na MULTIPLE_LINE.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}
Pola
items[]

object (SuggestionItem)

Lista sugestii używanych w rekomendacjach autouzupełniania w polach wprowadzania tekstu.

SuggestionItem

Sugerowana wartość, którą użytkownicy mogą wpisać w polu tekstowym.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{

  // Union field content can be only one of the following:
  "text": string
  // End of list of possible types for union field content.
}
Pola

Pole uniicontent.

content może mieć tylko jedną z tych wartości:

text

string

Wartość sugerowanego wpisu w polu tekstowym. Jest to odpowiednik informacji wprowadzanych przez użytkowników.

Weryfikacja

Zawiera dane niezbędne do weryfikacji widżetu, do którego jest dołączony.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "characterLimit": integer,
  "inputType": enum (InputType)
}
Pola
characterLimit

integer

Określ limit znaków dla widżetów wprowadzania tekstu. Pamiętaj, że ta opcja jest używana tylko w przypadku wprowadzania tekstu i jest ignorowana w przypadku innych widżetów.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

inputType

enum (InputType)

Określ typ widżetów wejściowych.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

InputType

Typ widżetu wejściowego.

Wartości w polu enum
INPUT_TYPE_UNSPECIFIED Nieokreślony typ. Nie używać.
TEXT Zwykły tekst, który akceptuje wszystkie znaki.
INTEGER Wartość całkowita.
FLOAT Wartość zmiennoprzecinkowa.
EMAIL Adres e-mail.
EMOJI_PICKER Emotikon wybrany w selektorze emotikonów dostarczonym przez system.

SelectionInput

Widżet, który tworzy co najmniej 1 element interfejsu, który użytkownicy mogą wybrać. Obsługuje sprawdzanie poprawności przesłania formularza tylko w przypadku menu dropdown i multiselect. Gdy parametr Action.all_widgets_are_required ma wartość true lub ten widżet jest określony w parametrze Action.required_widgets, działanie przesyłania jest blokowane, chyba że zostanie wybrana wartość. Na przykład menu lub pola wyboru. Za pomocą tego widżetu możesz zbierać dane, które można przewidzieć lub wyliczyć. Przykład w aplikacjach Google Chat znajdziesz w artykule Dodawanie elementów interfejsu użytkownika, które można wybrać.

Aplikacje do obsługi czatu mogą przetwarzać wartości elementów wybranych lub wpisanych przez użytkowników. Więcej informacji o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych z formularza.

Aby zbierać od użytkowników niezdefiniowane lub abstrakcyjne dane, użyj widżetu TextInput.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  },
  "multiSelectMaxSelectedItems": integer,
  "multiSelectMinQueryLength": integer,

  // Union field multi_select_data_source can be only one of the following:
  "externalDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
  // End of list of possible types for union field multi_select_data_source.
}
Pola
name

string

Wymagane. Nazwa, która identyfikuje dane wejściowe wyboru w zdarzeniu wprowadzania danych w formularzu.

Więcej informacji o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych z formularza.

label

string

Tekst, który pojawia się nad polem wprowadzania wyboru w interfejsie.

Określ tekst, który pomoże użytkownikowi wpisać informacje potrzebne aplikacji. Jeśli na przykład użytkownicy wybierają pilność zgłoszenia z menu, etykieta może brzmieć „Pilność” lub „Wybierz pilność”.

type

enum (SelectionType)

Rodzaj elementów wyświetlanych użytkownikom w widżecie.SelectionInput Typy wyboru obsługują różne rodzaje interakcji. Użytkownicy mogą na przykład zaznaczyć co najmniej jedno pole wyboru, ale w menu mogą wybrać tylko jedną wartość.

items[]

object (SelectionItem)

Tablica elementów do wyboru. Na przykład tablica przycisków opcji lub pól wyboru. Obsługuje do 100 elementów.

onChangeAction

object (Action)

Jeśli ta opcja jest określona, formularz jest przesyłany po zmianie wyboru. Jeśli nie określisz tego parametru, musisz podać osobny przycisk, który przesyła formularz.

Więcej informacji o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych z formularza.

multiSelectMaxSelectedItems

integer

W przypadku menu wielokrotnego wyboru jest to maksymalna liczba elementów, które użytkownik może wybrać. Minimalna wartość to 1 produkt. Jeśli nie określisz tu żadnej wartości, zostaną użyte domyślne 3 elementy.

multiSelectMinQueryLength

integer

W przypadku menu wielokrotnego wyboru liczba znaków tekstowych, które użytkownik wpisuje, zanim menu zwróci sugerowane elementy wyboru.

Jeśli nie jest skonfigurowane, menu wielokrotnego wyboru używa tych wartości domyślnych:

  • Jeśli menu używa statycznej tablicy elementów, domyślnie ma 0 znaków i natychmiast wypełnia elementy z tablicy.SelectionInput
  • Jeśli menu korzysta z dynamicznego źródła danych (multi_select_data_source), domyślnie przed wysłaniem zapytania do źródła danych w celu zwrócenia sugerowanych elementów używane są 3 znaki.

Pole uniimulti_select_data_source. W przypadku menu wielokrotnego wyboru źródło danych, które dynamicznie wypełnia elementy wyboru.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace. multi_select_data_source może mieć tylko jedną z tych wartości:

externalDataSource

object (Action)

zewnętrzne źródło danych, np. relacyjna baza danych;

platformDataSource

object (PlatformDataSource)

Źródło danych z Google Workspace.

SelectionType

Format elementów, które użytkownicy mogą wybrać. Różne opcje obsługują różne typy interakcji. Użytkownicy mogą na przykład zaznaczyć kilka pól wyboru, ale w menu mogą wybrać tylko 1 element.

Każde pole wyboru obsługuje jeden typ wyboru. Łączenie pól wyboru i przełączników nie jest obsługiwane.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Wartości w polu enum
CHECK_BOX Zestaw pól wyboru. Użytkownicy mogą zaznaczyć co najmniej 1 pole wyboru.
RADIO_BUTTON Zestaw opcji. Użytkownicy mogą wybrać jeden przycisk opcji.
SWITCH Zestaw przełączników. Użytkownicy mogą włączyć jeden lub więcej przełączników.
DROPDOWN Menu. Użytkownicy mogą wybrać 1 element z menu.
MULTI_SELECT

Menu z polem tekstowym. Użytkownicy mogą wpisywać tekst i wybierać co najmniej 1 element. W przypadku dodatków do Google Workspace musisz wypełnić elementy za pomocą statycznej tablicy obiektów.SelectionItem

W przypadku aplikacji Google Chat możesz też wypełniać elementy za pomocą dynamicznego źródła danych i automatycznie sugerować elementy, gdy użytkownicy wpisują tekst w menu. Użytkownicy mogą na przykład zacząć wpisywać nazwę pokoju w Google Chat, a widżet automatycznie zasugeruje ten pokój. Aby dynamicznie wypełniać elementy w menu wielokrotnego wyboru, użyj jednego z tych typów źródeł danych:

  • Dane Google Workspace: elementy są wypełniane danymi z Google Workspace, takimi jak użytkownicy Google Workspace lub pokoje w Google Chat.
  • Dane zewnętrzne: elementy są wypełniane na podstawie zewnętrznego źródła danych spoza Google Workspace.

Przykłady implementacji menu wielokrotnego wyboru w aplikacjach Google Chat znajdziesz w artykule Dodawanie menu wielokrotnego wyboru.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

SelectionItem

Element, który użytkownicy mogą wybrać w polu wyboru, np. pole wyboru lub przełącznik. Obsługuje do 100 elementów.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "text": string,
  "value": string,
  "selected": boolean,
  "bottomText": string,

  // Union field start_icon can be only one of the following:
  "startIconUri": string
  // End of list of possible types for union field start_icon.
}
Pola
text

string

Tekst, który identyfikuje lub opisuje produkt użytkownikom.

value

string

Wartość powiązana z tym produktem. Klient powinien użyć tej wartości jako wartości wejściowej formularza.

Więcej informacji o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych z formularza.

selected

boolean

Czy element jest domyślnie wybrany. Jeśli pole wyboru akceptuje tylko jedną wartość (np. w przypadku przycisków opcji lub menu), ustaw to pole tylko dla jednego elementu.

bottomText

string

W przypadku menu wielokrotnego wyboru jest to opis tekstowy lub etykieta wyświetlana pod polem textelementu.

Pole uniistart_icon. W przypadku menu wielokrotnego wyboru adres URL ikony wyświetlanej obok pola elementu.text Obsługuje pliki PNG i JPEG. Musi to być adres URL HTTPS. Na przykład: https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png. start_icon może mieć tylko jedną z tych wartości:
startIconUri

string

PlatformDataSource

W przypadku widżetuSelectionInput korzystającego z menu wielokrotnego wyboru źródłem danych jest Google Workspace. Służy do wypełniania pozycji w menu wielokrotnego wyboru.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Zapis JSON 
{

  // Union field data_source can be only one of the following:
  "commonDataSource": enum (CommonDataSource),
  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
Pola
Pole uniidata_source. Źródło danych. data_source może mieć tylko jedną z tych wartości:
commonDataSource

enum (CommonDataSource)

Źródło danych udostępniane przez wszystkie aplikacje Google Workspace, np. użytkownicy w organizacji Google Workspace.

hostAppDataSource

object (HostAppDataSourceMarkup)

Źródło danych, które jest unikalne dla aplikacji hostującej Google Workspace, np. pokoje w Google Chat.

To pole obsługuje biblioteki klienta interfejsów API Google, ale nie jest dostępne w bibliotekach klienta Cloud. Więcej informacji znajdziesz w artykule Instalowanie bibliotek klienta.

CommonDataSource

Źródło danych udostępniane przez wszystkie aplikacje Google Workspace.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Wartości w polu enum
UNKNOWN Wartość domyślna. Nie używaj.
USER użytkownicy Google Workspace; Użytkownik może wyświetlać i wybierać tylko użytkowników z organizacji Google Workspace.

HostAppDataSourceMarkup

W przypadku widżetu SelectionInput korzystającego z menu wielokrotnego wyboru źródłem danych jest aplikacja Google Workspace. Źródło danych wypełnia elementy wyboru w menu wielokrotnego wyboru.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Zapis JSON 
{

  // Union field data_source can be only one of the following:
  "chatDataSource": {
    object (ChatClientDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
Pola
Pole uniidata_source. Aplikacja Google Workspace, która wypełnia elementy menu wielokrotnego wyboru. data_source może mieć tylko jedną z tych wartości:
chatDataSource

object (ChatClientDataSourceMarkup)

Źródło danych z Google Chat.

ChatClientDataSourceMarkup

W przypadku widżetu SelectionInput korzystającego z menu wielokrotnego wyboru źródło danych z Google Chat. Źródło danych wypełnia elementy wyboru w menu wielokrotnego wyboru. Na przykład użytkownik może wybrać pokoje Google Chat, w których jest członkiem.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Zapis JSON 
{

  // Union field source can be only one of the following:
  "spaceDataSource": {
    object (SpaceDataSource)
  }
  // End of list of possible types for union field source.
}
Pola
Pole uniisource. Źródło danych Google Chat. source może mieć tylko jedną z tych wartości:
spaceDataSource

object (SpaceDataSource)

Pokoje w Google Chat, w których użytkownik jest członkiem.

SpaceDataSource

Źródło danych, które wypełnia pokoje w Google Chat jako elementy wyboru w menu wielokrotnego wyboru. Wypełnia tylko pokoje, w których użytkownik jest członkiem.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Zapis JSON 
{
  "defaultToCurrentSpace": boolean
}
Pola
defaultToCurrentSpace

boolean

Jeśli ta opcja jest ustawiona na true, w menu wielokrotnego wyboru domyślnie wybierany jest bieżący pokój Google Chat.

DateTimePicker

Umożliwia użytkownikom wprowadzanie daty, godziny lub obu tych wartości. Obsługuje weryfikację przesłanych formularzy. Gdy parametr Action.all_widgets_are_required ma wartość true lub ten widżet jest określony w parametrze Action.required_widgets, działanie przesyłania jest blokowane, chyba że zostanie wybrana wartość. Przykład w aplikacjach Google Chat znajdziesz w artykule Umożliwianie użytkownikowi wybrania daty i godziny.

Użytkownicy mogą wpisywać tekst lub używać selektora do wybierania dat i godzin. Jeśli użytkownicy wpiszą nieprawidłową datę lub godzinę, selektor wyświetli błąd z prośbą o poprawne wprowadzenie informacji.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "name": string,
  "label": string,
  "type": enum (DateTimePickerType),
  "valueMsEpoch": int64,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  }
}
Pola
name

string

Nazwa, pod którą element DateTimePicker jest identyfikowany w zdarzeniu wprowadzania danych w formularzu.

Więcej informacji o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych z formularza.

label

string

Tekst, który zachęca użytkowników do wpisania daty, godziny lub daty i godziny. Jeśli na przykład użytkownicy umawiają się na spotkanie, użyj etykiety takiej jak Appointment date lub Appointment date and time.

type

enum (DateTimePickerType)

Określa, czy widżet obsługuje wprowadzanie daty, godziny lub daty i godziny.

valueMsEpoch

int64

Wartość domyślna wyświetlana w widżecie, w milisekundach od czasu epoki systemu Unix.

Określ wartość na podstawie typu selektora (DateTimePickerType):

  • DATE_AND_TIME : data i godzina w kalendarzu w formacie UTC. Aby na przykład przedstawić 1 stycznia 2023 r. o godzinie 12:00 czasu UTC, użyj 1672574400000.
  • DATE_ONLY : data kalendarzowa o godzinie 00:00:00 UTC. Aby na przykład przedstawić datę 1 stycznia 2023 r., użyj wartości 1672531200000.
  • TIME_ONLY : czas w strefie UTC. Aby na przykład podać godzinę 12:00, użyj 43200000 (lub 12 * 60 * 60 * 1000).
timezoneOffsetDate

integer

Liczba reprezentująca przesunięcie strefy czasowej względem czasu UTC w minutach. Jeśli jest ustawiona, wartość valueMsEpoch jest wyświetlana w określonej strefie czasowej. Jeśli nie jest ustawiona, domyślnie przyjmuje się ustawienie strefy czasowej użytkownika.

onChangeAction

object (Action)

Wywoływane, gdy użytkownik kliknie Zapisz lub Wyczyść w interfejsie DateTimePicker.

DateTimePickerType

Format daty i godziny w widżecie DateTimePicker. Określa, czy użytkownicy mogą wpisywać datę, godzinę lub datę i godzinę.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Wartości w polu enum
DATE_AND_TIME Użytkownicy wpisują datę i godzinę.
DATE_ONLY Użytkownicy wpisują datę.
TIME_ONLY Użytkownicy wpisują godzinę.

Separator

Ten typ nie ma pól.

Wyświetla separator między widżetami w postaci linii poziomej. Przykład w aplikacjach Google Chat znajdziesz w artykule Dodawanie poziomego separatora między widżetami.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Na przykład ten kod JSON tworzy separator: 

"divider": {}

Siatka

Wyświetla siatkę z kolekcją elementów. Elementy mogą zawierać tylko tekst lub obrazy. W przypadku kolumn elastycznych lub gdy chcesz dodać coś więcej niż tekst lub obrazy, użyj elementu Columns. Przykład w aplikacjach Google Chat znajdziesz w artykule Wyświetlanie siatki z kolekcją elementów.

Siatka obsługuje dowolną liczbę kolumn i elementów. Liczba wierszy jest określana przez liczbę elementów podzieloną przez liczbę kolumn. Siatka z 10 elementami i 2 kolumnami ma 5 wierszy. Siatka z 11 elementami i 2 kolumnami ma 6 wierszy.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Na przykład ten kod JSON tworzy siatkę z 2 kolumnami i 1 elementem: 

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
Zapis JSON 
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
Pola
title

string

Tekst wyświetlany w nagłówku siatki.

items[]

object (GridItem)

Elementy do wyświetlenia w siatce.

borderStyle

object (BorderStyle)

Styl obramowania, który ma być stosowany do każdego elementu siatki.

columnCount

integer

Liczba kolumn do wyświetlenia w siatce. Jeśli to pole nie jest określone, używana jest wartość domyślna, która różni się w zależności od tego, gdzie wyświetlana jest siatka (w oknie czy w reklamie towarzyszącej).

onClick

object (OnClick)

Ten wywołanie zwrotne jest używane ponownie przez każdy element siatki, ale do jego parametrów dodawane są identyfikator elementu i jego indeks na liście elementów.

GridItem

Reprezentuje element w układzie siatki. Elementy mogą zawierać tekst, obraz lub tekst i obraz.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
Pola
id

string

Identyfikator tego elementu siatki określony przez użytkownika. Ten identyfikator jest zwracany w parametrach wywołania zwrotnego onClick nadrzędnej siatki.

image

object (ImageComponent)

Obraz wyświetlany w elemencie siatki.

title

string

Tytuł elementu siatki.

subtitle

string

Podtytuł elementu siatki.

layout

enum (GridItemLayout)

Układ, który ma być używany w przypadku elementu siatki.

ImageComponent

Reprezentuje obraz.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "imageUri": string,
  "altText": string,
  "cropStyle": {
    object (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
Pola
imageUri

string

Adres URL obrazu.

altText

string

Etykieta ułatwień dostępu do obrazu.

cropStyle

object (ImageCropStyle)

Styl przycinania, który ma zostać zastosowany do obrazu.

borderStyle

object (BorderStyle)

Styl obramowania, który ma zostać zastosowany do obrazu.

ImageCropStyle

Określa styl przycinania zastosowany do obrazu.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Oto przykład zastosowania współczynnika proporcji 16:9: 

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
Zapis JSON 
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
Pola
type

enum (ImageCropType)

Typ przycięcia.

aspectRatio

number

Współczynnik proporcji, który ma być używany, jeśli typ przycięcia to RECTANGLE_CUSTOM.

Oto przykład zastosowania współczynnika proporcji 16:9: 

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

ImageCropType

Określa styl przycinania zastosowany do obrazu.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Wartości w polu enum
IMAGE_CROP_TYPE_UNSPECIFIED Nie używaj. Nie określono.
SQUARE Wartość domyślna. Stosuje kwadratowe przycięcie.
CIRCLE Stosuje przycięcie do koła.
RECTANGLE_CUSTOM Stosuje prostokątne przycięcie o niestandardowym formacie. Ustaw niestandardowy format obrazu za pomocą aspectRatio.
RECTANGLE_4_3 Stosuje prostokątne przycięcie o formacie 4:3.

BorderStyle

Opcje stylu obramowania karty lub widżetu, w tym typ i kolor obramowania.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
Pola
type

enum (BorderType)

Typ obramowania.

strokeColor

object (Color)

Kolory, które mają być używane, gdy typ to BORDER_TYPE_STROKE.

Aby ustawić kolor obrysu, określ wartość w polach red, green i blue. Wartość musi być liczbą zmiennoprzecinkową z zakresu od 0 do 1 na podstawie wartości koloru RGB, gdzie 0 (0/255) oznacza brak koloru, a 1 (255/255) oznacza maksymalne natężenie koloru.

Na przykład poniższy kod ustawia kolor czerwony o maksymalnej intensywności: 

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
}

Pole alpha jest niedostępne w przypadku koloru obrysu. Jeśli to pole zostanie podane, będzie ignorowane.

cornerRadius

integer

Promień narożnika obramowania.

BorderType

Reprezentuje typy obramowań zastosowane do widżetów.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Wartości w polu enum
BORDER_TYPE_UNSPECIFIED Nie używaj. Nie określono.
NO_BORDER Bez obramowania.
STROKE Wartość domyślna. Outline.

GridItemLayout

Reprezentuje różne opcje układu dostępne dla elementu siatki.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Wartości w polu enum
GRID_ITEM_LAYOUT_UNSPECIFIED Nie używaj. Nie określono.
TEXT_BELOW Tytuł i podtytuł są wyświetlane pod obrazem elementu siatki.
TEXT_ABOVE Tytuł i podtytuł są wyświetlane nad obrazem elementu siatki.

Kolumny

WidżetColumnswyświetla maksymalnie 2 kolumny na karcie lub w oknie. Do każdej kolumny możesz dodać widżety. Będą się one wyświetlać w kolejności, w jakiej zostały określone. Przykład w aplikacjach Google Chat znajdziesz w artykule Wyświetlanie kart i okien w kolumnach.

Wysokość każdej kolumny jest określana przez wyższą kolumnę. Jeśli na przykład pierwsza kolumna jest wyższa od drugiej, obie kolumny mają wysokość pierwszej kolumny. Każda kolumna może zawierać inną liczbę widżetów, więc nie możesz definiować wierszy ani wyrównywać widżetów między kolumnami.

Kolumny są wyświetlane obok siebie. Szerokość każdej kolumny możesz dostosować za pomocą pola HorizontalSizeStyle. Jeśli szerokość ekranu użytkownika jest zbyt mała, druga kolumna zostanie przeniesiona pod pierwszą:

  • W internecie druga kolumna zawija się, jeśli szerokość ekranu jest mniejsza lub równa 480 pikseli.
  • Na urządzeniach z iOS druga kolumna jest zawijana, jeśli szerokość ekranu jest mniejsza lub równa 300 pt.
  • Na urządzeniach z Androidem druga kolumna jest zawijana, jeśli szerokość ekranu jest mniejsza lub równa 320 dp.

Aby uwzględnić więcej niż 2 kolumny lub użyć wierszy, użyj widżetu Grid.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace. Interfejsy dodatku, które obsługują kolumny:

  • Okno wyświetlane, gdy użytkownicy otwierają dodatek z poziomu wersji roboczej e-maila.
  • Okienko wyświetlane, gdy użytkownicy otwierają dodatek z menu Dodaj załącznik w wydarzeniu w Kalendarzu Google.
Zapis JSON 
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
Pola
columnItems[]

object (Column)

Tablica kolumn. Karta lub okno może zawierać maksymalnie 2 kolumny.

Kolumna

kolumna.

Dodatki do Google Workspace i aplikacje do Google Chat

Zapis JSON 
{
  "horizontalSizeStyle": enum (HorizontalSizeStyle),
  "horizontalAlignment": enum (HorizontalAlignment),
  "verticalAlignment": enum (VerticalAlignment),
  "widgets": [
    {
      object (Widgets)
    }
  ]
}
Pola
horizontalSizeStyle

enum (HorizontalSizeStyle)

Określa, jak kolumna wypełnia szerokość karty.

horizontalAlignment

enum (HorizontalAlignment)

Określa, czy widżety mają być wyrównane do lewej, prawej czy środka kolumny.

verticalAlignment

enum (VerticalAlignment)

Określa, czy widżety są wyrównane do góry, do dołu czy do środka kolumny.

widgets[]

object (Widgets)

Tablica widżetów zawartych w kolumnie. Widżety są wyświetlane w kolejności, w jakiej zostały określone.

HorizontalSizeStyle

Określa, jak kolumna wypełnia szerokość karty. Szerokość każdej kolumny zależy zarówno od HorizontalSizeStyle , jak i od szerokości widżetów w kolumnie.

Dodatki do Google Workspace i aplikacje do Google Chat

Wartości w polu enum
HORIZONTAL_SIZE_STYLE_UNSPECIFIED Nie używaj. Nie określono.
FILL_AVAILABLE_SPACE Wartość domyślna. Kolumna wypełnia dostępne miejsce, do 70% szerokości karty. Jeśli obie kolumny mają ustawioną wartośćFILL_AVAILABLE_SPACE, każda z nich zajmuje 50% miejsca.
FILL_MINIMUM_SPACE Kolumna zajmuje jak najmniej miejsca, ale nie więcej niż 30% szerokości karty.

HorizontalAlignment

Określa, czy widżety mają być wyrównane do lewej, prawej czy środka kolumny.

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Wartości w polu enum
HORIZONTAL_ALIGNMENT_UNSPECIFIED Nie używaj. Nie określono.
START Wartość domyślna. Wyrównuje widżety do pozycji początkowej kolumny. W przypadku układów od lewej do prawej wyrównuje do lewej. W przypadku układów od prawej do lewej wyrównuje do prawej.
CENTER Wyrównuje widżety do środka kolumny.
END Wyrównuje widżety do pozycji końcowej kolumny. W przypadku układów od lewej do prawej wyrównuje widżety do prawej strony. W przypadku układów od prawej do lewej wyrównuje widżety do lewej.

VerticalAlignment

Określa, czy widżety są wyrównane do góry, do dołu czy do środka kolumny.

Dodatki do Google Workspace i aplikacje do Google Chat

Wartości w polu enum
VERTICAL_ALIGNMENT_UNSPECIFIED Nie używaj. Nie określono.
CENTER Wartość domyślna. Wyrównuje widżety do środka kolumny.
TOP Wyrównuje widżety do góry kolumny.
BOTTOM Wyrównuje widżety do dołu kolumny.

Widżety

Obsługiwane widżety, które możesz umieścić w kolumnie.

Dodatki do Google Workspace i aplikacje do Google Chat

Zapis JSON 
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
Pola

Pole uniidata.

data może mieć tylko jedną z tych wartości:

textParagraph

object (TextParagraph)

TextParagraph widżet.

image

object (Image)

Image widżet.

decoratedText

object (DecoratedText)

DecoratedText widżet.

buttonList

object (ButtonList)

ButtonList widżet.

textInput

object (TextInput)

TextInput widżet.

selectionInput

object (SelectionInput)

SelectionInput widżet.

dateTimePicker

object (DateTimePicker)

DateTimePicker widżet.

chipList

object (ChipList)

ChipList widżet.

ChipList

Lista elementów ułożonych poziomo, które można przewijać w poziomie lub zawijać do następnego wiersza.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "layout": enum (Layout),
  "chips": [
    {
      object (Chip)
    }
  ]
}
Pola
layout

enum (Layout)

Określony układ listy elementów.

chips[]

object (Chip)

Tablica układów.

Układ

Układ listy elementów.

Wartości w polu enum
LAYOUT_UNSPECIFIED Nie używaj. Nie określono.
WRAPPED Wartość domyślna. Jeśli nie ma wystarczająco dużo miejsca w poziomie, lista elementów przenosi się do następnego wiersza.
HORIZONTAL_SCROLLABLE Jeśli nie mieszczą się w dostępnym miejscu, przewijają się w poziomie.

Układ scalony

Tekst, ikona lub element z tekstem i ikoną, który użytkownicy mogą kliknąć.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "icon": {
    object (Icon)
  },
  "label": string,
  "onClick": {
    object (OnClick)
  },
  "enabled": boolean,
  "disabled": boolean,
  "altText": string
}
Pola
icon

object (Icon)

Obraz ikony. Jeśli ustawisz zarówno parametr icon, jak i text, ikona będzie się wyświetlać przed tekstem.

label

string

Tekst wyświetlany w kapsule.

onClick

object (OnClick)

Opcjonalnie. Działanie, które ma zostać wykonane, gdy użytkownik kliknie element, np. otwarcie hiperlinku lub uruchomienie funkcji niestandardowej.

enabled
(deprecated)

boolean

Określa, czy element jest aktywny i reaguje na działania użytkownika. Domyślna wartość to true. Rola wycofana. Zamiast tego użyj disabled.

disabled

boolean

Określa, czy element jest nieaktywny i ignoruje działania użytkownika. Domyślna wartość to false.

altText

string

Tekst alternatywny używany na potrzeby ułatwień dostępu.

Ustaw tekst opisowy, który informuje użytkowników o tym, do czego służy element. Jeśli na przykład kliknięcie elementu otwiera hiperlink, napisz: „Otwiera nową kartę przeglądarki i przekierowuje do dokumentacji dla programistów Google Chat na stronie https://developers.google.com/workspace/chat"”.

Karuzela, zwana też suwakiem, obraca się i wyświetla listę widżetów w formacie pokazu slajdów. Przyciski umożliwiają przejście do poprzedniego lub następnego widżetu.

Oto na przykład reprezentacja JSON karuzeli zawierającej 3 widżety z akapitami tekstu. 

{
  "carouselCards": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "First text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Second text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Third text paragraph in carousel",
          }
        }
      ]
    }
  ]
}

Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Zapis JSON 
{
  "carouselCards": [
    {
      object (CarouselCard)
    }
  ]
}
Pola
carouselCards[]

object (CarouselCard)

Lista kart w karuzeli.

CarouselCard

Karta, która może być wyświetlana jako element karuzeli. Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Zapis JSON 
{
  "widgets": [
    {
      object (NestedWidget)
    }
  ],
  "footerWidgets": [
    {
      object (NestedWidget)
    }
  ]
}
Pola
widgets[]

object (NestedWidget)

Lista widżetów wyświetlanych na karcie karuzeli. Widżety są wyświetlane w kolejności, w jakiej zostały określone.

footerWidgets[]

object (NestedWidget)

Lista widżetów wyświetlana u dołu karty karuzeli. Widżety są wyświetlane w kolejności, w jakiej zostały określone.

NestedWidget

Lista widżetów, które można wyświetlać w układzie kontenera, np. CarouselCard. Dostępne w aplikacjach Google Chat, ale niedostępne w dodatkach do Google Workspace.

Zapis JSON 
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "buttonList": {
    object (ButtonList)
  },
  "image": {
    object (Image)
  }
  // End of list of possible types for union field data.
}
Pola

Pole uniidata.

data może mieć tylko jedną z tych wartości:

textParagraph

object (TextParagraph)

Widżet akapitu tekstu.

buttonList

object (ButtonList)

Widżet listy przycisków.

image

object (Image)

Widżet obrazu.

CollapseControl

Reprezentuje element sterujący rozwijaniem i zwijaniem.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "horizontalAlignment": enum (HorizontalAlignment),
  "expandButton": {
    object (Button)
  },
  "collapseButton": {
    object (Button)
  }
}
Pola
horizontalAlignment

enum (HorizontalAlignment)

Poziome wyrównanie przycisku rozwijania i zwijania.

expandButton

object (Button)

Opcjonalnie. Zdefiniuj konfigurowalny przycisk, aby rozwinąć sekcję. Musisz ustawić pola expandButton i collapseButton. Tylko 1 zestaw pól nie będzie miał wpływu. Jeśli to pole nie jest skonfigurowane, używany jest przycisk domyślny.

collapseButton

object (Button)

Opcjonalnie. Zdefiniuj konfigurowalny przycisk, aby zwinąć sekcję. Musisz ustawić pola expandButton i collapseButton. Tylko 1 zestaw pól nie będzie miał wpływu. Jeśli to pole nie jest skonfigurowane, używany jest przycisk domyślny.

DividerStyle

Styl separatora karty. Obecnie używany tylko w przypadku separatorów między sekcjami kart.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Wartości w polu enum
DIVIDER_STYLE_UNSPECIFIED Nie używaj. Nie określono.
SOLID_DIVIDER Opcja domyślna. Wyświetl stały separator.
NO_DIVIDER Jeśli jest ustawiona, nie jest renderowany żaden separator. Ten styl całkowicie usuwa separator z układu. Efekt jest taki sam jak w przypadku braku separatora.

CardAction

Działanie karty to działanie powiązane z kartą. Na przykład karta faktury może zawierać działania takie jak usunięcie faktury, wysłanie jej e-mailem lub otwarcie w przeglądarce.

Dostępne w przypadku dodatków do Google Workspace, ale niedostępne w przypadku aplikacji Google Chat.

Zapis JSON 
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
Pola
actionLabel

string

Etykieta, która wyświetla się jako element menu działania.

onClick

object (OnClick)

onClick działanie związane z tym elementem.

CardFixedFooter

Trwały (przyklejony) stopka, która pojawia się u dołu karty.

Ustawienie fixedFooter bez określania primaryButton lub secondaryButton powoduje błąd.

W przypadku aplikacji do obsługi czatu możesz używać stałych stopek w oknach, ale nie w wiadomościach z kartami. Przykład w aplikacjach Google Chat znajdziesz w artykule Dodawanie trwałego stopki.

Dostępne w aplikacjach Google Chat i dodatkach do Google Workspace.

Zapis JSON 
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
Pola
primaryButton

object (Button)

Główny przycisk stałej stopki. Przycisk musi być przyciskiem tekstowym z ustawionym tekstem i kolorem.

secondaryButton

object (Button)

Przycisk dodatkowy w stałej stopce. Przycisk musi być przyciskiem tekstowym z ustawionym tekstem i kolorem. Jeśli ustawisz secondaryButton, musisz też ustawić primaryButton.

DisplayStyle

W dodatkach do Google Workspace określa sposób wyświetlania karty.

Dostępne w przypadku dodatków do Google Workspace, ale niedostępne w przypadku aplikacji Google Chat.

Wartości w polu enum
DISPLAY_STYLE_UNSPECIFIED Nie używaj. Nie określono.
PEEK Nagłówek karty pojawia się u dołu paska bocznego, częściowo zasłaniając bieżącą kartę na górze stosu. Kliknięcie nagłówka powoduje przeniesienie karty na stos kart. Jeśli karta nie ma nagłówka, użyjemy wygenerowanego nagłówka.
REPLACE Wartość domyślna. Karta jest wyświetlana przez zastąpienie widoku górnej karty w stosie kart.