Package google.apps.card.v1

Indeks

Działanie

Działanie opisujące zachowanie po przesłaniu formularza. Możesz na przykład wywołać skrypt Apps Script do obsługi formularza. W przypadku wywołania działania wartości formularza są przesyłane na serwer.

Pola
function

string

Funkcja niestandardowa wywoływana po kliknięciu elementu zawierającego nazwę lub po jego włączeniu.

Przykład wykorzystania znajdziesz w artykule Tworzenie kart interaktywnych.
parameters[]

ActionParameter

Lista parametrów działań.
loadIndicator

LoadIndicator

Określa wskaźnik wczytywania, który wyświetla się podczas wywoływania działania.
persistValues

bool

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

Jeśli ustawiona jest wartość true, wartości formularza pozostają po wywołaniu działania. Aby umożliwić użytkownikowi wprowadzanie zmian podczas przetwarzania działania, ustaw opcję LoadIndicator na NONE. W przypadku kart w aplikacjach do obsługi czatu musisz też ustawić wartość ResponseType działania na UPDATE_MESSAGE i użyć tego samego elementu card_id na karcie, która go zawierała.

Jeśli ustawiona jest wartość false, wartości formularza są czyszczone po uruchomieniu działania. Aby uniemożliwić użytkownikowi wprowadzanie zmian podczas przetwarzania działania, ustaw opcję LoadIndicator na SPINNER.
interaction

Interaction

Opcjonalnie. Wymagane przy otwieraniu okna.

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

Jeśli nie określono inaczej, aplikacja odpowiada, wykonując action (np. otwierając link lub uruchamiając funkcję) w zwykły sposób.

Dzięki określeniu właściwości interaction aplikacja może reagować w specjalny, interaktywny sposób. Na przykład ustawienie wartości OPEN_DIALOG w polu interaction spowoduje, że aplikacja będzie mogła otworzyć okno. Jeśli jest określony, wskaźnik wczytywania się nie wyświetla.

Jest obsługiwane przez aplikacje do obsługi czatu, ale nie przez dodatki do Google Workspace. Jeśli określisz, że to dodatek, karta zostanie usunięta w całości i nic nie będzie wyświetlane w kliencie.

Parametr ActionParametr

Lista parametrów ciągów tekstowych, które należy dostarczyć po wywołaniu metody działania. Dostępne są na przykład trzy przyciski drzemki: Odłóż teraz, Odłóż na jeden dzień lub Drzemka w kolejnym tygodniu. Możesz użyć funkcji action method = snooze(), która przekazuje typ drzemki i czas drzemki na liście parametrów ciągu znaków.

Więcej informacji: CommonEventObject.

Pola
key

string

Nazwa parametru skryptu działania.
value

string

Wartość parametru.

Interakcja

Opcjonalnie. Wymagane przy otwieraniu okna.

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

Jeśli nie określono inaczej, aplikacja odpowiada, wykonując action (np. otwierając link lub uruchamiając funkcję) w zwykły sposób.

Dzięki określeniu właściwości interaction aplikacja może reagować w specjalny, interaktywny sposób. Na przykład ustawienie wartości OPEN_DIALOG w polu interaction spowoduje, że aplikacja będzie mogła otworzyć okno.

Jeśli jest określony, wskaźnik wczytywania się nie wyświetla.

Jest obsługiwane przez aplikacje do obsługi czatu, ale nie przez dodatki do Google Workspace. Jeśli określisz, że to dodatek, karta zostanie usunięta w całości i nic nie będzie wyświetlane w kliencie.

Wartości w polu enum
INTERACTION_UNSPECIFIED Wartość domyślna. Polecenie action działa w zwykły sposób.
OPEN_DIALOG

Otwiera okno, czyli interfejs z kartami, w których aplikacje do obsługi czatu kontaktują się z użytkownikami.

Obsługiwane tylko przez aplikacje do obsługi czatu w odpowiedzi na kliknięcia przycisków w wiadomościach z kartą.

Nieobsługiwane przez dodatki do Google Workspace. Jeśli określisz, że to dodatek, karta zostanie usunięta w całości i nic nie będzie wyświetlane w kliencie.

Wskaźnik wczytywania

Określa wskaźnik wczytywania, który wyświetla się podczas wywoływania działania.

Wartości w polu enum
SPINNER Wskaźnik postępu ładowania treści.
NONE Nic nie jest wyświetlane.

Styl obramowania

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

Pola
type

BorderType

Typ obramowania.
strokeColor

Color

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

int32

Promień narożnika obramowania.

Typ obramowania

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

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

Przycisk

Przycisk z tekstem, ikoną lub tekstem i ikoną, który użytkownicy mogą kliknąć. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Lista przycisków.

Aby ustawić obraz jako klikalny przycisk, określ właściwość Image (nie ImageComponent) i ustaw działanie onClick.

Pola
text

string

Tekst wyświetlany na przycisku.
icon

Icon

Obraz ikony. Jeśli ustawiono zarówno icon, jak i text, ikona pojawi się przed tekstem.
color

Color

Jeśli zasada jest skonfigurowana, przycisk jest wypełniany jednolitym kolorem tła, a kolor czcionki zmienia się, aby zachować kontrast z tłem. Na przykład jeśli ustawisz niebieskie tło, prawdopodobnie uzyskasz biały tekst.

Jeśli zasada jest nieskonfigurowana, tło obrazu jest białe, a czcionka jest niebieska.

W przypadku czerwonego, zielonego i niebieskiego wartość każdego pola jest liczbą float, którą można wyrazić na jeden z dwóch sposobów: jako liczbę od 0 do 255 podzieloną przez 255 (153/255) lub jako wartość z zakresu od 0 do 1 (0,6). 0 oznacza brak koloru, a 1 lub 255/255 oznacza pełną obecność tego koloru na skali RGB.

Opcjonalnie ustaw wartość alpha, która ustawia poziom przezroczystości za pomocą tego równania:

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

