Cards v2

Karta

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

Karty obsługują zdefiniowany układ, interaktywne elementy interfejsu, takie jak przyciski, oraz multimedia, takie jak obrazy. Używaj kart, aby przedstawiać szczegółowe informacje, zbierać dane od użytkowników i zachęcać ich do wykonania kolejnego kroku.

Projektuj karty i wyświetlaj ich podgląd za pomocą kreatora kart.

Otwórz kreatora kart

Aby dowiedzieć się, jak tworzyć karty, zapoznaj się z tymi dokumentami:

Przykład: wiadomość na karcie w aplikacji Google Chat

Przykładowa wizytówka

Aby utworzyć przykładową wiadomość do 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/workspace/chat/images/quickstart-app-avatar.png",
           "imageType": "CIRCLE",
           "imageAltText": "Avatar for Sasha"
         },
         "sections": [
           {
             "header": "Contact Info",
             "collapsible": true,
             "uncollapsibleWidgetsCount": 1,
             "widgets": [
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "EMAIL"
                   },
                   "text": "sasha@example.com"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PERSON"
                   },
                   "text": "<font color=\"#80e27e\">Online</font>"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PHONE"
                   },
                   "text": "+1 (555) 555-1234"
                 }
               },
               {
                 "buttonList": {
                   "buttons": [
                     {
                       "text": "Share",
                       "onClick": {
                        "openLink": {
                           "url": "https://example.com/share"
                         }
                       }
                     },
                     {
                       "text": "Edit",
                       "onClick": {
                         "action": {
                           "function": "goToView",
                           "parameters": [
                             {
                               "key": "viewType",
                               "value": "EDIT"
                             }
                           ]
                         }
                       }
                     }
                   ]
                 }
               }
             ]
           }
         ]
       }
    }
  ]
}
Zapis JSON 
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
Pola
header

object (CardHeader)

Nagłówek karty. Nagłówek zwykle zawiera obraz i tytuł. Nagłówki zawsze wyświetlają się u góry karty.

sections[]

object (Section)

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

sectionDividerStyle

enum (DividerStyle)

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

cardActions[]

object (CardAction)

Działania na karcie. Do menu paska narzędzi karty są dodawane działania.

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

Na przykład ten fragment kodu JSON tworzy menu akcji 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 w nawigacji po kartach.

Dostępne w przypadku dodatków Google Workspace i niedostępne w przypadku aplikacji Google Chat.

displayStyle

enum (DisplayStyle)

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

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

peekCardHeader

object (CardHeader)

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

Dostępne w przypadku dodatków Google Workspace i niedostępne w przypadku aplikacji Google Chat.

CardHeader

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

string

Wymagane. Tytuł nagłówka karty. Nagłówek ma stałą wysokość: jeśli określono zarówno tytuł, jak i podtytuł, każdy z nich zajmuje po jednym wierszu. Jeśli podany jest tylko tytuł, zajmuje on obie linie.

subtitle

string

Podtytuł nagłówka karty. Jeśli go podasz, pojawi się w osobnym wierszu pod title.

imageType

enum (ImageType)

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

Dostępne w przypadku aplikacji Google Chat i dodatków do Google Workspace.

imageUrl

string

Adres URL HTTPS obrazu w nagłówku karty.

imageAltText

string

Alternatywny tekst tego obrazu używany w ułatwieniach dostępu.

ImageType

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

Sekcja

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

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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

string

Tekst wyświetlany u góry sekcji. Obsługuje 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 jeden widżet.

collapsible

boolean

Wskazuje, czy sekcję można zwijać.

Sekcji można nie rozwijać, aby ukryć niektóre lub wszystkie widżety, ale użytkownicy mogą je rozwinąć, aby wyświetlić ukryte widżety, klikając Pokaż więcej. Użytkownicy mogą ponownie ukryć widżety, klikając Pokaż mniej.

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

uncollapsibleWidgetsCount

integer

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

Jeśli np. sekcja zawiera 5 widżetów, a uncollapsibleWidgetsCount ma wartość 2, pierwsze 2 widżety są zawsze wyświetlane, a ostatnie trzy są domyślnie zwinięte. Wartość uncollapsibleWidgetsCount jest brana pod uwagę tylko wtedy, gdy collapsible jest równa true.

collapseControl

object (CollapseControl)

Opcjonalnie: Zdefiniuj przycisk rozwijania i zwijania sekcji. Ten przycisk jest widoczny tylko w przypadku zwijania sekcji. Jeśli to pole nie jest skonfigurowane, używany jest przycisk domyślny. Dostępny w przypadku aplikacji Google Chat i niedostępny w przypadku dodatków Google Workspace.

Widżet

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

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

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

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

enum (HorizontalAlignment)

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

Pole uniidata. Widget może zawierać tylko jeden z tych elementów. Aby wyświetlać więcej elementów, możesz użyć kilku pól widgeta. datamoże być 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 ciąg JSON tworzy tekst pogrubiony: 

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

object (Image)

Wyświetla obraz.

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

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

object (DecoratedText)

Wyświetla ozdobiony element tekstowy.

Na przykład ten kod JSON tworzy ozdobiony 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 ten kod JSON tworzy 2 przyciski. Pierwszy to niebieski przycisk tekstowy, a drugi to przycisk obrazu, który otwiera link: 

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

object (TextInput)

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

Na przykład ten kod JSON tworzy pole tekstowe na adres e-mail: 

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

Kolejny przykład to przykładowy kod JSON, który tworzy pole 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. Elementy sterujące wyborem mogą być polami wyboru, przyciskami opcji, przełącznikami lub menu.

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 wpisanie daty, godziny lub daty i godziny.

Na przykład ten plik JSON tworzy selektor daty i godziny w celu zaplanowania spotkania: 

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

object (Divider)

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

Na przykład ten kod JSON tworzy separator: 

"divider": {
}
grid

object (Grid)

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

Siatka może zawierać dowolną liczbę kolumn i elementów. Liczba wierszy jest określana przez górną granicę liczby elementów podzieloną przez liczbę kolumn. Siatka z 10 elementami i 2 kolumnami ma 5 wierszy. Siatka z 11 elementami i 2 kolumnami ma 6 wierszy.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

