Cards v2

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",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
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 są zawsze wyświetlane 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 liniami. Przykład w aplikacjach Google Chat znajdziesz w sekcji kart.

sectionDividerStyle

enum (DividerStyle)

Styl separatora między sekcjami.

cardActions[]

object (CardAction)

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

Karty aplikacji Google Chat nie mają paska narzędzi, dlatego 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.

displayStyle

enum (DisplayStyle)

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

Nieobsługiwane przez aplikacje do obsługi czatu.

peekCardHeader

object (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.

Nagłówek karty

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

Zapis JSON 
{
  "title": string,
  "subtitle": string,
  "imageType": enum (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
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

enum (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.

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.

Sekcja

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

Zapis JSON 
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer
}
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 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 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

integer

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 domyślnie są zwinięte. uncollapsibleWidgetsCount jest brany pod uwagę tylko wtedy, gdy collapsible ma wartość true.

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.

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)
  }
  // End of list of possible types for union field data.
}
Pola
horizontalAlignment

enum (HorizontalAlignment)

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

Pole sumy 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

object (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 dodatkach do Google Workspace.

Na przykład ten kod JSON tworzy pogrubienie tekstu: 

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

object (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

object (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

object (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

object (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

object (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

object (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

object (Divider)

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

Na przykład taki 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 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

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

Akapit tekstu

Akapit tekstu, który obsługuje formatowanie. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Akapit 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.

Zapis JSON 
{
  "text": string
}
Pola
text

string

Tekst widoczny w widżecie.

Obraz

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

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

string

Adres URL HTTPS hostujący obraz.

Na przykład: 

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

object (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.

Po kliknięciu

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

Zapis JSON 
{

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

Pole sumy data.

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

action

object (Action)

Jeśli określisz działanie, zostanie ono aktywowane przez ten onClick.

card

object (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.

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.

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

string

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

Przykład użycia znajdziesz w artykule Tworzenie kart interaktywnych.

parameters[]

object (ActionParameter)

Lista parametrów działań.

loadIndicator

enum (LoadIndicator)

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

persistValues

boolean

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

Jeśli true, wartości formularza pozostają po uruchomieniu 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 ustaw ResponseType na UPDATE_MESSAGE i użyj tego samego elementu cardId na karcie zawierającej to działanie.

Jeśli 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

enum (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. Jeśli na przykład ustawisz interaction na OPEN_DIALOG, 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.

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

string

Nazwa parametru skryptu działania.

value

string

Wartość parametru.

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.

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. Jeśli na przykład ustawisz interaction na OPEN_DIALOG, 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. action działa normalnie.
OPEN_DIALOG

Otwiera okno, czyli interfejs z kartami, za pomocą którego 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.

OpenAs

Gdy akcja OnClick powoduje otwarcie linku, 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.

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 ustawione są 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.

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 sekcji Dekorowany tekst.

Zapis JSON 
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "topLabel": string,
  "text": string,
  "wrapText": boolean,
  "bottomLabel": string,
  "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)

Wycofano na rzecz startIcon.

startIcon

object (Icon)

Ikona wyświetlana przed tekstem.

topLabel

string

Tekst, który wyświetla się nad 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 dodatkach do Google Workspace.

wrapText

boolean

Ustawienie zawijania tekstu. W przypadku true tekst zawija się i wyświetla w wielu wierszach. W przeciwnym razie tekst zostanie obcięty.

Dotyczy tylko text, nie topLabel i bottomLabel.

bottomLabel

string

Tekst widoczny poniżej pola text. Zawsze zawija się.

onClick

object (OnClick)

To działanie jest wywoływane, gdy użytkownik kliknie topLabel lub bottomLabel.

Pole sumy 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

object (Button)

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

switchControl

object (SwitchControl)

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

endIcon

object (Icon)

Ikona wyświetlana pod tekstem.

Obsługuje ikony wbudowane i niestandardowe.

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.

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

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string
  // End of list of possible types for union field icons.
}
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 ustawi też text, altText ikony jest ignorowana.

imageType

enum (ImageType)

Styl przycinania zastosowany do obrazu. W niektórych przypadkach przycięcie obrazu CIRCLE spowoduje, że obraz będzie większy niż ikona wbudowanej.

Pole sumy 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.

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

Pełną listę obsługiwanych ikon znajdziesz na stronie wbudowanych ikon.

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.

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.

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

string

Tekst wyświetlany na przycisku.

icon

object (Icon)

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

color

object (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 2 sposoby: 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 alpha, aby ustawić 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

object (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

boolean

Jeśli 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 deweloperów Google Chat na stronie https://developers.google.com/chat”.

Kolor

Reprezentuje kolor w przestrzeni kolorów RGBA. Ta prezentacja została zaprojektowana z myślą o uproszczeniu konwersji na różne wersje kolorystyczne i reprezentacje kolorów w różnych językach. Na przykład pola tej reprezentacji można w prosty sposób przekazać do konstruktora java.awt.Color w języku Java; można je też w prosty sposób podać w metodzie +colorWithRed:green:blue:alpha UIColor w iOS. Nie wymaga to żadnego nakładu pracy, a można je też łatwo sformatować jako ciąg CSS rgba() w JavaScript.

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

Gdy trzeba określić równość kolorów, implementacje (o ile nie udokumentowano inaczej), traktuj 2 kolory jako jednakowe, jeśli wszystkie ich wartości czerwonego, zielonego, niebieskiego i alfa różnią się maksymalnie o 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 / OJ-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ść czerwonego koloru jako wartość przedziału [0, 1].

green

number

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

blue

number

Ilość koloru niebieskiego jako wartość przedziału [0, 1].

alpha

number

Odsetek tego koloru, jaki ma zostać zastosowany do piksela. To oznacza, że ostateczny kolor w pikselach jest określany przez równanie:

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

Oznacza to, że wartość 1,0 odpowiada jednolitego koloru, a wartość 0,0 – całkowicie przezroczystemu. Stosuje komunikat opakowujący, a nie prostą wartość skalarną zmiennoprzecinkową, dzięki czemu można odróżnić wartość domyślną od nieustawionej wartości. Jeśli ten argument zostanie pominięty, obiekt koloru będzie renderowany jako jednolity kolor (jak gdyby wartość alfa została wyraźnie określona jako 1,0).

SwitchControl

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

Obsługiwane 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łączania jest identyfikowany w zdarzeniu wprowadzania danych w formularzu.

Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy.

value

string

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

Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy.

selected

boolean

Jeśli wybierzesz true, przełącznik będzie wybrany.

onChangeAction

object (Action)

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

controlType

enum (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 Wycofano na rzecz CHECK_BOX.
CHECK_BOX Pole wyboru.

Lista przycisków

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

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

object (Button)

Tablica przyciskó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 sekcji Wprowadzanie tekstu.

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

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

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

string

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

Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych 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.

Wymagane, jeśli właściwość hintText nie została określona. 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.

Wymagane, jeśli właściwość label nie została określona. W przeciwnym razie jest to opcjonalne.

value

string

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

Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy.

type

enum (Type)

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

onChangeAction

object (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

object (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 wyświetlą 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 typu JavaScript może ujednolicić sposób interakcji użytkowników z aplikacją.

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

autoCompleteAction

object (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.

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 do wyświetlenia 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 typu JavaScript może ujednolicić sposób interakcji użytkowników z aplikacją.

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

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

object (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.

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

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 Google Chat znajdziesz w sekcji Wprowadzanie wyboru.

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

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

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

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

Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych 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

enum (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[]

object (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

object (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.

Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy.

multiSelectMaxSelectedItems

integer

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

integer

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 sumy multi_select_data_source. Tylko komunikatory. W przypadku menu wielokrotnego wyboru jest to typ źródła danych. multi_select_data_source może być 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 aplikacji hosta Google Workspace.

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żetów SelectionInput .

Element wyboru

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

Zapis JSON 
{
  "text": string,
  "value": string,
  "selected": boolean,
  "startIconUri": string,
  "bottomText": string
}
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.

Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy.

selected

boolean

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 w formacie 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.

Źródło danych platformy

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

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 sumy data_source. Źródło danych. data_source może być tylko jedną z tych wartości:
commonDataSource

enum (CommonDataSource)

W przypadku widżetu SelectionInput z menu wielokrotnego wyboru jest to źródło danych współdzielone przez wszystkie aplikacje hostujące Google Workspace, np. użytkowników w organizacji Google Workspace.

hostAppDataSource

object (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 hostujące 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 pozyskać użytkowników z Google Chat, użyj nazwy zasobu użytkownika.

Format: użytkownicy/{użytkownik}

HostAppDataSourceMarkup

Tylko komunikatory. W przypadku widżetu SelectionInput korzystającego z menu wielokrotnego wyboru jest to źródło danych z aplikacji hosta 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 sumy data_source. Aplikacja Google Workspace, która pozyskuje dane na potrzeby menu wielokrotnego wyboru. data_source może mieć tylko jedną z tych wartości:
chatDataSource

object (ChatClientDataSourceMarkup)

Źródło danych to Google Chat.

Znacznik źródła danych klienta

Tylko komunikatory. W przypadku widżetu SelectionInput, który używa menu wielokrotnego wyboru, jest to źródło danych z Google Chat. Może to być na przykład lista pokoi Google Chat, do których należy użytkownik.

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 sumy source. Źródło danych Google Chat. source może mieć tylko jedną z tych wartości:
spaceDataSource

object (SpaceDataSource)

Źródło danych reprezentujące pokój w Google Chat.

Format: spacje/{spacja}

Źródło danych Kosmicznych

Źródło danych reprezentujące pokój w Google Chat.

Format: spacje/{spacja}

Zapis JSON 
{
  "defaultToCurrentSpace": boolean
}
Pola
defaultToCurrentSpace

boolean

Gdy true będzie domyślnie wybierać kartę Google Chat w pokoju Google Chat. Wartością domyślną jest false.

DateTimePicker

Umożliwia użytkownikom wpisywanie daty, godziny lub zarówno daty, jak i godziny. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji 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.

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

string

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

Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych 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

enum (DateTimePickerType)

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

valueMsEpoch

string (int64 format)

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, aby wskazać 1 stycznia 2023 r., użyj 1672531200000.
  • TIME_ONLY: godzina w strefie czasowej UTC. Na przykład, aby wskazać 12:00, użyj 43200000 (lub 12 * 60 * 60 * 1000).
timezoneOffsetDate

integer

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

onChangeAction

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

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 sekcji Rozgraniczenie.

Na przykład taki kod JSON tworzy separator: 

"divider": {}

Siatka

Wyświetla siatkę z kolekcją elementów. Elementy mogą zawierać tylko tekst lub obrazy. Jeśli chcesz dodać kolumny elastyczne lub dodać coś więcej niż tekst lub obrazy, użyj właściwości Columns. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji 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"
    }
  }
}
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 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

object (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.

Zapis JSON 
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
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

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 dla elementu siatki.

Komponent Obraz

Reprezentuje obraz.

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 być stosowany do obrazu.

borderStyle

object (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
}
Zapis JSON 
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
Pola
type

enum (ImageCropType)

Typ przycięcia.

aspectRatio

number

Format obrazu używany przy przycięciu 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.

Styl obramowania

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

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.

cornerRadius

integer

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.

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.

Kolumny

Widżet Columns wyświetla maksymalnie 2 kolumny w komunikacie na karcie lub w 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 sekcji 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. Za pomocą pola 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.

Zapis JSON 
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
Pola
columnItems[]

object (Column)

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

Kolumna

Kolumna.

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

enum (HorizontalSizeStyle)

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

horizontalAlignment

enum (HorizontalAlignment)

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

verticalAlignment

enum (VerticalAlignment)

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

widgets[]

object (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 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.

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.

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)
  }
  // End of list of possible types for union field data.
}
Pola

Pole sumy data.

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

textParagraph

object (TextParagraph)

Widżet TextParagraph.

image

object (Image)

Widżet Image.

decoratedText

object (DecoratedText)

Widżet DecoratedText.

buttonList

object (ButtonList)

Widżet ButtonList.

textInput

object (TextInput)

Widżet TextInput.

selectionInput

object (SelectionInput)

Widżet SelectionInput.

dateTimePicker

object (DateTimePicker)

Widżet DateTimePicker.

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.

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.

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

string

Etykieta wyświetlana jako pozycja menu czynności.

onClick

object (OnClick)

Działanie onClick powiązane z tym działaniem.

CardFixedStopka

Trwała (przyklejona) stopka wyświetlana u dołu karty. Więcej informacji o aplikacjach Google Chat znajdziesz w sekcji 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 wiadomości z kartami.

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

object (Button)

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

secondaryButton

object (Button)

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

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.