W przypadku alpha wartość 1 odpowiada jednolitego koloru, a wartość 0 – całkowicie przezroczystemu.

Na przykład ten kolor oznacza półprzezroczystą czerwień:

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

OnClick

Wymagany. Działanie, jakie ma zostać wykonane po kliknięciu przycisku przez użytkownika, na przykład otwarcie hiperlinku lub uruchomienie funkcji niestandardowej.
disabled

bool

Jeśli ustawiona jest wartość true, przycisk jest nieaktywny i nie reaguje na działania użytkownika.
altText

string

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

Ustaw opis, który poinformuje użytkowników, do czego służy dany przycisk. 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 https://developers.google.com/chat”.

Lista przycisków

Lista przycisków ułożonych w poziomie. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Lista przycisków.

Pola
buttons[]

Button

Tablica przycisków.

Karta

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

Karty obsługują zdefiniowany układ, interaktywne elementy interfejsu (np. przyciski) oraz multimedia (np. obrazy). Korzystaj z kart, aby prezentować szczegółowe informacje, zbierać informacje od użytkowników i pomagać im zrobić kolejny krok.

Instrukcje tworzenia kart znajdziesz w tej dokumentacji:

Przykład: wiadomość z kartą w aplikacji Google Chat

Przykładowa wizytówka

Aby utworzyć przykładową wiadomość karty 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/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",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
Pola
header

CardHeader

Nagłówek karty. Nagłówek zwykle zawiera obraz na początku i tytuł. Nagłówki są zawsze wyświetlane u góry karty.
sections[]

Section

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

DividerStyle

Styl separatora między sekcjami.
cardActions[]

CardAction

Działania na karcie. Działania są dodawane do menu karty na pasku narzędzi.

Karty aplikacji do obsługi czatu nie mają paska narzędzi, więc cardActions[] nie jest obsługiwany przez aplikacje do obsługi czatu.

Na przykład ten kod JSON tworzy menu działań karty 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 podczas nawigacji po kartach.

Aplikacje do obsługi czatu nie obsługują nawigacji po kartach, dlatego ignorują to pole.
fixedFooter

CardFixedFooter

Stała stopka wyświetlana u dołu tej karty.

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

Obsługiwane przez dodatki do Google Workspace i aplikacje do obsługi czatu. W przypadku aplikacji do obsługi czatu możesz używać stałych stopek w oknach dialogowych, ale nie w wiadomościach z kartami.
displayStyle

DisplayStyle

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

Nieobsługiwane przez aplikacje do obsługi czatu.
peekCardHeader

CardHeader

Podczas wyświetlania treści kontekstowych nagłówek karty szybkiego dostępu pełni funkcję obiektu zastępczego, dzięki czemu użytkownik może przechodzić między kartami na stronie głównej i kartami kontekstowymi.

Nieobsługiwane przez aplikacje do obsługi czatu.

CardAction

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

Nieobsługiwane przez aplikacje do obsługi czatu.

Pola
actionLabel

string

Etykieta wyświetlana jako pozycja menu czynności.
onClick

OnClick

Działanie onClick dla tego działania.

CardFixedStopka

Trwała (przyklejona) stopka wyświetlana u dołu karty. Instrukcje dotyczące aplikacji Google Chat znajdziesz w artykule Stopka karty.

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

Obsługiwane przez dodatki do Google Workspace i aplikacje do obsługi czatu. W przypadku aplikacji do obsługi czatu możesz używać stałych stopek w oknach dialogowych, ale nie w wiadomościach z kartami.

Pola
primaryButton

Button

Przycisk główny stałej stopki. Musi to być przycisk tekstowy z ustawionym tekstem i kolorami.
secondaryButton

Button

Przycisk dodatkowy stałej stopki. Musi to być przycisk tekstowy z ustawionym tekstem i kolorami. Jeśli ustawiono secondaryButton, musisz też ustawić primaryButton.

Nagłówek karty

Reprezentuje nagłówek karty. Przykład w aplikacjach Google Chat znajdziesz w sekcji Nagłówek karty.

Pola
title

string

Wymagany. Tytuł nagłówka karty. Nagłówek ma stałą wysokość: jeśli określono zarówno tytuł, jak i podtytuł, zajmują po 1 wierszu. Jeśli określisz tylko tytuł, element zajmuje oba wiersze.
subtitle

string

Podtytuł karty. Jeśli podasz wartość, pojawi się w osobnym wierszu pod title.
imageType

ImageType

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

string

Adres URL HTTPS obrazu w nagłówku karty.
imageAltText

string

Tekst zastępczy tego obrazu, który jest używany na potrzeby ułatwień dostępu.

Styl wyświetlania

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

Nieobsługiwane przez aplikacje do obsługi czatu.

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ą górną kartę stosu. Kliknięcie nagłówka spowoduje umieszczenie karty w stosie kart. Jeśli karta nie ma nagłówka, zamiast niego używany jest wygenerowany nagłówek.
REPLACE Wartość domyślna. Karta wyświetla się po zastąpieniu widoku górnej karty w stosie kart.

Styl podziału

Styl separatora karty. Obecnie używany tylko do rozdzielania sekcji kart.

Wartości w polu enum
DIVIDER_STYLE_UNSPECIFIED Nie używaj. Nie określono.
SOLID_DIVIDER Opcja domyślna. Wyznacz jednolity separator między sekcjami.
NO_DIVIDER Jeśli zasada jest skonfigurowana, separatory między sekcjami nie są renderowane.

Sekcja

Sekcja zawiera zbiór widżetów, które są renderowane pionowo w określonej kolejności.

Pola
header

string

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

Widget

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

bool

Wskazuje, czy tę sekcję można zwijać.

Sekcje zwijane ukrywają niektóre lub wszystkie widżety, ale użytkownicy mogą je rozwinąć, aby zobaczyć 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, wybierz uncollapsibleWidgetsCount.
uncollapsibleWidgetsCount

int32

Liczba widżetów, których nie można zwijać, które pozostają widoczne nawet po zwinięciu sekcji.