Na przykład ten kod JSON tworzy siatkę 2 kolumn 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 maksymalnie 2 kolumny.

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

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

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

object (ChipList)

Lista elementów.

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

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

Dostępne w aplikacjach Google Chat i niedostępne w przypadku dodatków do Google Workspace.

TextParagraph

Akapit z tekstem, który można sformatować. Przykład w aplikacji Google Chat znajdziesz w sekcji Dodawanie akapitu sformatowanego tekstu. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatkach do Google Workspace.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

Zapis JSON 
{
  "text": string,
  "maxLines": integer
}
Pola
text

string

Tekst wyświetlany w widżecie.

maxLines

integer

Maksymalna liczba wierszy tekstu wyświetlanych w widżecie. Jeśli tekst przekracza określoną maksymalną liczbę wierszy, nadmiarowe treści są ukryte za pomocą przycisku Pokaż więcej. Jeśli tekst jest krótszy niż określona maksymalna liczba wierszy, przycisk pokaż więcej nie jest wyświetlany.

Wartość domyślna to 0, co oznacza, że wyświetlany jest cały kontekst. Wartości ujemne są ignorowane. Dostępny w przypadku aplikacji Google Chat i niedostępny w przypadku dodatków Google Workspace.

Obraz

Obraz, który jest określony za pomocą adresu URL i może mieć działanie onClick. Przykład: Dodawanie obrazu.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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

string

Adres URL HTTPS, który hostuje obraz.

Na przykład: 

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

object (OnClick)

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

altText

string

Alternatywny tekst tego obrazu używany w ułatwieniach dostępu.

OnClick

Określa sposób działania, gdy użytkownicy klikną element interaktywny na karcie, np. przycisk.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

