Na tej stronie objaśniamy, jak dodawać widżety i elementy interfejsu do wiadomości na kartach lub w oknach aby użytkownicy mogli korzystać z Twojej aplikacji Google Chat, np. przez klikając przycisk lub przesyłając informacje.
Za pomocą kreatora kart możesz zaprojektować i wyświetlić podgląd wiadomości kart JSON przeznaczonych do aplikacji Google Chat:
Otwórz kreator kartWymagania wstępne
Dodaj przycisk
Widżet ButtonList
wyświetla zestaw przycisków. Przyciski mogą zawierać tekst,
lub zarówno tekst, jak i ikonę. Każdy
Button
obsługuje
OnClick działanie
w momencie kliknięcia przycisku. Na przykład:
- Otwórz hiperlink z:
OpenLinkw celu dostarczenia użytkownikom dodatkowych informacji. - Uruchom
actionktóry uruchamia niestandardową funkcję, taką jak wywoływanie interfejsu API.
W przypadku ułatwień dostępu przyciski obsługują tekst alternatywny.
Dodaj przycisk uruchamiający funkcję niestandardową
Poniżej znajduje się karta zawierająca widżet ButtonList z 2 przyciskami.
Jeden przycisk otwiera dokumentację dla deweloperów Google Chat w nowej karcie.
Inny przycisk uruchamia funkcję niestandardową o nazwie goToView() i przekazuje
viewType="BIRD EYE VIEW".
Dodaj przycisk z niestandardowym kolorem i nieaktywny przycisk
Aby uniemożliwić użytkownikom klikanie przycisków, skonfiguruj "disabled": "true".
Poniżej wyświetla się karta składająca się z widżetu ButtonList z dwoma
przyciskami. Jeden z przycisków używa funkcji
Pole Color
aby dostosować tło przycisku
koloru. Drugi przycisk jest dezaktywowany polem Disabled, które
uniemożliwia użytkownikowi kliknięcie przycisku i wykonanie funkcji.
Dodawanie przycisku z ikoną
Poniżej znajduje się karta składająca się z widżetu ButtonList z 2 ikonami
Button widżety. Jeden z przycisków używa funkcji
knownIcon
aby wyświetlić wbudowaną ikonę poczty e-mail Google Chat. Drugi przycisk korzysta z funkcji
iconUrl, aby wyświetlić
niestandardowy widżet ikon.
Dodaj przycisk z ikoną i tekstem
Poniżej wyświetli się karta zawierająca widżet ButtonList z prośbą o potwierdzenie
użytkownika do wysłania e-maila. Pierwszy z nich zawiera ikonę e-maila,
drugi przycisk wyświetla tekst. Użytkownik może kliknąć ikonę lub tekst
przycisk uruchamiania funkcji sendEmail.
Dodawanie elementów interfejsu do wyboru
Widżet SelectionInput
zawiera zestaw elementów, które można wybrać, takich jak pola wyboru, opcje, przełączniki,
lub za pomocą menu rozwijanego. Możesz używać tego widżetu
aby zbierać zdefiniowane
i ustandaryzowane dane od użytkowników. Do zbierania niezdefiniowanych danych
użytkowników, użyj widżetu TextInput.
Widżet SelectionInput obsługuje sugestie, które pomagają użytkownikom wpisywać jednolite dane
danych i działań w przypadku zmiany,
Actions
uruchamianych, gdy nastąpi zmiana w polu do wprowadzania danych, np. w polu użytkownika
wybierając lub odznaczając element.
Aplikacje do obsługi czatu mogą otrzymywać i przetwarzać wartość wybranych elementów. Szczegółowe informacje o pracy z danymi wejściowymi formularza znajdziesz w artykule Informacje o procesach wprowadzane przez użytkowników.
W tej sekcji znajdziesz przykłady kart, które korzystają z widżetu SelectionInput.
W przykładach używane są różne typy danych wejściowych sekcji:
Dodaj pole wyboru
Poniżej wyświetla się okno z prośbą o określenie, czy
do kontaktów służbowych, osobistych lub na oba te sposoby, z widżetem SelectionInput, który
używa pól wyboru:
Dodaj opcję
Poniżej wyświetla się okno z prośbą o określenie, czy
jest przeznaczony do kontaktów zawodowych lub osobistych, korzystając z widżetu SelectionInput, który używa
opcje:
Dodaj przełącznik
Poniżej wyświetla się okno z prośbą o określenie, czy
do kontaktów służbowych, osobistych lub na oba te rodzaje, korzystając z widżetu SelectionInput,
używa przełączników:
Dodaj menu
Poniżej wyświetla się okno z prośbą o określenie, czy
jest przeznaczony do kontaktów zawodowych lub osobistych, korzystając z widżetu SelectionInput, który używa
menu:
Dodaj menu wielokrotnego wyboru
Poniżej wyświetla się okno z prośbą o wybranie kontaktów. w menu wielokrotnego wyboru:
Użyj źródeł danych w menu wielokrotnego wyboru
Z tej sekcji dowiesz się, jak wypełniać dane za pomocą menu wielokrotnego wyboru ze źródeł dynamicznych, takich jak aplikacja Google Workspace czy dane zewnętrzne źródła.
Źródła danych z Google Workspace
Możesz uzupełnić elementy menu wielokrotnego wyboru z tych źródeł danych w Google Workspace:
- Użytkownicy Google Workspace: możesz wypełniać pola tylko użytkowników w tej samej organizacji Google Workspace.
- Pokoje czatu: użytkownik wpisuje elementy podczas wyboru wielokrotnego. mogą wyświetlać i wybierać tylko pokoje, do których należą organizacji Google Workspace.
Aby używać źródeł danych Google Workspace, określ
platformDataSource
. W przeciwieństwie do innych typów wprowadzania zaznaczenia –
SectionItem
ponieważ te elementy są pobierane dynamicznie z
Google Workspace
Poniższy kod przedstawia menu wielokrotnego wyboru z użytkownikami Google Workspace.
Aby zapełnić użytkowników, pole wyboru ustawia wartość commonDataSource na USER:
JSON
{
"selectionInput": {
"name": "contacts",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 5,
"multiSelectMinQueryLength": 1,
"platformDataSource": {
"commonDataSource": "USER"
}
}
}
Ten kod pokazuje menu wielokrotnego wyboru w Google Chat
spacje. Aby wstawić spacje, pole wyboru określa parametr
hostAppDataSource. W menu wyboru wielokrotnego można też
Od defaultToCurrentSpace do true, przez co bieżący pokój jest ustawiony jako domyślny
w menu:
JSON
{
"selectionInput": {
"name": "spaces",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 3,
"multiSelectMinQueryLength": 1,
"platformDataSource": {
"hostAppDataSource": {
"chatDataSource": {
"spaceDataSource": {
"defaultToCurrentSpace": true
}
}
}
}
}
}
Źródła danych spoza Google Workspace
Menu wyboru wielokrotnego może też zawierać elementy z danych innych firm lub danych zewnętrznych źródła. Możesz na przykład użyć menu wielokrotnego wyboru, aby ułatwić użytkownikowi lista potencjalnych klientów generowanych przez system zarządzania relacjami z klientami (CRM).
Aby użyć zewnętrznego źródła danych, użyj pola externalDataSource do:
określ funkcję, która zwraca elementy ze źródła danych.
Aby zmniejszyć liczbę żądań wysyłanych do zewnętrznego źródła danych, możesz uwzględnić
sugerowane elementy pojawiają się w menu wielokrotnego wyboru, zanim użytkownicy wpiszą
w menu. Możesz na przykład wypełnić ostatnio wyszukiwane kontakty jako
użytkownika. Aby uzupełnić sugerowane elementy z zewnętrznego źródła danych, wpisz
SelectionItem
obiektów.
Ten kod pokazuje menu wielokrotnego wyboru z elementów z
zewnętrznego zestawu kontaktów dla użytkownika. W menu domyślnie wyświetlany jest jeden kontakt
i uruchamia funkcję getContacts, aby pobrać i wypełnić elementy z
zewnętrzne źródło danych:
JSON
{
"selectionInput": {
"name": "contacts",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 5,
"multiSelectMinQueryLength": 2,
"externalDataSource": {
"function": "getContacts"
},
"items": [
{
"text": "Contact 3",
"value": "contact-3",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"bottomText": "Contact three description",
"selected": false
}
]
}
}
W przypadku zewnętrznych źródeł danych możesz też automatycznie uzupełniać elementy uruchamiane przez użytkowników
w menu wielokrotnego wyboru. Jeśli na przykład użytkownik zacznie wpisywać Atl dla zapytania
obejmujące miasta w Stanach Zjednoczonych,
Aplikacja do obsługi czatu może automatycznie sugerować Atlanta przed użytkownikiem
kończy pisanie. Możesz użyć autouzupełniania maksymalnie 100 elementów.
Aby automatycznie uzupełniać elementy, utwórz funkcję, która wysyła zapytania do danych zewnętrznych źródła i zwraca elementy za każdym razem, gdy użytkownik wpisze tekst w menu wyboru wielokrotnego. musi wykonać te czynności:
- Przekazuj obiekt zdarzenia, który reprezentuje interakcję użytkownika z menu.
- Określ, że zdarzenie interakcji
invokedFunctionodpowiada funkcji z polaexternalDataSource. - Jeśli funkcje są zgodne, zwraca sugerowane elementy na podstawie danych zewnętrznych.
źródła. Aby sugerować elementy na podstawie wpisanego przez użytkownika hasła, pobierz wartość atrybutu
autocomplete_widget_queryklawisz. Ta wartość odzwierciedla tekst wpisywany przez użytkownika w menu.
Podany niżej kod automatycznie uzupełnia elementy z zewnętrznego zasobu danych. Korzystanie z
poprzedni przykład: aplikacja Google Chat sugeruje elementy na podstawie
po wywołaniu funkcji getContacts:
Google Apps Script
Node.js
Dodaj pole, w którym użytkownik może wpisywać tekst
Widżet TextInput
udostępnia pole, w którym użytkownicy mogą wpisywać tekst.
widżet obsługuje sugestie, które ułatwiają wprowadzanie jednolitych danych, i w razie potrzeby
czynności,
Actions
uruchamianych, gdy nastąpi zmiana w polu do wprowadzania tekstu, np. dodanie przez użytkownika
Usuwanie tekstu.
Jeśli chcesz zbierać abstrakcyjne lub nieznane dane od użytkowników, użyj tego
Widżet TextInput. Aby zebrać zdefiniowane dane od użytkowników, użyj funkcji
SelectionInput
widżet.
Informacje o przetwarzaniu tekstu wpisywanego przez użytkowników zawiera sekcja Informacje o procesach wprowadzane przez użytkowników.
Oto karta zawierająca widżet TextInput:
Pozwól użytkownikowi wybrać datę i godzinę
Widżet DateTimePicker
umożliwia użytkownikom wpisywanie daty, godziny lub zarówno daty,
za jednym razem. Użytkownicy mogą też wybierać daty i godziny za pomocą selektora. Jeśli dane wejściowe użytkownika
nieprawidłowa data lub godzina, selektor wyświetla błąd z prośbą o podanie danych
i poprawić informacje.
Aby przetworzyć wartości daty i godziny wpisane przez użytkowników, zapoznaj się z artykułem Informacje o procesach wprowadzane przez użytkowników.
Poniżej znajduje się karta z 3 różnymi typami
DateTimePicker widżetu:
Weryfikuj dane wprowadzane na kartach
Z tego artykułu dowiesz się, jak zweryfikować dane wprowadzone w action karty
i widżety.
Można na przykład sprawdzić, czy pole do wprowadzania tekstu zawiera tekst wpisany przez
użytkownika lub że zawiera określoną liczbę znaków.
Ustaw wymagane widżety działań
W ramach tego action karty,
dodaj nazwy widżetów, które są potrzebne do wykonania działania, do swojej listy requiredWidgets.
Jeśli wymienione tutaj widżety nie mają wartości w momencie wywołania tego działania, to przesłanie formularza zostanie anulowane.
Gdy "all_widgets_are_required": "true" jest ustawione dla działania, wszystkie widżety
widoczne na karcie.
Ustaw działanie all_widgets_are_required w wyborze wielokrotnym
JSON
{
"sections": [
{
"header": "Select contacts",
"widgets": [
{
"selectionInput": {
"type": "MULTI_SELECT",
"label": "Selected contacts",
"name": "contacts",
"multiSelectMaxSelectedItems": 3,
"multiSelectMinQueryLength": 1,
"onChangeAction": {
"all_widgets_are_required": true
},
"items": [
{
"value": "contact-1",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 1",
"bottomText": "Contact one description",
"selected": false
},
{
"value": "contact-2",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 2",
"bottomText": "Contact two description",
"selected": false
},
{
"value": "contact-3",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 3",
"bottomText": "Contact three description",
"selected": false
},
{
"value": "contact-4",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 4",
"bottomText": "Contact four description",
"selected": false
},
{
"value": "contact-5",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 5",
"bottomText": "Contact five description",
"selected": false
}
]
}
}
]
}
]
}
Ustawianie działania all_widgets_are_required w elemencie dateTimePicker
JSON
{
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "A datetime picker widget with both date and time:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_date_and_time",
"label": "meeting",
"type": "DATE_AND_TIME"
}
},
{
"textParagraph": {
"text": "A datetime picker widget with just date:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_date_only",
"label": "Choose a date",
"type": "DATE_ONLY",
"onChangeAction":{
"all_widgets_are_required": true
}
}
},
{
"textParagraph": {
"text": "A datetime picker widget with just time:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_time_only",
"label": "Select a time",
"type": "TIME_ONLY"
}
}
]
}
]
}
Ustaw w menu działanie all_widgets_are_required
JSON
{
"sections": [
{
"header": "Section Header",
"collapsible": true,
"uncollapsibleWidgetsCount": 1,
"widgets": [
{
"selectionInput": {
"name": "location",
"label": "Select Color",
"type": "DROPDOWN",
"onChangeAction": {
"all_widgets_are_required": true
},
"items": [
{
"text": "Red",
"value": "red",
"selected": false
},
{
"text": "Green",
"value": "green",
"selected": false
},
{
"text": "White",
"value": "white",
"selected": false
},
{
"text": "Blue",
"value": "blue",
"selected": false
},
{
"text": "Black",
"value": "black",
"selected": false
}
]
}
}
]
}
]
}
Ustawianie weryfikacji widżetu do wprowadzania tekstu
W: textInput
do widżetu, może on określać limit znaków i typ danych wejściowych
w widżecie do wprowadzania tekstu.
Ustawianie limitu znaków dla widżetu wpisywania tekstu
JSON
{
"sections": [
{
"header": "Tell us about yourself",
"collapsible": true,
"uncollapsibleWidgetsCount": 2,
"widgets": [
{
"textInput": {
"name": "favoriteColor",
"label": "Favorite color",
"type": "SINGLE_LINE",
"validation": {"character_limit":15},
"onChangeAction":{
"all_widgets_are_required": true
}
}
}
]
}
]
}
Ustawianie typu danych wejściowych widżetu do wprowadzania tekstu
JSON
{
"sections": [
{
"header": "Validate text inputs by input types",
"collapsible": true,
"uncollapsibleWidgetsCount": 2,
"widgets": [
{
"textInput": {
"name": "mailing_address",
"label": "Please enter a valid email address",
"type": "SINGLE_LINE",
"validation": {
"input_type": "EMAIL"
},
"onChangeAction": {
"all_widgets_are_required": true
}
}
},
{
"textInput": {
"name": "validate_integer",
"label": "Please enter a number",
"type": "SINGLE_LINE",
"validation": {
"input_type": "INTEGER"
}
}
},
{
"textInput": {
"name": "validate_float",
"label": "Please enter a number with a decimal",
"type": "SINGLE_LINE",
"validation": {
"input_type": "FLOAT"
}
}
}
]
}
]
}
Rozwiązywanie problemów
Gdy aplikacja Google Chat lub card zwraca błąd, Interfejs czatu wyświetla komunikat „Coś poszło nie tak”. lub „Nie można przetworzyć żądania”. Czasami interfejs Google Chat nie wyświetla się żaden komunikat o błędzie, ale aplikacja Google Chat lub zwraca nieoczekiwany wynik; na przykład wiadomość w formie karty .
Komunikat o błędzie może nie wyświetlać się w interfejsie Google Chat, opisowe komunikaty o błędach i dane dziennika, które pomogą Ci w naprawianiu błędów gdy logowanie błędów aplikacji Google Chat jest włączone. Aby uzyskać pomoc w wyświetlaniu, debugowania i naprawiania błędów, zapoznaj się z artykułem Rozwiązywanie problemów z błędami w Google Chat