Jeśli na przykład sekcja zawiera 5 widżet, a uncollapsibleWidgetsCount ma wartość 2, pierwsze 2 widżety są zawsze wyświetlane, a 3 ostatnie są domyślnie zwinięte. Pole uncollapsibleWidgetsCount jest uwzględniane tylko wtedy, gdy collapsible ma wartość true.

Kolumny

Widżet Columns wyświetla maksymalnie 2 kolumny w komunikacie na karcie lub oknie. Do każdej kolumny możesz dodawać widżety. Widżety wyświetlają się w określonej kolejności. Przykład dotyczący aplikacji Google Chat znajdziesz w artykule Kolumny.

Wysokość każdej kolumny jest określana na podstawie wyższej kolumny. Jeśli np. pierwsza kolumna jest wyższa od drugiej, obie kolumny mają wysokość pierwszej kolumny. Każda kolumna może zawierać różną 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. W polu HorizontalSizeStyle możesz dostosować szerokość każdej kolumny. Jeśli szerokość ekranu użytkownika jest zbyt mała, druga kolumna zawija się poniżej pierwszej:

  • Na stronach internetowych druga kolumna zawija się, gdy szerokość ekranu jest mniejsza lub równa 480 pikseli.
  • Na urządzeniach z iOS druga kolumna zawija się, gdy szerokość ekranu nie przekracza 300 punktów.
  • Na urządzeniach z Androidem druga kolumna zawija się, gdy 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.

Jest obsługiwane przez aplikacje do obsługi czatu, ale nie przez dodatki do Google Workspace.

Pola
columnItems[]

Column

Tablica kolumn. Na karcie lub w oknie możesz umieścić maksymalnie 2 kolumny.

Kolumna

Kolumna.

Pola
horizontalSizeStyle

HorizontalSizeStyle

Określa sposób wypełniania kolumny na szerokość karty.
horizontalAlignment

HorizontalAlignment

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

VerticalAlignment

Określa, czy widżety mają być wyrównywane u góry, na dole czy do środka kolumny.
widgets[]

Widgets

Tablica widżetów w kolumnie. Widżety są wyświetlane w określonej kolejności.

Styl rozmiaru poziomego

Określa sposób wypełniania kolumny na szerokość karty. Szerokość każdej kolumny zależy od szerokości HorizontalSizeStyle i szerokości widżetów w kolumnie.

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ępną przestrzeń, maksymalnie 70% szerokości karty. Jeśli obie kolumny mają wartość FILL_AVAILABLE_SPACE, każda z nich zajmuje 50% miejsca.
FILL_MINIMUM_SPACE Kolumna wypełnia najmniejszą możliwą ilość miejsca i nie może przekraczać 30% szerokości karty.

Wyrównanie w pionie

Określa, czy widżety mają być wyrównywane u góry, na dole czy do środka kolumny.

Wartości w polu enum
VERTICAL_ALIGNMENT_UNSPECIFIED Nie używaj. Nie określono.
CENTER Wartość domyślna. Wyrównuje widżety względem ś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 uwzględnić w kolumnie.

Pola

Pole Unii data.

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

TextParagraph

Widżet TextParagraph.
image

Image

Widżet Image.
decoratedText

DecoratedText

Widżet DecoratedText.
buttonList

ButtonList

Widżet ButtonList.
textInput

TextInput

Widżet TextInput.
selectionInput

SelectionInput

Widżet SelectionInput.
dateTimePicker

DateTimePicker

Widżet DateTimePicker.

DateTimePicker

Umożliwia użytkownikom wpisywanie daty, godziny lub zarówno daty, jak i godziny. Przykład dotyczący aplikacji Google Chat znajdziesz w artykule Selektor daty i godziny.

Użytkownicy mogą wprowadzić tekst lub wybrać datę i godzinę przy użyciu selektora. Jeśli użytkownik wprowadzi nieprawidłową datę lub godzinę, selektor wyświetli komunikat o błędzie i wyświetli prośbę o poprawne wpisanie informacji.

Pola
name

string

Nazwa, dzięki której element DateTimePicker jest identyfikowany w zdarzeniu danych wejściowych formularza.

Szczegółowe informacje o pracy z danymi wpisywanymi w formularzach znajdziesz w artykule Odbieranie danych z formularzy.
label

string

Tekst zachęcający użytkowników do wpisania daty, godziny lub daty i godziny. Jeśli na przykład użytkownicy planują spotkanie, użyj etykiety Appointment date lub Appointment date and time.
type

DateTimePickerType

Określa, czy widżet obsługuje wpisywanie daty, godziny czy daty i godziny.
valueMsEpoch

int64

Wartość domyślna wyświetlana w widżecie w milisekundach od czasu uniksowego.

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

  • DATE_AND_TIME: data i godzina kalendarzowa w strefie czasowej UTC. Na przykład aby oznaczyć datę 1 stycznia 2023 r. o 12:00 czasu UTC, użyj 1672574400000.
  • DATE_ONLY: data kalendarzowa o godzinie 00:00:00 czasu UTC. Na przykład do oznaczenia 1 stycznia 2023 r. użyj 1672531200000.
  • TIME_ONLY: godzina w strefie czasowej UTC. Na przykład, aby pokazać godzinę 12:00, użyj 43200000 (lub 12 * 60 * 60 * 1000).
timezoneOffsetDate

int32

Liczba określająca przesunięcie strefy czasowej względem UTC (w minutach). Jeśli zasada jest skonfigurowana, value_ms_epoch wyświetla się w określonej strefie czasowej. Jeśli zasada jest nieskonfigurowana, wartością domyślną jest strefa czasowa użytkownika.
onChangeAction

Action

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

Typ elementu DateTimePicker

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

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ę.

Tekst Dekorowany

Widżet wyświetlający tekst z opcjonalnymi dekoracjami, takimi jak etykieta nad lub pod tekstem, ikona przed tekstem, widżet wyboru czy przycisk po tekście. Przykład dotyczący aplikacji Google Chat znajdziesz w artykule Dekorowany tekst.