Zapis JSON 
{

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

Pole unii data.

datamoże być tylko jedną z tych wartości:

action

object (Action)

Jeśli określisz działanie, onClick spowoduje wywołanie działania.

card

object (Card)

Po kliknięciu nowa karta jest dodawana do stosu kart (jeśli jest to określone).

Dostępna w przypadku dodatków Google Workspace i niedostępna w przypadku aplikacji Google Chat.

overflowMenu

object (OverflowMenu)

Jeśli zostanie określony, onClick otworzy rozszerzone menu. Dostępny w przypadku aplikacji Google Chat i niedostępny w przypadku dodatków Google Workspace.

Działanie

Czynność, która opisuje działanie po przesłaniu formularza. Możesz na przykład wywołać skrypt Apps Script, aby obsłużyć formularz. Jeśli działanie zostanie wywołane, wartości z formularza zostaną przesłane do serwera.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

string

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

Przykładowe zastosowanie znajdziesz w sekcji Czytanie danych z formularza.

parameters[]

object (ActionParameter)

Lista parametrów działań.

loadIndicator

enum (LoadIndicator)

Określa wskaźnik ładowania wyświetlany podczas wywoływania działania.

persistValues

boolean

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

Jeśli true, wartości w formularzu pozostają po wywołaniu działania. Aby umożliwić użytkownikowi wprowadzanie zmian podczas przetwarzania działania, ustaw wartość parametru LoadIndicator na NONE. W przypadku wiadomości z karty w aplikacjach do obsługi czatu musisz też ustawićResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseTypeResponseType

Jeśli wartość jest false, wartości w formularzu są wyczyszczone po wywołaniu działania. Aby uniemożliwić użytkownikowi wprowadzanie zmian w trakcie przetwarzania działania, ustaw LoadIndicator na SPINNER.

interaction

enum (Interaction)

Opcjonalnie: Wymagane przy otwieraniu okna.

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

Jeśli nie określono inaczej, aplikacja zareaguje, wykonując zwykle działanie action, np. otwierając link lub uruchamiając funkcję.

Gdy określisz interaction, aplikacja będzie mogła odpowiadać na specjalne, interaktywne sposoby. Jeśli na przykład ustawisz interaction na OPEN_DIALOG, aplikacja może otwierać okno. Jeśli ją określisz, wskaźnik wczytywania nie będzie się wyświetlał. Jeśli określisz dodatek w przypadku dodatku, cała karta będzie usunięta i nic nie będzie widoczne w kliencie.

Dostępne w aplikacjach Google Chat i niedostępne w przypadku dodatków do Google Workspace.

requiredWidgets[]

string

Opcjonalnie. Wypełnij tę listę nazwami widżetów, których ta akcja potrzebuje do prawidłowego przesłania zgłoszenia.

Jeśli podczas wywołania tego działania wymienione tu widżety nie mają wartości, przesłanie formularza zostanie przerwane.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

allWidgetsAreRequired

boolean

Opcjonalnie. Jeśli tak, wszystkie widżety są uznawane za wymagane w ramach tego działania.

Dostępne w przypadku aplikacji Google Chat i dodatków do Google Workspace.

ActionParameter

Lista parametrów ciągu znaków, które mają być podawane po wywołaniu metody działania. Możesz na przykład umieścić 3 przyciski drzemki: drzemka teraz, drzemka za 1 dzień i drzemka w następnym tygodniu. Możesz użyć parametru action method = snooze(), który przekazuje typ drzemki i czas drzemki na liście parametrów ciągu.

Więcej informacji znajdziesz w artykule CommonEventObject.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

string

Nazwa parametru skryptu działania.

value

string

Wartość parametru.

LoadIndicator

Określa wskaźnik ładowania wyświetlany podczas wywoływania działania.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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

Interakcja

Opcjonalnie: Wymagane przy otwieraniu okna.

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

Jeśli nie jest określony, aplikacja reaguje, wykonującactionjak na przykład otwieranie linku lub uruchamianie funkcji.

Gdy określisz interaction, aplikacja będzie mogła odpowiadać na specjalne, interaktywne sposoby. Jeśli na przykład ustawisz interaction na OPEN_DIALOG, aplikacja może otwierać okno.

Jeśli ją określisz, wskaźnik wczytywania nie będzie się wyświetlał. Jeśli jest to określone w przypadku dodatku, cała karta jest usuwana i nic nie jest wyświetlane w kliencie.

Dostępne w aplikacjach Google Chat i niedostępne w przypadku dodatków do Google Workspace.

Wartości w polu enum
INTERACTION_UNSPECIFIED Wartość domyślna. action działa normalnie.
OPEN_DIALOG

Otwiera okno – interfejs oparty na kartach, który aplikacje na czacie wykorzystują do interakcji z użytkownikami.

Obsługiwane tylko przez aplikacje do obsługi czatu w odpowiedzi na kliknięcia przycisków w wiadomościach dotyczących kart. Jeśli określisz dodatek w przypadku dodatku, cała karta będzie usunięta i nic nie będzie widoczne w kliencie.

Dostępny w przypadku aplikacji Google Chat i niedostępny w przypadku dodatków Google Workspace.

OpenAs

Gdy działanie OnClick otwiera link, klient może otworzyć go jako pełnowymiarowe okno (jeśli to ramka używana przez klienta) lub nakładkę (np. wyskakujące okienko). Implementacja zależy od możliwości platformy klienta, a wybrana wartość może zostać zignorowana, jeśli klient jej nie obsługuje. FULL_SIZEjest obsługiwany przez wszystkich klientów.

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

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

OnClose

Co robi klient, gdy link otwarty w wyniku działania OnClick zostaje zamknięty.

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

Jeśli zarówno element obsługiOnOpen, jak i OnClose są ustawione, a platforma klienta nie obsługuje obu wartości, element obsługiOnClose ma pierwszeństwo.

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

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

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

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

OverflowMenu

Widżet wyświetlający wyskakujące menu z co najmniej 1 działaniem, które użytkownicy mogą wywołać. Na przykład wyświetlanie na karcie działań innych niż główne. Możesz użyć tego widżetu, gdy działania nie mieszczą się w dostępnej przestrzeni. Aby go użyć, wybierz ten widżet w akcji OnClick widżetów, które go obsługują. Na przykład w dokumentach: Button.

Dostępne w przypadku aplikacji Google Chat i niedostępne w przypadku dodatków Google Workspace.

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

object (OverflowMenuItem)

Wymagane. Lista opcji menu.

OverflowMenuItem

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

Dostępne w przypadku aplikacji Google Chat i niedostępne w przypadku dodatków Google Workspace.

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

object (Icon)

Ikona wyświetlana przed tekstem.

text

string

Wymagane. Tekst, który identyfikuje lub opisuje produkt dla użytkowników.

onClick

object (OnClick)

Wymagane. Działanie wywoływane po wybraniu opcji menu. Ten element OnClick nie może zawierać OverflowMenu, a wszystkie określone OverflowMenu zostaną usunięte, a element menu wyłączony.

disabled

boolean

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

Ikona

Ikona wyświetlana w widżecie na karcie. Przykłady w przypadku aplikacji Google Chat znajdziesz w sekcji Dodawanie ikony.

Obsługuje wbudowane i niestandardowe ikony.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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

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

string

Opcjonalnie: Opis ikony używanej w ramach ułatwień dostępu. Jeśli wartość nie została określona, podana jest wartość domyślna Button. Zgodnie ze sprawdzoną metodą należy podać opis, który wyjaśnia, co przedstawia ikona, oraz, w stosownych przypadkach, co ona robi. Na przykład: A user's account portrait lub Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/workspace/chat.

Jeśli ikona jest ustawiona w elemencie Button, gdy użytkownik najedzie na przycisk, altText pojawi się jako tekst pomocniczy. Jeśli jednak przycisk zostanie ustawiony również dla właściwości text, wartość altText ikony będzie ignorowana.

imageType

enum (ImageType)

Styl przycinania zastosowany do obrazu. W niektórych przypadkach zastosowanie przycięcia CIRCLEpowoduje, że obraz będzie wyświetlany większy niż wbudowana ikona.

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

string

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

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

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

iconUrl

string

Wyświetlanie niestandardowej ikony hostowanej pod adresem URL HTTPS.

Na przykład: 

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

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

materialIcon

object (MaterialIcon)

Wyświetl jedną z ikon Google Material.

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

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

Dostępny w przypadku aplikacji Google Chat i niedostępny w przypadku dodatków Google Workspace.

MaterialIcon

Ikona w stylu Material Design, która zawiera ponad 2500 opcji.

Aby na przykład wyświetlić ikonę pola wyboru z niestandardową wagą i oceną, wpisz: 

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

Dostępne w aplikacjach Google Chat i niedostępne w przypadku dodatków do Google Workspace.

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

string

Nazwa ikony zdefiniowana w Materiałach Google, np. check_box. Nieprawidłowe nazwy są pomijane i zastępowane pustym ciągiem, co powoduje, że ikona nie jest renderowana.

fill

boolean

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

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

weight

integer

Grubość kreski ikony. Masz do wyboru opcje: {100, 200, 300, 400, 500, 600, 700}. Jeśli nie zostanie podany, wartością domyślną jest 400. Jeśli podasz inną wartość, zostanie użyta wartość domyślna.

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

grade

integer

Grubość linii symbolu zależy od grubości i rodzaju linii. Zmiany oceny są bardziej szczegółowe niż korekty wagi i mają niewielki wpływ na wielkość symbolu. Wybierz jedną z wartości {-25, 0, 200}. Jeśli nie ma tej wartości, domyślnie jest to 0. Jeśli podasz inną wartość, zostanie użyta wartość domyślna.

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

DecoratedText

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

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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)

Wycofane na rzecz startIcon.

startIcon

object (Icon)

Ikona wyświetlana przed tekstem.

topLabel

string

Tekst wyświetlany nad text. Zawsze skraca.

text

string

Wymagane. Tekst główny.

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

wrapText

boolean

Ustawienie zawijania tekstu. Jeśli zaznaczysz opcję true, tekst zostanie przeniesiony i wyświetlony na kilku wierszach. W przeciwnym razie tekst zostanie obcięty.

Dotyczy tylko text, a nie topLabel i bottomLabel.

bottomLabel

string

Tekst, który wyświetla się pod text. Zawsze zawija.

onClick

object (OnClick)

To działanie jest wywoływane, gdy użytkownicy klikną topLabel lub bottomLabel.

