Indeks
Action
(komunikat)Action.ActionParameter
(komunikat)Action.Interaction
(wyliczenie)Action.LoadIndicator
(wyliczenie)BorderStyle
(komunikat)BorderStyle.BorderType
(wyliczenie)Button
(komunikat)ButtonList
(komunikat)Card
(komunikat)Card.CardAction
(komunikat)Card.CardFixedFooter
(komunikat)Card.CardHeader
(komunikat)Card.DisplayStyle
(wyliczenie)Card.DividerStyle
(wyliczenie)Card.Section
(komunikat)Columns
(komunikat)Columns.Column
(komunikat)Columns.Column.HorizontalSizeStyle
(wyliczenie)Columns.Column.VerticalAlignment
(wyliczenie)Columns.Column.Widgets
(komunikat)DateTimePicker
(komunikat)DateTimePicker.DateTimePickerType
(wyliczenie)DecoratedText
(komunikat)DecoratedText.SwitchControl
(komunikat)DecoratedText.SwitchControl.ControlType
(wyliczenie)Divider
(komunikat)GetAutocompletionResponse
(komunikat)Grid
(komunikat)Grid.GridItem
(komunikat)Grid.GridItem.GridItemLayout
(wyliczenie)Icon
(komunikat)Image
(komunikat)ImageComponent
(komunikat)ImageCropStyle
(komunikat)ImageCropStyle.ImageCropType
(wyliczenie)LinkPreview
(komunikat)Navigation
(komunikat)Notification
(komunikat)OnClick
(komunikat)OpenLink
(komunikat)OpenLink.OnClose
(wyliczenie)OpenLink.OpenAs
(wyliczenie)RenderActions
(komunikat)RenderActions.Action
(komunikat)SelectionInput
(komunikat)SelectionInput.PlatformDataSource
(komunikat)SelectionInput.PlatformDataSource.CommonDataSource
(wyliczenie)SelectionInput.SelectionItem
(komunikat)SelectionInput.SelectionType
(wyliczenie)SubmitFormResponse
(komunikat)Suggestions
(komunikat)Suggestions.SuggestionItem
(komunikat)TextInput
(komunikat)TextInput.Type
(wyliczenie)TextParagraph
(komunikat)Widget
(komunikat)Widget.HorizontalAlignment
(wyliczenie)Widget.ImageType
(wyliczenie)
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 |
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[] |
Lista parametrów działań. |
loadIndicator |
Określa wskaźnik wczytywania, który wyświetla się podczas wywoływania działania. |
persistValues |
Wskazuje, czy wartości formularza pozostają po wykonaniu działania. Wartością domyślną jest Jeśli ustawiona jest wartość Jeśli ustawiona jest wartość |
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 Dzięki określeniu właściwości 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 |
Nazwa parametru skryptu działania. |
value |
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 |
Typ obramowania. |
strokeColor |
Kolory, które mają być używane, gdy typ to |
cornerRadius |
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ść
(nie Image
) i ustaw działanie ImageComponent
onClick
.
Pola | |
---|---|
text |
Tekst wyświetlany na przycisku. |
icon |
Obraz ikony. Jeśli ustawiono zarówno |
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ą Opcjonalnie ustaw wartość
W przypadku Na przykład ten kolor oznacza półprzezroczystą czerwień:
|
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 |
Jeśli ustawiona jest wartość |
altText |
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[] |
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:
- Informacje o aplikacjach Google Chat znajdziesz w artykule Projektowanie dynamicznych, interaktywnych i spójnych interfejsów użytkownika za pomocą kart.
- Informacje o dodatkach do Google Workspace znajdziesz w artykule Interfejsy kart.
Przykład: wiadomość z kartą w aplikacji Google Chat
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 |
Nagłówek karty. Nagłówek zwykle zawiera obraz na początku i tytuł. Nagłówki są zawsze wyświetlane u góry karty. |
sections[] |
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 |
Styl separatora między sekcjami. |
cardActions[] |
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 Na przykład ten kod JSON tworzy menu działań karty z opcjami
|
name |
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 |
Stała stopka wyświetlana u dołu tej karty. Ustawienie 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 |
W dodatkach do Google Workspace ustawia właściwości wyświetlania elementu Nieobsługiwane przez aplikacje do obsługi czatu. |
peekCardHeader |
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 |
Etykieta wyświetlana jako pozycja menu czynności. |
onClick |
Działanie |
Nagłówek karty
Reprezentuje nagłówek karty. Przykład w aplikacjach Google Chat znajdziesz w sekcji Nagłówek karty.
Pola | |
---|---|
title |
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 |
Podtytuł karty. Jeśli podasz wartość, pojawi się w osobnym wierszu pod |
imageType |
Kształt użyty do przycięcia obrazu. |
imageUrl |
Adres URL HTTPS obrazu w nagłówku karty. |
imageAltText |
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 |
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[] |
Wszystkie widżety w sekcji. Musi zawierać co najmniej 1 widżet. |
collapsible |
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 |
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 |
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[] |
Tablica kolumn. Na karcie lub w oknie możesz umieścić maksymalnie 2 kolumny. |
Kolumna
Kolumna.
Pola | |
---|---|
horizontalSizeStyle |
Określa sposób wypełniania kolumny na szerokość karty. |
horizontalAlignment |
Określa, czy widżety mają być wyrównywane do lewej, do prawej czy do środka kolumny. |
verticalAlignment |
Określa, czy widżety mają być wyrównywane u góry, na dole czy do środka kolumny. |
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
|
|
textParagraph |
Widżet |
image |
Widżet |
decoratedText |
Widżet |
buttonList |
Widżet |
textInput |
Widżet |
selectionInput |
Widżet |
dateTimePicker |
Widżet |
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 |
Nazwa, dzięki której element Szczegółowe informacje o pracy z danymi wpisywanymi w formularzach znajdziesz w artykule Odbieranie danych z formularzy. |
label |
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 |
type |
Określa, czy widżet obsługuje wpisywanie daty, godziny czy daty i godziny. |
valueMsEpoch |
Wartość domyślna wyświetlana w widżecie w milisekundach od czasu uniksowego. Określ wartość na podstawie typu selektora (
|
timezoneOffsetDate |
Liczba określająca przesunięcie strefy czasowej względem UTC (w minutach). Jeśli zasada jest skonfigurowana, |
onChangeAction |
Wywoływane, gdy użytkownik kliknie Zapisz lub Wyczyść w interfejsie |
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 |
Wycofane na rzecz |
startIcon |
Ikona wyświetlana przed tekstem. |
topLabel |
Tekst widoczny nad pozycją |
text |
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 |
Ustawienie zawijania tekstu. Jeśli ustawiona jest wartość Dotyczy tylko domeny |
bottomLabel |
Tekst widoczny pod nagłówkiem |
onClick |
To działanie jest wywoływane, gdy użytkownik kliknie |
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 |
Przycisk, który użytkownik może kliknąć, aby wywołać określone działanie. |
switchControl |
Widżet przełączania, który użytkownik może kliknąć, aby zmienić swój stan i wywołać działanie. |
endIcon |
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 |
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 |
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 |
Jeśli wybrano opcję |
onChangeAction |
Działanie wykonywane po zmianie stanu przełącznika – na przykład wybór funkcji, która ma zostać uruchomiona. |
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 |
|
schema |
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
. Przykład dotyczący aplikacji do obsługi Google Chat znajdziesz w artykule Siatka.Columns
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 |
Tekst wyświetlany w nagłówku siatki. |
items[] |
Elementy do wyświetlenia w siatce. |
borderStyle |
Styl obramowania, który ma być stosowany do każdego elementu siatki. |
columnCount |
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 |
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 |
Określony przez użytkownika identyfikator tego elementu siatki. Ten identyfikator jest zwracany w parametrach wywołania zwrotnego |
image |
Obraz wyświetlany w elemencie siatki. |
title |
Tytuł elementu siatki. |
subtitle |
Podtytuł elementu siatki. |
layout |
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 |
Opcjonalnie. Opis ikony używanej na potrzeby ułatwień dostępu. Jeśli nie określono inaczej, podawana jest wartość domyślna Jeśli ikona jest ustawiona w |
imageType |
Styl przycinania zastosowany do obrazu. W niektórych przypadkach przycięcie obrazu w formacie |
Pole Unii icons . Ikona wyświetlana w widżecie na karcie. icons może mieć tylko jedną z tych wartości: |
|
knownIcon |
Wyświetla jedną z wbudowanych ikon dostępnych w Google Workspace. Jeśli na przykład chcesz wyświetlać ikonę samolotu, podaj Pełną listę obsługiwanych ikon znajdziesz w sekcji Ikony wbudowane. |
iconUrl |
Wyświetlaj ikonę niestandardową hostowaną pod adresem URL HTTPS. Na przykład:
Obsługiwane typy plików to |
Obraz
Obraz określony za pomocą adresu URL i może zawierać działanie onClick
. Przykład: Obraz.
Pola | |
---|---|
imageUrl |
Adres URL HTTPS hostujący obraz. Na przykład:
|
onClick |
Kliknięcie tego przycisku powoduje uruchomienie tego działania, gdy użytkownik kliknie obraz. |
altText |
Tekst zastępczy tego obrazu, który jest używany na potrzeby ułatwień dostępu. |
Komponent Obraz
Reprezentuje obraz.
Pola | |
---|---|
imageUri |
Adres URL obrazu. |
altText |
Etykieta ułatwień dostępu do obrazu. |
cropStyle |
Styl przycinania, który ma być stosowany do obrazu. |
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 |
Typ przycięcia. |
aspectRatio |
Format obrazu używany przy przycięciach to Oto jak na przykład zastosować format obrazu 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:
Pola | |
---|---|
previewCard |
Karta zawierająca informacje o linku z usługi zewnętrznej. |
title |
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 |
linkPreviewTitle |
Tytuł wyświetlany w podglądzie linku. Jeśli nie są ustawione, w podglądzie linku wyświetlany jest nagłówek elementu |
Powiadomienie
Czynność karty, która wyświetla powiadomienie w aplikacji hosta.
Pola | |
---|---|
text |
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
|
|
action |
Jeśli określisz działanie, zostanie ono wyzwolone przez ten element |
openLink |
Jeśli określisz element |
openDynamicLinkAction |
Dodatek aktywuje to działanie, gdy musi otworzyć link. Różni się to od metody |
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. |
OpenLink
Reprezentuje zdarzenie onClick
, które otwiera hiperlink.
Pola | |
---|---|
url |
Adres URL do otwarcia. |
openAs |
Jak otworzyć link. Nieobsługiwane przez aplikacje do obsługi czatu. |
onClose |
Czy klient zapomni o linku po jego otwarciu, czy będzie go obserwować, aż okno się nie zamknie. Nieobsługiwane przez aplikacje do obsługi czatu. |
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
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 |
|
hostAppAction |
Działania obsługiwane przez poszczególne aplikacje hostujące. |
schema |
To jest pole schematu bez operacji, które może znajdować się w znacznikach na potrzeby sprawdzania składni. |
Działanie
Pola | |
---|---|
navigations[] |
Wypychaj, wyskakuj i aktualizuj wyświetlane karty. |
link |
Natychmiast otwórz link docelowy w nowej karcie lub wyskakującym okienku. |
notification |
Wyświetl powiadomienie użytkownikowi. |
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 |
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 |
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 |
Typ elementów wyświetlanych użytkownikom w widżecie |
items[] |
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 |
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 |
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 |
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 |
Zewnętrzne źródło danych, np. relacyjna baza danych. |
platformDataSource |
Źródło danych z aplikacji hosta Google Workspace. |
Źródło danych platformy
Tylko komunikatory. w przypadku widżetu
, 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. SelectionInput
Pola | |
---|---|
Pole Unii data_source . Źródło danych. data_source może mieć tylko jedną z tych wartości: |
|
commonDataSource |
Widżet |
hostAppDataSource |
Ź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 |
Tekst, który identyfikuje lub opisuje produkt użytkownikom. |
value |
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 |
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 |
W przypadku menu wielokrotnego wyboru jest to adres URL ikony wyświetlany obok pola |
bottomText |
W przypadku menu wielokrotnego wyboru jest to opis tekstowy lub etykieta wyświetlana pod polem |
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:
Przykłady implementacji menu wielokrotnego wyboru znajdziesz na stronie widżetu |
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 |
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 |
Wskazuje, czy stan kart uległ zmianie, a dane istniejących kart są nieaktualne. |
schema |
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[] |
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
|
|
text |
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 |
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 |
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 Wymagany, jeśli |
hintText |
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 |
value |
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 |
Sposób wyświetlania pola do wprowadzania tekstu w interfejsie. Na przykład pole jest jedno- czy wielowierszowe. |
onChangeAction |
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 |
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ć 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ć Jeśli jest określony, |
autoCompleteAction |
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 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 |
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: 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 |
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 |
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 |
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:
|
image |
Wyświetla obraz. Na przykład ten plik JSON tworzy obraz z tekstem alternatywnym:
|
decoratedText |
Wyświetla ozdobiony element tekstowy. Na przykład poniższy kod JSON tworzy ozdobny widżet tekstowy z adresem e-mail:
|
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:
|
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:
W kolejnym przykładzie ten plik JSON tworzy dane wejściowe tekstowe dla języka programowania ze statycznymi sugestiami:
|
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:
|
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:
|
divider |
Wyświetla poziomą linię podziału między widżetami. Na przykład taki kod JSON tworzy separator:
|
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:
|
columns |
Wyświetla do 2 kolumn. Aby uwzględnić więcej niż 2 kolumny lub użyć wierszy, użyj widżetu Na przykład ten plik JSON tworzy 2 kolumny, z których każda zawiera akapity:
|
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. |