Pola
icon
(deprecated)

Icon

Wycofane na rzecz startIcon.
startIcon

Icon

Ikona wyświetlana przed tekstem.
topLabel

string

Tekst widoczny nad pozycją text. Zawsze skraca tekst.
text

string

Wymagany. 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 dodatków do Google Workspace.
wrapText

bool

Ustawienie zawijania tekstu. Jeśli ustawiona jest wartość true, tekst zawija się i wyświetla się w wielu wierszach. W przeciwnym razie tekst zostanie obcięty.

Dotyczy tylko domeny text, a nie topLabel i bottomLabel.
bottomLabel

string

Tekst widoczny pod nagłówkiem text. Zawsze zawija się.
onClick

OnClick

To działanie jest wywoływane, gdy użytkownik kliknie topLabel lub bottomLabel.
Pole Unii control. Przycisk, przełącznik, pole wyboru lub obraz wyświetlane po prawej stronie tekstu w widżecie decoratedText. control może mieć tylko jedną z tych wartości:
button

Button

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

SwitchControl

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

Icon

Ikona wyświetlana pod tekstem.

Obsługuje ikony wbudowane i niestandardowe.

SwitchControl

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

Obsługiwane tylko w widżecie decoratedText.

Pola
name

string

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

Szczegółowe informacje o pracy z danymi wpisywanymi w formularzach znajdziesz w artykule Odbieranie danych z formularzy.
value

string

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

Szczegółowe informacje o pracy z danymi wpisywanymi w formularzach znajdziesz w artykule Odbieranie danych z formularzy.
selected

bool

Jeśli wybrano opcję true, przełącznik jest wybrany.
onChangeAction

Action

Działanie wykonywane po zmianie stanu przełącznika – na przykład wybór funkcji, która ma zostać uruchomiona.
controlType

ControlType

Wygląd przełącznika w interfejsie.

Typ elementu sterującego

Wygląd przełącznika w interfejsie.

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

Separator

Ten typ nie ma żadnych pól.

Wyświetla separację między widżetami w postaci linii poziomej. Przykład dotyczący aplikacji Google Chat znajdziesz w artykule Rozgraniczenie.

Na przykład taki kod JSON tworzy separator:

"divider": {}

Pobranie odpowiedzi autouzupełniania

Odpowiedź na pobieranie kontenera autouzupełniania, który zawiera elementy niezbędne do wyświetlania elementów autouzupełniania w polu tekstowym. Na przykład:

{
  "autoComplete": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
Pola
autoComplete

Suggestions
schema

string

To jest pole schematu bez operacji, które może znajdować się w znacznikach na potrzeby sprawdzania składni.

Siatka

Wyświetla siatkę z kolekcją elementów. Elementy mogą zawierać tylko tekst lub obrazy. Jeśli chcesz dodać kolumnę elastyczną lub dodać coś więcej niż tekst lub obrazy, użyj funkcji Columns. Przykład dotyczący aplikacji do obsługi Google Chat znajdziesz w artykule Siatka.

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

Na przykład ten kod JSON tworzy siatkę z 2 kolumnami z 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"
    }
  }
}
Pola
title

string

Tekst wyświetlany w nagłówku siatki.
items[]

GridItem

Elementy do wyświetlenia w siatce.
borderStyle

BorderStyle

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

int32

Liczba kolumn wyświetlanych w siatce. Jeśli to pole nie zostanie określone, zostanie użyta wartość domyślna, a wartość ta będzie różna w zależności od miejsca, w którym wyświetlana jest siatka (okno dialogowe lub towarzyszące).
onClick

OnClick

To wywołanie zwrotne jest używane ponownie przez poszczególne elementy siatki, ale z identyfikatorem i indeksem elementu na liście elementów dodanymi do parametrów wywołania zwrotnego.

Element siatki

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

Pola
id

string

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

ImageComponent

Obraz wyświetlany w elemencie siatki.
title

string

Tytuł elementu siatki.
subtitle

string

Podtytuł elementu siatki.
layout

GridItemLayout

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

Układ elementu siatki

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

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.

Ikona

Ikona wyświetlana w widżecie na karcie. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Ikona.

Obsługuje ikony wbudowane i niestandardowe.

Pola
altText

string

Opcjonalnie. Opis ikony używanej na potrzeby ułatwień dostępu. Jeśli nie określono inaczej, podawana jest wartość domyślna Button. Warto dodać przydatny opis zawartości ikony i jej funkcji (w odpowiednich przypadkach). 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/chat.

Jeśli ikona jest ustawiona w Button, altText wyświetla się jako tekst pomocniczy, gdy użytkownik najedzie kursorem na przycisk. Jeśli jednak przycisk również ustawi text, altText ikony jest ignorowana.
imageType

ImageType

Styl przycinania zastosowany do obrazu. W niektórych przypadkach przycięcie obrazu w formacie CIRCLE powoduje, że obraz jest większy niż ikona wbudowanej.
Pole Unii icons. Ikona wyświetlana w widżecie na karcie. icons może mieć tylko jedną z tych wartości:
knownIcon

string

Wyświetla jedną z wbudowanych ikon dostępnych w Google Workspace.

Jeśli na przykład chcesz wyświetlać ikonę samolotu, podaj AIRPLANE. W przypadku autobusu podaj BUS.

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

string

Wyświetlaj ikonę niestandardową hostowaną pod adresem URL HTTPS.

Na przykład:

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

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

Obraz

Obraz określony za pomocą adresu URL i może zawierać działanie onClick. Przykład: Obraz.

Pola
imageUrl

string

Adres URL HTTPS hostujący obraz.

Na przykład:

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

OnClick

Kliknięcie tego przycisku powoduje uruchomienie tego działania, gdy użytkownik kliknie obraz.
altText

string

Tekst zastępczy tego obrazu, który jest używany na potrzeby ułatwień dostępu.

Komponent Obraz