Pole uniicontrol. Przycisk, przełącznik, pole wyboru lub obraz wyświetlane po prawej stronie tekstu w widżecie decoratedText. controlmoże być tylko jedną z tych wartości:
button

object (Button)

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

switchControl

object (SwitchControl)

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

endIcon

object (Icon)

Ikona wyświetlana po tekście.

Obsługuje ikony wbudowane i niestandardowe.

Przycisk

Tekst, ikona lub przycisk z tekstem i ikoną, który użytkownicy mogą kliknąć. Przykład użycia aplikacji Google Chat znajdziesz w sekcji Dodawanie przycisku.

Aby obraz był klikalnym przyciskiem, określ atrybut Image (nie ImageComponent) i ustaw działanie onClick.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

string

Tekst wyświetlany na przycisku.

icon

object (Icon)

Ikona wyświetlana wewnątrz przycisku. Jeśli ustawisz zarówno parametr icon, jak i text, ikona pojawi się przed tekstem.

color

object (Color)

Opcjonalnie: Kolor przycisku. Jeśli to pole jest wypełnione, przycisk type ma ustawienie FILLED, a kolory pól text i icon są ustawione na kontrastowe, aby zwiększyć czytelność. Jeśli np. kolor przycisku jest ustawiony na niebieski, tekst lub ikony w przycisku są białe.

Aby ustawić kolor przycisku, określ wartości pól red, green i blue. Wartość musi być liczbą zmiennoprzecinkową z zakresu 0–1 na podstawie wartości koloru RGB, gdzie:0(0/255) oznacza brak koloru, a 1(255/255) – maksymalną intensywność koloru.

W poniższym przykładzie kolor jest ustawiony na czerwony z maksymalną intensywnością: 

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

Pole alpha jest niedostępne w przypadku koloru przycisku. Jeśli jest określone, to pole jest ignorowane.

onClick

object (OnClick)

Wymagane. Działanie, które ma zostać wykonane po kliknięciu przycisku przez użytkownika, np. otwarcie hiperlinku lub wykonanie funkcji niestandardowej.

disabled

boolean

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

altText

string

Tekst alternatywny używany w ułatwieniach dostępu.

Ustaw tekst opisowy, który informuje użytkowników, do czego służy 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 stronie https://developers.google.com/workspace/chat”.

type

enum (Type)

Opcjonalnie: Typ przycisku. Jeśli nie jest ustawiony, typ przycisku przyjmuje domyślnie wartość OUTLINED. Jeśli pole color jest skonfigurowane, typ przycisku jest wymuszony na FILLED, a wartość ustawiona w tym polu jest ignorowana.

Dostępne w przypadku aplikacji Google Chat i niedostępne w przypadku dodatków Google Workspace.

Kolor

Reprezentuje kolor w przestrzeni kolorów RGBA. Ta reprezentacja ma na celu uproszczenie procesu konwersji i zmiany kolorów w różnych językach, a nie ich kompaktowości. Na przykład pola tej reprezentacji można wprost przekazać do konstruktora java.awt.Color w Javie. Można je też łatwo sformatować w metodzie +colorWithRed:green:blue:alpha UIColor w iOS, a przy niewielkim nakładzie pracy można je łatwo sformatować w ciąg CSS rgba() w JavaScripcie.

Ta strona informacyjna nie zawiera informacji o bezwzględnej przestrzeni kolorów, której należy użyć do interpretacji wartości RGB, np. sRGB, Adobe RGB, DCI-P3 i BT.2020. Domyślnie aplikacje powinny przyjąć przestrzeń kolorów sRGB.

Gdy trzeba określić, czy dwa kolory są sobie równe, implementacje, o ile nie określono inaczej, traktują je jako równe, jeśli wszystkie ich wartości czerwonego, zielonego, niebieskiego i alfa różnią się co najwyżej 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 / Obj-C): 

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

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

Przykład (JavaScript): 

// ...

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

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

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

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

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

number

Ilość czerwonego w kolorze jako wartość z zakresu [0, 1].

green

number

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

blue

number

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

alpha

number

Ułamek tego koloru, który powinien zostać zastosowany do piksela. Oznacza to, że ostateczny kolor piksela jest określany za pomocą tej zależności:

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

Oznacza to, że wartość 1,0 odpowiada jednolitym kolorowi, a wartość 0,0 – kolorowi całkowicie przezroczystemu. Zamiast prostego wektora liczby zmiennoprzecinkowej używa ona komunikatu opakowania, aby można było odróżnić wartość domyślną od wartości nieskonfigurowanej. Jeśli go pominiesz, obiekt koloru zostanie wyrenderowany jako jednolity kolor (jak gdyby wartość alfa miała wartość 1,0).

Typ

Opcjonalnie: Typ przycisku. Jeśli pole color jest wypełnione, pole type jest wymuszone do wartości FILLED.

Dostępne w aplikacjach Google Chat i niedostępne w przypadku dodatków do Google Workspace.

Wartości w polu enum
TYPE_UNSPECIFIED Nie używaj. Nie określono.
OUTLINED Przyciski z konturem to przyciski o średnim stopniu podkreślenia. Zazwyczaj zawierają one ważne działania, ale nie są głównymi działaniami w aplikacji Google Chat ani dodatku.
FILLED Wypełniony przycisk ma pojemnik w jednolitym kolorze. Ma on największy wpływ wizualny i jest zalecany w przypadku ważnego i głównego działania w aplikacji Google Chat lub dodatku.
FILLED_TONAL Wypełniony przycisk tonalny stanowi alternatywny środek pomiędzy wypełnionymi i zarysowanymi przyciskami. Są przydatne w sytuacjach, gdy przycisk o niższym priorytecie wymaga nieco większego podkreślenia niż przycisk konturu.
BORDERLESS Przycisk nie ma niewidocznego kontenera w stanie domyślnym. Często używa się go w przypadku działań o najniższym priorytecie, zwłaszcza gdy prezentujesz kilka opcji.

SwitchControl

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

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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

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

string

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

Szczegółowe informacje o pracy z danymi formularza znajdziesz w artykule Odbieranie danych formularza.

value

string

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

Szczegółowe informacje o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych formularza.

selected

boolean

Gdy true, przełącznik jest zaznaczony.