Reprezentuje obraz.

Pola
imageUri

string

Adres URL obrazu.
altText

string

Etykieta ułatwień dostępu do obrazu.
cropStyle

ImageCropStyle

Styl przycinania, który ma być stosowany do obrazu.
borderStyle

BorderStyle

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

StylCropStyle

Reprezentuje styl przycięcia obrazu zastosowany do obrazu.

Oto jak na przykład zastosować format obrazu 16:9:

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

ImageCropType

Typ przycięcia.
aspectRatio

double

Format obrazu używany przy przycięciach to RECTANGLE_CUSTOM.

Oto jak na przykład zastosować format obrazu 16:9:

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

TypKapsowania Obrazu

Reprezentuje styl przycięcia obrazu zastosowany do obrazu.

Wartości w polu enum
IMAGE_CROP_TYPE_UNSPECIFIED Nie używaj. Nie określono.
SQUARE Wartość domyślna. Stosuje przycięcie kwadratowe.
CIRCLE Stosuje przycięcie okrągłe.
RECTANGLE_CUSTOM Pozwala zastosować prostokątne przycięcie o niestandardowym współczynniku proporcji. Ustaw niestandardowy format obrazu za pomocą aspectRatio.
RECTANGLE_4_3 Pozwala zastosować prostokątne przycięcie o współczynniku proporcji 4:3.

Podgląd linku

Działanie karty, które pozwala wyświetlić podgląd linku firmy zewnętrznej przez wyświetlenie karty i elementu inteligentnego. Więcej informacji znajdziesz w artykule Wyświetlanie podglądu linków za pomocą elementów inteligentnych.

Na przykład ten plik JSON zwraca unikalny tytuł podglądu linku i jego elementu inteligentnego oraz karty podglądu z nagłówkiem i opisem tekstowym:

{
  "action": {
    "linkPreview": {
      "title": "Smart chip title",
      "linkPreviewTitle": "Link preview title",
      "previewCard": {
        "header": {
          "title": "Preview card header",
        },
        "sections": [
          {
            "widgets": [
              {
                "textParagraph": {
                  "text": "Description of the link."
                }
              }
            ]
          }
        ]
      }
    }
  }
}

W tym przykładzie wyświetla się następujący podgląd linku:

Podgląd przykładowego linku

Pola
previewCard

Card

Karta zawierająca informacje o linku z usługi zewnętrznej.
title

string

Tytuł wyświetlany w elemencie inteligentnym w celu wyświetlenia podglądu linku. Jeśli nie jest skonfigurowana, element inteligentny wyświetla nagłówek elementu preview_card.
linkPreviewTitle

string

Tytuł wyświetlany w podglądzie linku. Jeśli nie są ustawione, w podglądzie linku wyświetlany jest nagłówek elementu preview_card.

Działanie karty, które modyfikuje stos kart. Na przykład:

1) Dodaj nową kartę do stosu (przejdź dalej).

 navigations : {
    pushCard : CARD
  }

2) Zaktualizuj kartę na stosie (aktualizacja).

  navigations : {
    popCard : true,
  }, {
    pushCard : CARD
  }

3) Cofnij się o jeden krok bez aktualizacji.

  navigations : {
    popCard : true,
  }

4) Cofnij się o kilka kroków i zaktualizuj kartę.

  navigations : {
    popCard : true,
  }, ... {
    pushCard : CARD
  }

5) Wróć do zdefiniowanego CARD_NAME o kilku krokach.

  navigations : {
    popToCardName : CARD_NAME,
  }, {
    pushCard : CARD
  }

6) Wróć do poziomu głównego i zaktualizuj kartę.

  navigations : {
    popToRoot : true
  }, {
    pushCard : CARD
  }

7) Przejdź na określoną kartę i ją również.

navigations : { popToCardName : CARD_NAME }, { popCard : true, }

8) Wymień górną kartę na nową.

  navigations : {
    updateCard : CARD
  }
Pola

Pole Unii navigate_action.

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

bool

Stos kart wyskakuje wszystkie karty oprócz karty głównej.
pop

bool

Stos kart wyskakuje jedną z nich.
popToCard

string

Stos kart wyświetla wszystkie karty z podaną nazwą karty nad określoną kartą.
pushCard

Card

Stos kart spycha kartę na stos.
updateCard

Card

Stos kart aktualizuje kartę górną o nową kartę i zachowuje wartości wypełnione w polach formularza. W przypadku pól, które nie są równoważne, wartość jest pomijana.

Powiadomienie

Czynność karty, która wyświetla powiadomienie w aplikacji hosta.

Pola
text

string

Zwykły tekst wyświetlany w powiadomieniu, bez tagów HTML.

Po kliknięciu

Określa, jak zareagować, gdy użytkownik kliknie interaktywny element na karcie, np. przycisk.

Pola

Pole Unii data.

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

Action

Jeśli określisz działanie, zostanie ono wyzwolone przez ten element onClick.
openDynamicLinkAction

Action

Dodatek aktywuje to działanie, gdy musi otworzyć link. Różni się to od metody open_link powyżej tym, że uzyskanie linku wymaga komunikacji z serwerem. Z tego względu klient korzystający z linku internetowego musi wykonać pewne czynności przygotowawcze, zanim zwróci odpowiedź związaną z otwarciem linku. Ta funkcja jest obsługiwana przez dodatki do Google Workspace, ale nie przez aplikacje Google Chat.
card

Card

Nowa karta jest przekazywana do stosu kart po kliknięciu (jeśli została podana).

Ta funkcja jest obsługiwana przez dodatki do Google Workspace, ale nie przez aplikacje Google Chat.

Przy zamknięciu

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

Implementacja zależy od możliwości platformy klienta. Na przykład przeglądarka może otworzyć link w wyskakującym okienku z modułem obsługi OnClose.

Jeśli ustawiono zarówno moduły obsługi OnOpen, jak i OnClose, a platforma klienta nie obsługuje obu wartości, parametr OnClose ma pierwszeństwo.

Ta funkcja jest obsługiwana przez dodatki do Google Workspace, ale nie przez aplikacje Google Chat.

Wartości w polu enum
NOTHING Wartość domyślna. Karta nie jest doładowywana i nic się nie dzieje.
RELOAD

Wczytuje ponownie kartę po zamknięciu okna podrzędnego.

W połączeniu z OpenAs.OVERLAY okno podrzędne działa jak okno modalne, a karta nadrzędna jest zablokowana do momentu zamknięcia okna podrzędnego.

OpenAs

Gdy akcja OnClick otwiera link, klient może otworzyć go jako pełnowymiarowe okno (jeśli jest to ramka używana przez klienta) lub jako nakładkę (np. wyskakujące okienko). Implementacja zależy od możliwości platformy klienta i wybrana wartość może być ignorowana, jeśli klient jej nie obsługuje. Usługa FULL_SIZE jest obsługiwana przez wszystkie klienty.

Ta funkcja jest obsługiwana przez dodatki do Google Workspace, ale nie przez aplikacje Google Chat.

Wartości w polu enum
FULL_SIZE Link otwiera się jako okno pełnowymiarowe (jeśli jest to ramka używana przez klienta).
OVERLAY Link otwiera się jako nakładka, np. w wyskakującym okienku.

Renderowanie

Zestaw instrukcji renderowania, które informują kartę, że ma wykonać działanie, lub aplikację hostującą dodatek, która ma wykonać działanie związane z aplikacją.

Pola
action

Action
hostAppAction

HostAppActionMarkup

Działania obsługiwane przez poszczególne aplikacje hostujące.
schema

string

To jest pole schematu bez operacji, które może znajdować się w znacznikach na potrzeby sprawdzania składni.

Działanie

Pola
navigations[]

Navigation

Wypychaj, wyskakuj i aktualizuj wyświetlane karty.
notification

Notification

Wyświetl powiadomienie użytkownikowi.
linkPreview

LinkPreview

Wyświetl podgląd linku użytkownikowi.

Dane wejściowe wyboru

Widżet, który tworzy jeden lub więcej elementów interfejsu, które użytkownicy mogą wybrać. Może to być 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 dotyczący aplikacji do obsługi Google Chat znajdziesz w artykule Wprowadzanie wyboru.

Aplikacje do obsługi czatu mogą przetwarzać wartość elementów wybranych lub wprowadzonych przez użytkowników. Szczegółowe informacje o pracy z danymi wpisywanymi w formularzach znajdziesz w artykule Odbieranie danych z formularzy.

Aby zbierać niezdefiniowane lub abstrakcyjne dane o użytkownikach, używaj widżetu TextInput.

Pola
name

string

Nazwa, która określa pole wyboru w zdarzeniu wprowadzania danych w formularzu.

Szczegółowe informacje o pracy z danymi wpisywanymi w formularzach znajdziesz w artykule Odbieranie danych z formularzy.
label

string

Tekst wyświetlany nad polem wyboru w interfejsie.

Wpisz tekst, który pomoże użytkownikowi wpisać informacje, których potrzebuje aplikacja. Jeśli na przykład użytkownicy wybierają z menu pilne zgłoszenie dotyczące pracy, etykieta może mieć wartość „Pilne” lub „Wybierz pilność”.
type

SelectionType

Typ elementów wyświetlanych użytkownikom w widżecie SelectionInput. Typy wybranych elementów obsługują różne typy interakcji. Na przykład użytkownicy mogą zaznaczyć jedno lub więcej pól wyboru, ale tylko jedną wartość z menu.
items[]

SelectionItem

Tablica elementów do wyboru. Może to być na przykład tablica opcji lub pól wyboru. Obsługuje do 100 elementów.
onChangeAction

Action

Jeśli określisz tę wartość, formularz zostanie przesłany po zmianie wyboru. Jeśli go nie podasz, musisz określić osobny przycisk, który będzie służyć do przesyłania formularza.

Szczegółowe informacje o pracy z danymi wpisywanymi w formularzach znajdziesz w artykule Odbieranie danych z formularzy.
multiSelectMaxSelectedItems

int32

W przypadku menu wielokrotnego wyboru jest to maksymalna liczba elementów, które użytkownik może wybrać. Minimalna wartość to 1 element. Jeśli nie określono inaczej, ustaw na 3 elementy.

multiSelectMinQueryLength

int32

W przypadku menu wielokrotnego wyboru jest to liczba znaków tekstowych, które użytkownik wpisuje, zanim zapytanie zostanie automatycznie uzupełnione i wyświetlone na karcie sugerowane elementy.

Jeśli nie określono inaczej, ustaw na 0 znaków w przypadku statycznych źródeł danych i 3 znaki w przypadku zewnętrznych źródeł danych.

Pole Unii multi_select_data_source. Tylko komunikatory. W przypadku menu wielokrotnego wyboru jest to typ źródła danych. multi_select_data_source może mieć tylko jedną z tych wartości:
externalDataSource

Action

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

platformDataSource

PlatformDataSource

Źródło danych z aplikacji hosta Google Workspace.

Źródło danych platformy

Tylko komunikatory. w przypadku widżetu SelectionInput, który korzysta z menu wielokrotnego wyboru, są to dane z aplikacji hosta Google Workspace. Służy do wypełniania elementów w menu wielokrotnego wyboru.

Pola
Pole Unii data_source. Źródło danych. data_source może mieć tylko jedną z tych wartości:
commonDataSource

CommonDataSource

Widżet SelectionInput z menu wielokrotnego wyboru jest źródłem danych współdzielonym przez wszystkie aplikacje hostujące Google Workspace, np. użytkowników w organizacji Google Workspace.

hostAppDataSource

HostAppDataSourceMarkup

Źródło danych unikalne dla aplikacji hosta Google Workspace, takie jak e-maile z Gmaila, wydarzenia z Kalendarza Google czy wiadomości z Google Chat.

CommonDataSource