onChangeAction

object (Action)

Działanie, które ma zostać wykonane po zmianie stanu przełącznika, np. jaka funkcja ma zostać uruchomiona.

controlType

enum (ControlType)

Jak przełącznik wygląda w interfejsie

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

ControlType

Jak przełącznik wygląda w interfejsie

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

ButtonList

Lista przycisków rozmieszczonych poziomo. Przykłady w przypadku aplikacji Google Chat znajdziesz w artykule Dodawanie przycisku.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

object (Button)

Tablica przycisków.

TextInput

Pole, w którym użytkownicy mogą wpisywać tekst. Obsługuje sugestie i działania po zmianie. Przykład w aplikacji Google Chat znajdziesz w artykule Dodawanie pola, w którym użytkownik może wpisywać tekst.

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 formularza znajdziesz w artykule Odbieranie danych formularza.

Jeśli chcesz zebrać nieokreślone lub abstrakcyjne dane od użytkowników, użyj wprowadzania tekstowego. Aby zbierać zdefiniowane lub określone dane od użytkowników, użyj widżetu SelectionInput.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

string

Nazwa, pod którą dane wejściowe są rozpoznawane w zdarzeniu wprowadzania tekstu.

Szczegółowe informacje o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych formularza.

label

string

Tekst wyświetlany nad polem tekstowym w interfejsie.

Podaj tekst, który pomoże użytkownikowi podać informacje, których potrzebuje Twoja aplikacja. Jeśli na przykład pytasz czyjś imię, a konkretnie nazwisko, wpisz surname zamiast name.

Wymagany, jeśli właściwość hintText nie jest określona. W przeciwnym razie jest to opcjonalne.

hintText

string

Tekst wyświetlany pod polem do wprowadzania tekstu, który ma ułatwić użytkownikom wpisanie określonej wartości. Ten tekst jest zawsze widoczny.

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

value

string

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

Szczegółowe informacje o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych formularza.

type

enum (Type)

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

onChangeAction

object (Action)

Co zrobić, gdy nastąpi zmiana w polu do wprowadzania tekstu Może to być na przykład dodanie do pola lub usunięcie tekstu.

Przykłady działań to m.in. wykonanie funkcji niestandardowej lub otwarcie okna w Google Chat.

initialSuggestions

object (Suggestions)

Sugerowane wartości, które użytkownicy mogą wpisać. Te wartości pojawiają się, gdy użytkownicy klikają w polu tekstowym. Gdy użytkownicy wpisują tekst, sugerowane wartości są dynamicznie filtrowane, aby pasowały do tego, co wpisują.

Na przykład pole do wprowadzania tekstu w języku programowania może zawierać sugestie Javy, JavaScriptu, Pythona i C++. Gdy użytkownicy zaczną pisać Jav, na liście filtrów sugestii wyświetlą się tylko Java i JavaScript.

Sugerowane wartości pomagają zachęcać użytkowników do wpisywania wartości, które Twoja aplikacja może zrozumieć. W przypadku JavaScript niektórzy użytkownicy mogą wpisaćjavascript, a innijava script. Sugerowanie JavaScript może ujednolicić sposób interakcji użytkowników z aplikacją.

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

autoCompleteAction

object (Action)

Opcjonalnie: Określ, co ma się stać, gdy pole do wprowadzania tekstu będzie podpowiadać użytkownikom, którzy z niego korzystają.

Jeśli nie podasz żadnej wartości, sugestie zostaną ustawione przez initialSuggestions i przetworzone przez klienta.

Jeśli określisz działanie, aplikacja wykona określone tutaj działanie, np. uruchomi funkcję niestandardową.

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

validation

object (Validation)

Określ weryfikację wymaganą w tym polu tekstowym.

Dostępne w przypadku aplikacji Google Chat i dodatków do Google Workspace.

placeholderText

string

Tekst, który pojawia się w polu tekstowym, gdy 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.

Dostępny w przypadku aplikacji Google Chat i niedostępny w przypadku dodatków Google Workspace.

Typ

Jak pole tekstowe wygląda w interfejsie Na przykład czy jest to pole tekstowe jednowierszowe czy wielowierszowe. Jeśli właściwość initialSuggestions jest określona, type ma zawsze wartość SINGLE_LINE, nawet jeśli ustawiona jest wartość MULTIPLE_LINE.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

Wartości w polu enum
SINGLE_LINE Pole tekstowe ma stałą wysokość równą 1 wierszowi.
MULTIPLE_LINE Pole do wprowadzania tekstu ma stałą wysokość wielu wierszy.

RenderActions

Zestaw instrukcji renderowania, które informują kartę, że ma wykonać działanie, albo informuje aplikację hosta dodatku bądź aplikację Google Chat, by wykonała specyficzną czynność w danej aplikacji.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

Pola
action

Action

Działanie

Pola
navigations[]

Navigation

Przekaż lub zaktualizuj wyświetlone karty.

Dodaj nową kartę do stosu (przejdź dalej). Aplikacje do obsługi czatu są dostępne tylko na ekranie głównym aplikacji.

Dostępne w przypadku aplikacji Google Chat i dodatków do Google Workspace.

navigations: {
  pushCard: CARD
}

Zastąp górną kartę nową kartą. W przypadku aplikacji Google Chat dostępne tylko na stronie głównej aplikacji.

Dostępne w przypadku aplikacji Google Chat i dodatków do Google Workspace.

navigations: {
  updateCard: CARD
}

Sugestie

Sugerowane wartości, które użytkownicy mogą wpisać. Te wartości pojawiają się, gdy użytkownicy klikają w polu tekstowym. Gdy użytkownicy wpisują tekst, sugerowane wartości są dynamicznie filtrowane, aby pasowały do tego, co wpisują.

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

Sugerowane wartości pomagają użytkownikom wpisywać wartości, które Twoja aplikacja może zinterpretować. W przypadku JavaScriptu niektórzy użytkownicy mogą wpisać javascript, a inni java script. Sugerowanie JavaScript może ujednolicić sposób interakcji użytkowników z Twoją aplikacją.

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

object (SuggestionItem)

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

SuggestionItem

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