Tylko komunikatory. Źródło danych współdzielone przez wszystkie aplikacje hosta Google Workspace.

Wartości w polu enum
UNKNOWN Wartość domyślna. Nie używaj.
USER

Lista użytkowników podana przez aplikację hosta Google Workspace. Aby na przykład wyszukać użytkowników z Google Chat, użyj nazwy zasobu użytkownika.

Format: użytkownicy/{użytkownik}

Element wyboru

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

Pola
text

string

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

string

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

Szczegółowe informacje o pracy z danymi wpisywanymi w formularzach znajdziesz w artykule Odbieranie danych z formularzy.
selected

bool

Określa, czy element jest wybrany domyślnie. Jeśli dane wejściowe wyboru akceptują tylko jedną wartość (np. przyciski opcji lub menu), ustaw to pole tylko dla 1 elementu.
startIconUri

string

W przypadku menu wielokrotnego wyboru jest to adres URL ikony wyświetlany obok pola text elementu. Obsługuje pliki PNG i JPEG. Musi to być adres URL HTTPS. Na przykład: https://developers.google.com/chat/images/quickstart-app-avatar.png.

bottomText

string

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

Typ wyboru

Format elementów, które użytkownicy mogą wybierać. Różne opcje obsługują różne typy interakcji. Na przykład użytkownicy mogą zaznaczyć wiele pól wyboru, ale tylko jeden element z menu.

Każde pole wyboru obsługuje jeden typ wyboru. Nie można na przykład łączyć pól wyboru i przełączników.

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

Jest obsługiwane przez aplikacje do obsługi czatu, ale nie przez dodatki do Google Workspace.

Menu wielokrotnego wyboru na potrzeby danych statycznych lub dynamicznych. Na pasku menu użytkownicy wybierają co najmniej 1 element. Użytkownicy mogą też wpisywać wartości, aby wypełnić dane dynamiczne. Użytkownicy mogą na przykład zacząć wpisywać nazwę pokoju w Google Chat, a widżet automatycznie zasugeruje pokój.

Aby wypełnić pozycje w menu wielokrotnego wyboru, możesz użyć jednego z tych typów źródeł danych:

  • Dane statyczne: elementy są określane w widżecie jako obiekty SelectionItem. Maksymalnie 100 elementów.
  • Dane Google Workspace: elementy są wypełniane na podstawie danych z aplikacji Google Workspace, takich jak użytkownicy Google Chat i pokoje.
  • Dane zewnętrzne: informacje o elementach pochodzą z dynamicznego zewnętrznego źródła danych.

Przykłady implementacji menu wielokrotnego wyboru znajdziesz na stronie widżetu SelectionInput.

PrześlijFormularzOdpowiedź

Odpowiedź na przesłanie formularza, inna niż pobranie kontenera autouzupełniania zawierającego działania, które powinna wykonać karta, i/lub aplikacja hostująca dodatek oraz informacje o zmianie stanu karty. Na przykład:

{
  "renderActions": {
    "action": {
      "notification": {
        "text": "Email address is added: salam.heba@example.com"
      }
    },
    "hostAppAction": {
      "gmailAction": {
        "openCreatedDraftAction": {
          "draftId": "msg-a:r-79766936926021702",
          "threadServerPermId": "thread-f:15700999851086004"
        }
      }
    }
  }
}
Pola
renderActions

RenderActions

Zestaw instrukcji renderowania, które informują kartę, że ma wykonać działanie, lub aplikację hostującą dodatek, która ma wykonać działanie związane z aplikacją.
stateChanged

bool

Wskazuje, czy stan kart uległ zmianie, a dane istniejących kart są nieaktualne.
schema

string

Jest to pole schematu bez operacji, które może znajdować się w znacznikach na potrzeby sprawdzania składni.

Sugestie

Sugerowane wartości, które użytkownicy mogą wpisywać. Te wartości pojawiają się, gdy użytkownik kliknie w polu do wprowadzania tekstu. Gdy użytkownik wpisuje tekst, sugerowane wartości są dynamicznie filtrowane na podstawie wpisanego tekstu.

Na przykład w polu do wprowadzania tekstu w języku programowania możesz zobaczyć sugestie Javy, JavaScriptu, Pythona i C++. Gdy użytkownik zacznie wpisywać Jav, pojawi się lista filtrów sugestii, które wyświetlą się w językach: Java i JavaScript.

Sugerowane wartości pomagają nakłaniać użytkowników do wpisywania wartości, które są zrozumiałe dla aplikacji. W odniesieniu do języka JavaScript niektórzy użytkownicy mogą wpisać javascript, a inni java script. Sugerowanie atrybutu JavaScript może ujednolicić sposób, w jaki użytkownicy korzystają z Twojej aplikacji.

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

Pola
items[]

SuggestionItem

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

Element sugestii

Jedna sugerowana wartość, którą użytkownicy mogą wpisać w polu do wprowadzania tekstu.

Pola

Pole Unii content.

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

string

Wartość sugerowanej wartości wejściowej w polu do wprowadzania tekstu. Jest to odpowiednik haseł wprowadzanych przez użytkowników.

Pole tekstowe

Pole, w którym użytkownicy mogą wpisywać tekst. Obsługuje sugestie i działania dotyczące zmian. Przykład dotyczący aplikacji Google Chat znajdziesz w artykule Wprowadzanie tekstu.

Aplikacje do obsługi czatu odbierają i mogą przetwarzać wartość wpisanego tekstu podczas zdarzeń wprowadzania danych w formularzu. Szczegółowe informacje o pracy z danymi wpisywanymi w formularzach znajdziesz w artykule Odbieranie danych z formularzy.

Jeśli chcesz zbierać niezdefiniowane lub abstrakcyjne dane o użytkownikach, korzystaj z wpisywania tekstu. Aby zbierać określone lub wyliczane dane użytkowników, używaj widżetu SelectionInput.

Pola
name

string

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

Szczegółowe informacje o pracy z danymi wpisywanymi w formularzach znajdziesz w artykule Odbieranie danych z formularzy.
label

string

Tekst wyświetlany nad polem do wprowadzania tekstu w interfejsie.

Wpisz tekst, który pomoże użytkownikowi wpisać informacje, których potrzebuje aplikacja. Jeśli na przykład pytasz kogoś o imię, a konkretnie imię i nazwisko tej osoby, wpisz surname zamiast name.

Wymagany, jeśli hintText nie jest określony. W przeciwnym razie jest to opcjonalne.
hintText

string

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

Wymagany, jeśli label nie jest określony. W przeciwnym razie jest to opcjonalne.
value

string

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

Szczegółowe informacje o pracy z danymi wpisywanymi w formularzach znajdziesz w artykule Odbieranie danych z formularzy.
type

Type

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

Action

Co zrobić, gdy zmiana wprowadzona w polu wprowadzania tekstu Na przykład użytkownik dodał pole lub usunął tekst.

Może to być na przykład uruchomienie funkcji niestandardowej lub otwarcie okna w Google Chat.
initialSuggestions

Suggestions

Sugerowane wartości, które użytkownicy mogą wpisywać. Te wartości pojawiają się, gdy użytkownik kliknie w polu do wprowadzania tekstu. Gdy użytkownik wpisuje tekst, sugerowane wartości są dynamicznie filtrowane na podstawie wpisanego tekstu.

Na przykład w polu do wprowadzania tekstu w języku programowania możesz zobaczyć sugestie Javy, JavaScriptu, Pythona i C++. Gdy użytkownik zacznie wpisywać Jav, pojawi się lista filtrów sugestii, które pokażą tylko Java i JavaScript.

Sugerowane wartości pomagają nakłaniać użytkowników do wpisywania wartości, które są zrozumiałe dla aplikacji. W odniesieniu do języka JavaScript niektórzy użytkownicy mogą wpisać javascript, a inni java script. Sugerowanie atrybutu JavaScript może ujednolicić sposób, w jaki użytkownicy korzystają z Twojej aplikacji.

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

Action

Opcjonalnie. Określ działanie, które ma być wykonywane, gdy w polu do wprowadzania tekstu pojawią się sugestie użytkownikom, którzy z niego korzystają.

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

Jeśli określisz to ustawienie, aplikacja wykona określone tutaj działanie, na przykład uruchomi funkcję niestandardową.

Ta funkcja jest obsługiwana przez dodatki do Google Workspace, ale nie przez aplikacje Google Chat.
placeholderText

string

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

Jest obsługiwane przez aplikacje Google Chat, ale nie przez dodatki do Google Workspace.

Typ

Sposób wyświetlania pola do wprowadzania tekstu w interfejsie. Może to być na przykład pole do wprowadzania danych w jednym lub wielu wierszach.

Jeśli określono initialSuggestions, type ma zawsze wartość SINGLE_LINE, nawet jeśli jest ustawiona na MULTIPLE_LINE.

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

Akapit tekstu

Akapit tekstu, który obsługuje formatowanie. Instrukcje dotyczące aplikacji Google Chat znajdziesz w artykule Akapit tekstu. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatków do Google Workspace.

Pola
text

string

Tekst widoczny w widżecie.

Widżet

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

Widżet to obiekt złożony, który może reprezentować jeden z tekstów, obrazów, przycisków oraz innych typów obiektów.

Pola
horizontalAlignment

HorizontalAlignment

Określa, czy widżety mają być wyrównywane do lewej, do prawej czy do środka kolumny.
Pole Unii data. Widżet może zawierać tylko jeden z poniższych 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

TextParagraph

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

Na przykład ten kod JSON tworzy pogrubienie tekstu:

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

Image

Wyświetla obraz.

Na przykład ten plik JSON tworzy obraz z tekstem alternatywnym:

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

DecoratedText

Wyświetla ozdobiony element tekstowy.

Na przykład poniższy kod JSON tworzy ozdobny widżet tekstowy z adresem 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

ButtonList

Lista przycisków.

Na przykład podany niżej kod JSON powoduje utworzenie 2 przycisków. Pierwszy to niebieski przycisk tekstowy, a drugi to przycisk graficzny, którego kliknięcie umożliwia otwarcie linku:

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

TextInput

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

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

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

W kolejnym przykładzie ten plik JSON tworzy dane wejściowe tekstowe 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

SelectionInput

Wyświetla element sterujący, który pozwala użytkownikom wybierać elementy. Elementami sterującymi wyboru mogą być pola wyboru, przyciski, przełączniki lub menu rozwijane.

Na przykład ten plik JSON tworzy menu, które pozwala użytkownikom wybrać rozmiar:

"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

DateTimePicker

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

Na przykład poniższy kod JSON tworzy selektor daty i godziny, aby zaplanować spotkanie:

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

Divider

Wyświetla poziomą linię podziału między widżetami.

Na przykład taki kod JSON tworzy separator:

"divider": {
}
grid

Grid

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

Siatka obsługuje dowolną liczbę kolumn i elementów. Liczba wierszy jest określana na podstawie górnej granicy liczby elementów podzielonej przez liczbę kolumn. Siatka z 10 elementami i 2 kolumnami ma 5 wierszy. Siatka z 11 elementami i 2 kolumnami ma 6 wierszy.

Na przykład ten kod JSON tworzy siatkę z 2 kolumnami z 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

Columns

Wyświetla do 2 kolumn.

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

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

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

Wyrównanie w poziomie

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

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 je do lewej. W przypadku układów od prawej do lewej wyrównuje się 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. W przypadku układów od prawej do lewej wyrównuje widżety do lewej.

Typ obrazu

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

Wartości w polu enum
SQUARE Wartość domyślna. Dodaje do obrazu kwadratową maskę. Na przykład obraz o wymiarach 4 x 3 zmienia się w 3 x 3.
CIRCLE Dodaje do obrazu maskę okrągłą. Na przykład obraz o wymiarach 4 x 3 stanie się kołem o średnicy 3.