Zapis JSON 
{

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

Pole sumy content.

contentmoże być tylko jedną z tych wartości:

text

string

Wartość sugerowanego tekstu w polu tekstowym. Jest to równoznaczne z tym, co użytkownicy wpisują samodzielnie.

Weryfikacja

Reprezentuje dane potrzebne do zweryfikowania widżetu, do którego jest dołączony.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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

integer

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

inputType

enum (InputType)

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

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

InputType

Typ widżetu wejściowego.

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

SelectionInput

Widżet tworzący co najmniej 1 element interfejsu, który użytkownicy mogą wybrać. Może to być na przykład menu lub pola wyboru. Możesz używać tego widżetu do zbierania danych, które można przewidzieć lub wyliczyć. Przykład w przypadku aplikacji Google Chat znajdziesz w artykule Dodawanie możliwych do wyboru elementów interfejsu.

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

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

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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

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

string

Wymagane. Nazwa identyfikująca dane wejściowe w zdarzeniu danych wejściowych w formularzu.

Szczegółowe informacje o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych formularza.

label

string

Tekst wyświetlany nad polem wyboru w interfejsie.

Podaj tekst, który pomoże użytkownikowi podać informacje wymagane przez aplikację. Jeśli na przykład użytkownicy wybierają z menu pilność zgłoszenia do pracy, etykieta może brzmieć „Pilne” lub „Wybierz pilność”.

type

enum (SelectionType)

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

items[]

object (SelectionItem)

Tablica elementów do wyboru. Może to być np. tablica przycisków opcji lub pól wyboru. Obsługuje do 100 elementów.

onChangeAction

object (Action)

Jeśli określisz formularz, zostanie on przesłany po zmianie wyboru. Jeśli nie określisz tego parametru, musisz podać oddzielny przycisk, który przesyła formularz.

Szczegółowe informacje o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych formularza.

multiSelectMaxSelectedItems

integer

W przypadku menu z wieloma opcjami maksymalna liczba elementów, które użytkownik może wybrać. Minimalna wartość to 1 element. Jeśli nie podasz tej wartości, zostanie użyta domyślna liczba 3.

multiSelectMinQueryLength

integer

W przypadku menu z wielokrotnie wybieranymi opcjami liczba znaków tekstowych wpisanych przez użytkownika przed wykonaniem przez aplikację zapytania o autouzupełnianie i wyświetleniem sugerowanych pozycji w menu.

Jeśli nie określono inaczej, domyślna wartość to 0 znaków w przypadku statycznych źródeł danych i 3 znaki w przypadku zewnętrznych źródeł danych.

validation

object (Validation)

W przypadku menu rozwijanych weryfikacja tego pola wyboru.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

Pole sumy multi_select_data_source. W przypadku menu wyboru wielokrotnego jest to źródło danych, które wypełnia elementy zaznaczenia.

Dostępny w przypadku aplikacji Google Chat i niedostępny w przypadku dodatków Google Workspace. multi_select_data_sourcemoż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 Google Workspace.

SelectionType

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

Każdy element danych wejściowych obsługuje jeden typ wyboru. Na przykład nie można mieszać pól wyboru ani przełączników.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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

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

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

  • Dane statyczne: elementy są określone jako obiekty SelectionItemw widżecie. Do 100 elementów.
  • Dane Google Workspace: elementy są wypełniane na podstawie danych z Google Workspace, takich jak użytkownicy Google Workspace czy pokoje Google Chat.
  • Dane zewnętrzne: elementy są wypełniane z zewnętrznego źródła danych spoza Google Workspace.

Przykłady implementacji menu wielokrotnego wyboru znajdziesz w sekcji Dodawanie menu wyboru wielokrotnego.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

SelectionItem

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

string

Tekst, który identyfikuje lub opisuje produkt dla użytkowników.

value

string

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

Szczegółowe informacje o pracy z danymi wejściowymi formularza znajdziesz w artykule Odbieranie danych formularza.

selected

boolean

Określa, czy element jest wybierany domyślnie. Jeśli pole wyboru akceptuje tylko jedną wartość (np. w przypadku przycisków lub menu), ustaw to pole tylko dla 1 elementu.

startIconUri

string

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

bottomText

string

W przypadku menu z wieloma opcjami tekstowy opis lub etykieta wyświetlane pod polem textelementu.

PlatformDataSource

W przypadku widżetu SelectionInput, który korzysta z menu wielokrotnego wyboru, jest to źródło danych z Google Workspace. Służy do wypełniania elementów w menu wielokrotnego wyboru.

Dostępne w aplikacjach Google Chat i niedostępne w przypadku dodatków do Google Workspace.

Zapis JSON 
{

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

enum (CommonDataSource)

Źródło danych współdzielone przez wszystkie aplikacje Google Workspace, takie jak użytkownicy w organizacji Google Workspace.

hostAppDataSource

object (HostAppDataSourceMarkup)

Źródło danych unikalne dla aplikacji hosta Google Workspace, takie jak pokoje w Google Chat.

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

CommonDataSource

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

Dostępne w przypadku aplikacji Google Chat i niedostępne w przypadku dodatków Google Workspace.

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

HostAppDataSourceMarkup

W przypadku widżetu SelectionInput, który korzysta z menu wielokrotnego wyboru, jest to źródło danych z aplikacji Google Workspace. Źródło danych wypełnia elementy zaznaczenia menu wielokrotnego wyboru.

Dostępne w przypadku aplikacji Google Chat i niedostępne w przypadku dodatków Google Workspace.

Zapis JSON 
{

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

object (ChatClientDataSourceMarkup)

Źródło danych z Google Chat.

ChatClientDataSourceMarkup

W przypadku widżetu SelectionInput, który korzysta z menu wielokrotnego wyboru, jest to źródło danych z Google Chat. Źródło danych wypełnia elementy wyboru w menu wielokrotnego wyboru. Użytkownik może na przykład wybrać pokoje Google Chat, do których należy.

Dostępne w przypadku aplikacji Google Chat i niedostępne w przypadku dodatków Google Workspace.

Zapis JSON 
{

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

object (SpaceDataSource)

Pokoje Google Chat, do których należy użytkownik.

SpaceDataSource

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

Dostępne w aplikacjach Google Chat i niedostępne w przypadku dodatków do Google Workspace.

Zapis JSON 
{
  "defaultToCurrentSpace": boolean
}
Pola
defaultToCurrentSpace

boolean

Jeśli ustawisz tę opcję na true, menu wielokrotnego wyboru domyślnie wybierze bieżący pokój Google Chat jako element.

DateTimePicker

Umożliwia użytkownikom wpisanie daty, godziny lub obu tych informacji. Przykłady w przypadku aplikacji Google Chat: Zezwalanie użytkownikowi na wybór daty i godziny.

Użytkownicy mogą wpisywać tekst lub używać selektora do wybierania dat i godzin. Jeśli użytkownicy wpiszą nieprawidłową datę lub godzinę, w selektorze pojawi się komunikat o błędzie z prośbą o prawidłowe wpisanie informacji.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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

string

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

Szczegółowe informacje o pracy z danymi formularza znajdziesz w artykule Odbieranie danych formularza.

label

string

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

type

enum (DateTimePickerType)

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

valueMsEpoch

string (int64 format)

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

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

  • DATE_AND_TIME: data i godzina w formacie kalendarzowym w UTC. Na przykład aby uwzględnić 1 stycznia 2023 r. o 12:00 czasu UTC, użyj właściwości 1672574400000.
  • DATE_ONLY: dzień kalendarzowy o godzinie 00:00:00 czasu UTC. Na przykład do określenia daty 1 stycznia 2023 r. użyj 1672531200000.
  • TIME_ONLY : czas w strefie czasowej UTC. Na przykład, aby reprezentować godzinę 12:00, użyj wartości 43200000 (lub 12 * 60 * 60 * 1000).
timezoneOffsetDate

integer

Liczba reprezentująca przesunięcie strefy czasowej od czasu UTC (w minutach). Jeśli jest ustawiona, valueMsEpoch jest wyświetlany w określonej strefie czasowej. Jeśli nie jest skonfigurowana, przyjmuje się domyślne ustawienie strefy czasowej użytkownika.

onChangeAction

object (Action)

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

validation

object (Validation)

Opcjonalnie. Określ weryfikację wymaganą dla tego selektora daty.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

DateTimePickerType

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

Separator

Ten typ nie zawiera pól.

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

Na przykład ten fragment kodu JSON tworzy separator: 

"divider": {}

Siatka

Wyświetla siatkę z kolekcją elementów. Elementy mogą zawierać tylko tekst lub obrazy. W przypadku kolumn elastycznych lub jeśli chcesz uwzględnić więcej niż tekst i obrazy, użyj właściwości Columns. Przykład w przypadku aplikacji Google Chat znajdziesz w artykule Wyświetlanie siatki z kolekcją elementów.

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

Na przykład ten plik JSON tworzy siatkę z 2 kolumnami z jednym 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 jest określone, używana jest wartość domyślna, która różni się w zależności od tego, gdzie jest wyświetlana siatka (w dialogu lub w usługach towarzyszących).

onClick

object (OnClick)

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

GridItem

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

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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 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 do użycia w elemencie siatki.

ImageComponent

Reprezentuje obraz.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

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

string

Adres URL obrazu.

altText

string

Etykieta ułatwień dostępu dla obrazu.

cropStyle

object (ImageCropStyle)

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

borderStyle

object (BorderStyle)

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

ImageCropStyle

Reprezentuje styl przycinania zastosowany do obrazu.

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace.

Na przykład w ten sposób możesz zastosować współczynnik proporcji 16:9: 

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

enum (ImageCropType)

Typ przycięcia.

aspectRatio

number

Format obrazu, który ma być użyty, jeśli typ przycięcia to RECTANGLE_CUSTOM.

Oto przykład zastosowania formatu 16:9: 

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

ImageCropType

Reprezentuje styl przycinania zastosowany do obrazu.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

Wartości w polu enum
IMAGE_CROP_TYPE_UNSPECIFIED Nie używaj. Nie określono.
SQUARE Wartość domyślna. Stosuje przycięcie do kwadratu.
CIRCLE Powoduje przycięcie na planie koła.
RECTANGLE_CUSTOM Stosuje przycięcie prostokątne z niestandardowym formatem. Ustaw niestandardowy format obrazu za pomocą aspectRatio.
RECTANGLE_4_3 Stosuje prostokątne przycięcie o współczynniku proporcji 4:3.

BorderStyle

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

enum (BorderType)

Typ obramowania.

strokeColor

object (Color)

Kolory, których należy używać, gdy typ to BORDER_TYPE_STROKE.

Aby ustawić kolor kreski, określ wartość w polach red, green i blue. Wartość musi być liczbą zmiennoprzecinkową z zakresu 0–1 na podstawie wartości koloru RGB, gdzie:0(0/255) oznacza brak koloru, a 1(255/255) – maksymalną intensywność koloru.

Na przykład następujący kod ustawia kolor czerwony na maksymalną intensywność: 

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

Pole alpha jest niedostępne w przypadku koloru kreski. Jeśli jest określone, to pole jest ignorowane.

cornerRadius

integer

Promień narożnika obramowania.

BorderType

Reprezentuje typy obramowania stosowane do widżetów.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

GridItemLayout

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

Kolumny

Widżet Columns wyświetla maksymalnie 2 kolumny na karcie lub w oknie. Do każdej kolumny możesz dodawać widżety – wyświetlają się one w określonej kolejności. Przykłady w aplikacjach Google Chat: Wyświetlanie kart i dialogów w kolumnach.

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

Kolumny są wyświetlane obok siebie. Szerokość każdej kolumny możesz dostosować za pomocą pola HorizontalSizeStyle. Jeśli ekran użytkownika jest za wąski, druga kolumna zostanie przeniesiona pod pierwszą:

  • W przypadku internetu druga kolumna zawija się, jeśli szerokość ekranu jest mniejsza niż lub równa 480 pikseli.
  • Na urządzeniach z iOS druga kolumna jest przenoszona, jeśli szerokość ekranu jest mniejsza lub równa 300 punktom.
  • Na urządzeniach z Androidem druga kolumna zawija się, jeśli szerokość ekranu jest mniejsza niż lub równa 320 dp.

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

Dostępny w przypadku aplikacji Google Chat i dodatków do Google Workspace. Interfejsy API dodatków, które obsługują kolumny, to m.in.:

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

object (Column)

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

Kolumna

Kolumna

Dodatki do Google Workspace i aplikacje Google Chat

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

enum (HorizontalSizeStyle)

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

horizontalAlignment

enum (HorizontalAlignment)

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

verticalAlignment

enum (VerticalAlignment)

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

widgets[]

object (Widgets)

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

HorizontalSizeStyle

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

Dodatki i aplikacje do czatu Google Workspace

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ń do 70% szerokości karty. Jeśli obie kolumny mają wartośćFILL_AVAILABLE_SPACE, każda z nich zajmuje 50% przestrzeni.
FILL_MINIMUM_SPACE Kolumna zajmuje najmniejszą możliwą ilość miejsca i nie więcej niż 30% szerokości karty.

HorizontalAlignment

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

Dostępne w przypadku aplikacji Google Chat i niedostępne w przypadku dodatków Google Workspace.

Wartości w polu enum
HORIZONTAL_ALIGNMENT_UNSPECIFIED Nie używaj. Nie określono.
START Wartość domyślna. Dopasowuje widżety do pozycji początkowej kolumny. W przypadku układów od lewej do prawej wyrównuje się 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 strony. W przypadku układów od prawej do lewej wyrównuje widżety do lewej.

VerticalAlignment

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

Dodatki do Google Workspace i aplikacje Google Chat

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

Widżety

obsługiwane widżety, które można uwzględnić w kolumnie;

Dodatki do Google Workspace i aplikacje Google Chat

Zapis JSON 
{

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

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

chipList

object (ChipList)

Widżet ChipList. Dostępne w aplikacjach Google Chat i niedostępne w przypadku dodatków do Google Workspace.

ChipList

Lista elementów ułożonych poziomo, która może być przewijana poziomo lub przenoszona na następny wiersz.

Dostępne w przypadku aplikacji Google Chat i niedostępne w przypadku dodatków Google Workspace.

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

enum (Layout)

Określony układ listy elementów.

chips[]

object (Chip)

Tablica elementów.

Układ

Układ listy elementów.

Wartości w polu enum
LAYOUT_UNSPECIFIED Nie używaj. Nie określono.
WRAPPED Wartość domyślna. Jeśli nie ma wystarczająco dużo miejsca na poziome, lista elementów jest przenoszona na kolejny wiersz.
HORIZONTAL_SCROLLABLE Jeśli nie mieszczą się w dostępnej przestrzeni, elementy można przewijać poziomo.

Układ scalony

Tekst, ikona lub element tekstowo-ikonowy, który użytkownicy mogą kliknąć.

Dostępne w aplikacjach Google Chat i niedostępne w przypadku dodatków do Google Workspace.

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

object (Icon)

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

label

string

Tekst wyświetlany wewnątrz elementu.

onClick

object (OnClick)

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

enabled
(deprecated)

boolean

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

disabled

boolean

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

altText

string

Tekst alternatywny używany w ułatwieniach dostępu.

Ustaw tekst opisowy, który informuje użytkowników, do czego służy dany element. Jeśli na przykład element otwiera hiperlink, napisz: „Otwiera nową kartę przeglądarki i powoduje przejście do dokumentacji Google Chat dla deweloperów na stronie https://developers.google.com/workspace/chat&quot;”.

CollapseControl

Reprezentuje element sterujący zwijaniem i rozwijaniem. Dostępne w aplikacjach Google Chat i niedostępne w przypadku dodatków do Google Workspace.

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

enum (HorizontalAlignment)

Ustawienie poziome przycisku rozwijania i zwijania.

expandButton

object (Button)

Opcjonalnie: Zdefiniuj przycisk konfigurowalny, aby rozwinąć tę sekcję. Należy ustawić pola expandButton i collapseButton. Tylko jedno ustawienie pola nie będzie działać. Jeśli to pole nie jest skonfigurowane, używany jest przycisk domyślny.

collapseButton

object (Button)

Opcjonalnie: Zdefiniuj konfigurowalny przycisk, aby zwinąć sekcję. Należy ustawić wartości w polach „expandButton” i „ZwińButton). Tylko 1 z nich nie zostanie zastosowany. Jeśli to pole nie jest skonfigurowane, używany jest przycisk domyślny.

DividerStyle

Styl podziału karty. Obecnie służy tylko do rozdzielników między sekcjami karty.

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

Wartości w polu enum
DIVIDER_STYLE_UNSPECIFIED Nie używaj. Nie określono.
SOLID_DIVIDER Opcja domyślna. Renderuj separator ciągły.
NO_DIVIDER Jeśli jest ustawiony, separator nie jest renderowany. Ten styl całkowicie usuwa separator z projektu. Wynik jest odpowiednikiem tego, że w ogóle nie dodano separatora.

CardAction

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

Dostępne dla dodatków Google Workspace i niedostępne dla aplikacji Google Chat.

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

string

Etykieta wyświetlana jako element menu działania.

onClick

object (OnClick)

Działanie onClick dla tego działania.

CardFixedFooter

Stała (przyklejona) stopka wyświetlana u dołu karty.

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

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

Dostępne dla aplikacji Google Chat i dodatków do Google Workspace.

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

object (Button)

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

secondaryButton

object (Button)

Przycisk drugiego przycisku stałej stopki. Przycisk musi być przyciskiem tekstowym z ustawionym tekstem i kolorem. Jeśli ustawiona jest wartość secondaryButton, musisz też ustawić primaryButton.

DisplayStyle

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

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

Wartości w polu enum
DISPLAY_STYLE_UNSPECIFIED Nie używaj. Nie określono.
PEEK Nagłówek karty pojawia się u dołu paska bocznego, częściowo zakrywając kartę znajdującą się na szczycie stosu. Kliknięcie nagłówka powoduje umieszczenie karty na stosie kart. Jeśli karta nie ma nagłówka, zamiast niego używany jest wygenerowany nagłówek.
REPLACE Wartość domyślna. Karta jest wyświetlana, zastępując widok górnej karty w stosie kart.