Scheda
L'interfaccia di una scheda visualizzata in un messaggio di Google Chat o in un componente aggiuntivo di Google Workspace.
Le schede supportano un layout definito, elementi dell'interfaccia utente interattivi come i pulsanti e contenuti rich media come le immagini. Utilizza le schede per presentare informazioni dettagliate, raccogliere informazioni dagli utenti e guidarli nel passaggio successivo.
Progettare e visualizzare l'anteprima delle schede con il generatore di schede.
Apri il generatore di schede
Per scoprire come creare schede, consulta la seguente documentazione:
- Per le app Google Chat, vedi Progetta i componenti di una scheda o di una finestra di dialogo.
- Per i componenti aggiuntivi di Google Workspace, vedi Interfacce basate su scheda.
Esempio: messaggio nella scheda per un'app Google Chat
Per creare il messaggio della scheda di esempio in Google Chat, utilizza il seguente 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"
}
]
}
}
}
]
}
}
]
}
]
}
}
]
}
Rappresentazione JSON |
---|
{ "header": { object ( |
Campi | |
---|---|
header
|
L'intestazione della scheda. Un'intestazione di solito contiene un'immagine iniziale e un titolo. Le intestazioni vengono visualizzate sempre nella parte superiore della scheda. |
sections[]
|
Contiene una raccolta di widget. Ogni sezione ha una propria intestazione facoltativa. Le sezioni sono visivamente separate da un separatore di linea. Per un esempio nelle app Google Chat, vedi Definire una sezione di una scheda. |
sectionDividerStyle
|
Lo stile del divisore tra le sezioni. |
cardActions[]
|
Le azioni della scheda. Le azioni vengono aggiunte al menu della barra degli strumenti della scheda.
Ad esempio, il seguente JSON crea un menu delle azioni della scheda con
|
name
|
Nome della carta. Utilizzato come identificatore della carta nella navigazione delle carte.
|
fixedFooter
|
Il piè di pagina fisso mostrato in fondo a questa scheda.
Impostazione
|
displayStyle
|
Nei componenti aggiuntivi di Google Workspace, imposta le proprietà di visualizzazione
|
peekCardHeader
|
Quando vengono visualizzati contenuti contestuali, l'intestazione della scheda popup funge da segnaposto per consentire all'utente di spostarsi tra le schede della home page e quelle contestuali.
|
CardHeader
Rappresenta l'intestazione di una scheda. Per un esempio nelle app Google Chat, vedi Aggiungi un'intestazione.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{
"title": string,
"subtitle": string,
"imageType": enum ( |
Campi | |
---|---|
title
|
Obbligatorio. Il titolo dell'intestazione della scheda. L'intestazione ha un'altezza fissa: se vengono specificati sia un titolo che un sottotitolo, entrambi occupano una riga. Se viene specificato solo il titolo, questo occupa entrambe le righe. |
subtitle
|
Il sottotitolo dell'intestazione della scheda. Se specificato, compare su una riga separata sotto il
|
imageType
|
La forma utilizzata per ritagliare l'immagine.
|
imageUrl
|
L'URL HTTPS dell'immagine nell'intestazione della scheda. |
imageAltText
|
Il testo alternativo di questa immagine utilizzato per l'accessibilità. |
ImageType
La forma utilizzata per ritagliare l'immagine.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
SQUARE
|
Valore predefinito. Applica una maschera quadrata all'immagine. Ad esempio, un'immagine 4 x 3 diventa 3 x 3. |
CIRCLE
|
Applica una maschera circolare all'immagine. Ad esempio, un'immagine 4 x 3 diventa un cerchio con un diametro di 3. |
Sezione
Una sezione contiene una raccolta di widget che vengono visualizzati verticalmente nell'ordine in cui sono specificati.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "header": string, "widgets": [ { object ( |
Campi | |
---|---|
header
|
Testo visualizzato nella parte superiore di una sezione. Supporta testo in formato HTML semplice. Per ulteriori informazioni sulla formattazione del testo, vedi Formattazione del testo nelle app Google Chat e Formattazione del testo nei componenti aggiuntivi di Google Workspace. |
widgets[]
|
Tutti i widget della sezione. Deve contenere almeno un widget. |
collapsible
|
Indica se questa sezione è comprimibile. Le sezioni comprimibili nascondono alcuni o tutti i widget, ma gli utenti possono espandere la sezione per visualizzare i widget nascosti facendo clic Mostra altro. Gli utenti possono nascondere nuovamente i widget facendo clic Mostra meno.
Per determinare quali widget sono nascosti, specifica
|
uncollapsibleWidgetsCount
|
Il numero di widget non comprimibili che rimangono visibili anche quando una sezione viene compressa.
Ad esempio, quando una sezione contiene cinque widget e i
|
collapseControl
|
(Facoltativo) Definisci i pulsanti di espansione e compressione della sezione. Questo pulsante viene mostrato solo se la sezione è comprimibile. Se questo campo non è impostato, viene utilizzato il pulsante predefinito.
|
Widget
Ogni scheda è composta da widget.
Un widget è un oggetto composito che può rappresentare testo, immagini, pulsanti e altri tipi di oggetti.
Rappresentazione JSON |
---|
{ "horizontalAlignment": enum ( |
Campi | |
---|---|
horizontalAlignment
|
Specifica se i widget sono allineati a sinistra, a destra o al centro di una colonna. |
Campo unione
data . Un widget può avere solo uno dei seguenti elementi. Puoi utilizzare più campi del widget per visualizzare più elementi.
data
può essere solo uno dei seguenti:
|
|
textParagraph
|
Visualizza un paragrafo di testo. Supporta testo in formato HTML semplice. Per ulteriori informazioni sulla formattazione del testo, vedi Formattazione del testo nelle app Google Chat e Formattazione del testo nei componenti aggiuntivi di Google Workspace. Ad esempio, il seguente JSON crea un testo in grassetto:
|
image
|
Consente di visualizzare un'immagine. Ad esempio, il seguente JSON crea un'immagine con testo alternativo:
|
decoratedText
|
Consente di mostrare un elemento di testo decorato. Ad esempio, il seguente JSON crea un widget di testo decorato che mostra l'indirizzo email:
|
buttonList
|
Un elenco di pulsanti. Ad esempio, il seguente JSON crea due pulsanti. Il primo è un pulsante di testo blu e il secondo è un pulsante immagine che apre un link:
|
textInput
|
Visualizza una casella di testo in cui gli utenti possono digitare. Ad esempio, il seguente JSON crea un input di testo per un indirizzo email:
Per fare un altro esempio, il seguente JSON crea un input di testo per un linguaggio di programmazione con suggerimenti statici:
|
selectionInput
|
Mostra un controllo di selezione che consente agli utenti di selezionare elementi. I controlli di selezione possono essere caselle di controllo, pulsanti di opzione, opzioni o menu a discesa. Ad esempio, il seguente JSON crea un menu a discesa che consente agli utenti di scegliere una dimensione:
|
dateTimePicker
|
Visualizza un widget che consente agli utenti di inserire una data, un'ora o una data e un'ora. Ad esempio, il seguente JSON crea un selettore di data e ora per programmare un appuntamento:
|
divider
|
Visualizza una linea orizzontale di divisione tra i widget. Ad esempio, il seguente JSON crea un divisore:
|
grid
|
Visualizza una griglia con una raccolta di elementi. Una griglia supporta un numero illimitato di colonne ed elementi. Il numero di righe è determinato dai limiti superiori del numero di elementi divisi per il numero di colonne. Una griglia con 10 elementi e 2 colonne ha 5 righe. Una griglia con 11 elementi e 2 colonne ha 6 righe.
Ad esempio, il seguente JSON crea una griglia a 2 colonne con un singolo elemento:
|
columns
|
Visualizza fino a due colonne.
Per includere più di due colonne o per utilizzare le righe, utilizza il
Ad esempio, il seguente JSON crea due colonne ciascuna contenente paragrafi di testo:
|
chipList
|
Un elenco di chip. Ad esempio, il seguente JSON crea due chip. Il primo è un chip di testo e il secondo un chip di icona che apre un link:
|
TextParagraph
Un paragrafo di testo che supporta la formattazione. Per un esempio nelle app Google Chat, vedi Aggiungi un paragrafo di testo formattato. Per ulteriori informazioni sulla formattazione del testo, vedi Formattazione del testo nelle app Google Chat e Formattazione del testo nei componenti aggiuntivi di Google Workspace.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "text": string, "maxLines": integer } |
Campi | |
---|---|
text
|
Il testo visualizzato nel widget. |
maxLines
|
Il numero massimo di righe di testo visualizzate nel widget. Se il testo supera il numero massimo specificato di righe, il contenuto in eccesso viene nascosto da un mostra altro . Se il testo è uguale o più breve del numero massimo di righe specificato, viene mostra altro .
Il valore predefinito è 0 e viene visualizzato tutto il contesto. I valori negativi vengono ignorati.
|
Immagine
Un'immagine che viene specificata da un URL e può avere un
onClick
un'azione. Per un esempio, vedi
Aggiungi un'immagine.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{
"imageUrl": string,
"onClick": {
object ( |
Campi | |
---|---|
imageUrl
|
L'URL HTTPS che ospita l'immagine. Ad esempio:
|
onClick
|
Quando un utente fa clic sull'immagine, il clic attiva questa azione. |
altText
|
Il testo alternativo di questa immagine utilizzato per l'accessibilità. |
OnClick
Rappresenta come rispondere quando gli utenti fanno clic su un elemento interattivo in una scheda, ad esempio un pulsante.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ // Union field |
Campi | |
---|---|
Campo unione
|
|
action
|
Se specificata, viene attivata un'azione
|
openLink
|
Se specificato, questo valore
|
openDynamicLinkAction
|
Un componente aggiuntivo attiva questa azione quando l'azione deve aprire un link. Questo è diverso
|
card
|
Una nuova scheda viene inserita nella pila di schede dopo aver fatto clic, se specificato.
|
overflowMenu
|
Se specificato, questo valore
|
Azione
Un'azione che descrive il comportamento quando viene inviato il modulo. Ad esempio, puoi richiamare uno script Apps Script per gestire il modulo. Se l'azione viene attivata, i valori del modulo vengono inviati al server.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "function": string, "parameters": [ { object ( |
Campi | |
---|---|
function
|
Una funzione personalizzata da richiamare quando l'elemento contenitore viene selezionato o attivato in altro modo. Per esempio sull'utilizzo, vedi Leggere i dati dei moduli. |
parameters[]
|
Elenco dei parametri di azione. |
loadIndicator
|
Specifica l'indicatore di caricamento che l'azione mostra mentre si fa l'invito all'azione. |
persistValues
|
Indica se i valori del modulo vengono mantenuti dopo l'azione. Il valore predefinito è
Se
Se
|
interaction
|
(Facoltativo) Obbligatorio all'apertura di un dialog. Cosa fare in risposta a un'interazione con un utente, ad esempio il clic su un pulsante in un messaggio di una scheda.
Se non specificato, l'app risponde eseguendo un
Specificando un
|
requiredWidgets[]
|
di Gemini Advanced. Facoltativa. Compila questo elenco con i nomi dei widget necessari a questa azione per un invio valido.
Se i widget elencati qui non hanno un valore quando viene richiamata questa azione, l'invio del modulo viene interrotto.
|
allWidgetsAreRequired
|
di Gemini Advanced. Facoltativa. In questo caso, tutti i widget vengono considerati come richiesti da questa azione.
|
ActionParameter
Elenco di parametri stringa da fornire quando viene richiamato il metodo di azione. Ad esempio, considera tre pulsanti per posticiparla: Posticipa ora, Posticipa un giorno o Posticipa la settimana successiva. Potresti usare
action method = snooze()
, passando il tipo e il tempo di posticipazione nell'elenco dei parametri stringa.
Per saperne di più, vedi
CommonEventObject
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "key": string, "value": string } |
Campi | |
---|---|
key
|
Il nome del parametro per l'action script. |
value
|
Il valore del parametro. |
LoadIndicator
Specifica l'indicatore di caricamento che l'azione mostra mentre si fa l'invito all'azione.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
SPINNER
|
Viene visualizzata una rotellina che indica il caricamento dei contenuti. |
NONE
|
Non viene visualizzato nulla. |
Interazione
(Facoltativo) Obbligatorio all'apertura di un dialog.
Cosa fare in risposta a un'interazione con un utente, ad esempio il clic su un pulsante in un messaggio di una scheda.
Se non specificato, l'app risponde eseguendo un
action
come l'apertura di un link o l'esecuzione di una funzione, come di consueto.
Specificando un
interaction
, l'app può rispondere in modi speciali e interattivi. Ad esempio, impostando
interaction
a
OPEN_DIALOG
, l'app può aprire un
finestra di dialogo.
Se specificato, non viene mostrato alcun indicatore di caricamento. Se viene specificato per un componente aggiuntivo, viene eliminata l'intera scheda e non viene visualizzato nulla nel client.
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
INTERACTION_UNSPECIFIED
|
Valore predefinito. La
action
funziona normalmente.
|
OPEN_DIALOG
|
Apre un dialog, un'interfaccia basata su schede con finestre che le app di chat utilizzano per interagire con gli utenti. Supportata solo dalle app di chat in risposta ai clic sui pulsanti nei messaggi delle schede. Se viene specificato per un componente aggiuntivo, viene eliminata l'intera scheda e non viene visualizzato nulla nel client.
|
OpenLink
Rappresenta un
onClick
evento che apre un link ipertestuale.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "url": string, "openAs": enum ( |
Campi | |
---|---|
url
|
L'URL da aprire. |
openAs
|
Come aprire un link.
|
onClose
|
Indica se il client dimentica un link dopo averlo aperto o lo osserva fino alla chiusura della finestra.
|
OpenAs
Quando
OnClick
apre un link, il client può aprirlo come una finestra a grandezza originale (se questo è il frame utilizzato dal client) o come un overlay (ad esempio un popup). L'implementazione dipende dalle funzionalità della piattaforma client e il valore selezionato potrebbe essere ignorato se il client non lo supporta.
FULL_SIZE
è supportata da tutti i client.
Disponibile per i componenti aggiuntivi di Google Workspace e per le app Google Chat.
Enum | |
---|---|
FULL_SIZE
|
Il link si apre come una finestra a grandezza originale (se questo è il frame utilizzato dal client). |
OVERLAY
|
Il link si apre come overlay, ad esempio popup. |
OnClose
Che cosa fa il client quando un link viene aperto da un
OnClick
l'azione è chiusa.
L'implementazione dipende dalle funzionalità della piattaforma client. Ad esempio, un browser web potrebbe aprire un link in una finestra popup con un
OnClose
.
Se entrambi
OnOpen
e
OnClose
sono impostati i gestori e la piattaforma client non può supportare entrambi i valori,
OnClose
ha la precedenza.
Disponibile per i componenti aggiuntivi di Google Workspace e per le app Google Chat.
Enum | |
---|---|
NOTHING
|
Valore predefinito. La carta non si ricarica; non accade nulla. |
RELOAD
|
Ricarica la scheda alla chiusura della finestra secondaria.
Se utilizzata insieme a
|
OverflowMenu
Un widget che presenta un menu popup con una o più azioni che gli utenti possono richiamare. Ad esempio, mostrare in una scheda azioni non principali. Puoi utilizzare questo widget quando le azioni non rientrano nello spazio disponibile. Per utilizzarlo, specifica questo widget nel
OnClick
dell'azione dei widget che lo supportano. Ad esempio, in una
Button
.
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{
"items": [
{
object ( |
Campi | |
---|---|
items[]
|
Obbligatorio. L'elenco delle opzioni del menu. |
OverflowMenuItem
di Gemini Advanced. Un'opzione che gli utenti possono richiamare in un menu extra.
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "startIcon": { object ( |
Campi | |
---|---|
startIcon
|
Icona visualizzata davanti al testo. |
text
|
Obbligatorio. Il testo che identifica o descrive l'articolo agli utenti. |
onClick
|
Obbligatorio. L'azione richiamata quando è selezionata un'opzione di menu. Questo
|
disabled
|
Indica se l'opzione di menu è disabilitata. Il valore predefinito è false. |
Icona
Un'icona visualizzata in un widget su una scheda. Per un esempio nelle app Google Chat, vedi Aggiungi un'icona.
Supporta integrata e personalizzato .
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "altText": string, "imageType": enum ( |
Campi | |
---|---|
altText
|
(Facoltativo) Una descrizione dell'icona utilizzata per l'accessibilità. Se non specificato, il valore predefinito
Se l'icona è impostata in uno
|
imageType
|
Lo stile di ritaglio applicato all'immagine. In alcuni casi, l'applicazione di
|
Campo unione
icons . L'icona visualizzata nel widget della scheda.
icons
può essere solo uno dei seguenti:
|
|
knownIcon
|
Mostra una delle icone integrate fornite da Google Workspace.
Ad esempio, per visualizzare l'icona di un aereo, specifica
Per un elenco completo delle icone supportate, vedi icone integrate. |
iconUrl
|
Visualizza un'icona personalizzata ospitata su un URL HTTPS. Ad esempio:
I tipi di file supportati includono:
|
materialIcon
|
Visualizza uno dei Icone dei materiali Google. Ad esempio, per visualizzare un icona casella di controllo, utilizza
|
MaterialIcon
R Icona Material Google, che include oltre 2500 opzioni.
Ad esempio, per visualizzare un icona casella di controllo con peso e voto personalizzati, scrivi quanto segue:
{
"name": "check_box",
"fill": true,
"weight": 300,
"grade": -25
}
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "name": string, "fill": boolean, "weight": integer, "grade": integer } |
Campi | |
---|---|
name
|
Il nome dell'icona definito nel
Google Material Icon, ad esempio,
|
fill
|
Indica se l'icona viene visualizzata come piena. Il valore predefinito è false. Per visualizzare l'anteprima delle diverse impostazioni delle icone, vai a Icone dei caratteri Google e modifica le impostazioni nella sezione Personalizza. |
weight
|
Lo spessore del tratto dell'icona. Scegli tra {100, 200, 300, 400, 500, 600, 700}. Se non è presente, il valore predefinito è 400. Se viene specificato qualsiasi altro valore, viene utilizzato quello predefinito. Per visualizzare l'anteprima delle diverse impostazioni delle icone, vai a Icone dei caratteri Google e modifica le impostazioni nella sezione Personalizza. |
grade
|
Il peso e la pendenza influiscono sullo spessore di un simbolo. Le modifiche al grado sono più granulari di quelle al peso e hanno un piccolo impatto sulle dimensioni del simbolo. Scegli un'opzione tra {-25, 0, 200}. Se non è presente, il valore predefinito è 0. Se viene specificato qualsiasi altro valore, viene utilizzato quello predefinito. Per visualizzare l'anteprima delle diverse impostazioni delle icone, vai a Icone dei caratteri Google e modifica le impostazioni nella sezione Personalizza. |
DecoratedText
Un widget che mostra il testo con decorazioni facoltative come un'etichetta sopra o sotto il testo, un'icona davanti al testo, un widget di selezione o un pulsante dopo il testo. Per un esempio nelle app Google Chat, vedi Testo visualizzato con testo decorativo.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "icon": { object ( |
Campi | |
---|---|
icon
|
Deprecato a favore di
|
startIcon
|
Icona visualizzata davanti al testo. |
topLabel
|
Il testo visualizzato sopra
|
text
|
Obbligatorio. Il testo principale. Supporta una formattazione semplice. Per ulteriori informazioni sulla formattazione del testo, vedi Formattazione del testo nelle app Google Chat e Formattazione del testo nei componenti aggiuntivi di Google Workspace. |
wrapText
|
L'impostazione del testo a capo. Se
Si applica solo a
|
bottomLabel
|
Il testo visualizzato sotto
|
onClick
|
Questa azione viene attivata quando gli utenti fanno clic
|
Campo unione
control . Un pulsante, un sensore, una casella di controllo o un'immagine visualizzati a destra del testo in
decoratedText
widget.
control
può essere solo uno dei seguenti:
|
|
button
|
Un pulsante su cui l'utente può fare clic per attivare un'azione. |
switchControl
|
Un widget di cambio su cui un utente può fare clic per modificare il proprio stato e attivare un'azione. |
endIcon
|
Icona visualizzata dopo il testo. Supporta integrata e personalizzato . |
Pulsante
Un pulsante di testo, icona o testo e icona su cui gli utenti possono fare clic. Per un esempio nelle app Google Chat, vedi Aggiungi un pulsante.
Per rendere un'immagine un pulsante cliccabile, specifica
(non è un
Image
) e imposta un valore
ImageComponent
onClick
un'azione.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "text": string, "icon": { object ( |
Campi | |
---|---|
text
|
Il testo visualizzato all'interno del pulsante. |
icon
|
L'immagine dell'icona. Se entrambi
|
color
|
Se impostato, il pulsante viene riempito con un colore di sfondo a tinta unita e il colore del carattere cambia per mantenere il contrasto con quello di sfondo. Ad esempio, se imposti uno sfondo blu, è probabile che il testo sia bianco. Se il criterio non viene configurato, lo sfondo dell'immagine è bianco e il colore del carattere è blu.
Per il rosso, il verde e il blu, il valore di ogni campo è un
Impostato facoltativamente
Per
Ad esempio, il seguente colore rappresenta un rosso semitrasparente:
|
onClick
|
Obbligatorio. L'azione da eseguire quando un utente fa clic sul pulsante, ad esempio aprire un link ipertestuale o eseguire una funzione personalizzata. |
disabled
|
Se
|
altText
|
Il testo alternativo utilizzato per l'accessibilità. Imposta un testo descrittivo che indichi agli utenti la funzione del pulsante. Ad esempio, se un pulsante apre un link ipertestuale, potresti scrivere: "Apre una nuova scheda del browser e passa alla documentazione per gli sviluppatori di Google Chat all'indirizzo https://developers.google.com/workspace/chat". |
type
|
Determina il tipo di un pulsante.
|
Colore
Rappresenta un colore nello spazio colore RGBA. Questa rappresentazione è progettata per facilitare la conversione da e verso rappresentazioni a colori in vari linguaggi piuttosto che per la compattezza. Ad esempio, i campi di questa rappresentazione possono essere banalmente forniti al costruttore di
java.awt.Color
in Java; e può essere fornito banalmente al comando
+colorWithRed:green:blue:alpha
su iOS; e, con un po' di lavoro, può essere facilmente formattato in un CSS
rgba()
in JavaScript.
Questa pagina di riferimento non contiene informazioni sullo spazio colore assoluto che dovrebbe essere utilizzato per interpretare il valore RGB, ad esempio sRGB, Adobe RGB, DCI-P3 e BT.2020. Per impostazione predefinita, le applicazioni devono utilizzare lo spazio colore sRGB.
Quando è necessario decidere l'uguaglianza cromatica, le implementazioni, salvo diversa indicazione, trattate due colori come uguali se tutti i rispettivi valori di rosso, verde, blu e alfa differiscono al massimo
1e-5
.
Esempio (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();
}
// ...
Esempio (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;
}
// ...
Esempio (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('');
};
// ...
Rappresentazione JSON |
---|
{ "red": number, "green": number, "blue": number, "alpha": number } |
Campi | |
---|---|
red
|
La quantità di rosso nel colore come valore nell'intervallo [0, 1]. |
green
|
La quantità di verde nel colore come valore nell'intervallo [0, 1]. |
blue
|
La quantità di blu nel colore come valore nell'intervallo [0, 1]. |
alpha
|
La frazione di questo colore che deve essere applicata al pixel. In altre parole, il colore finale dei pixel è definito dall'equazione:
Ciò significa che un valore pari a 1,0 corrisponde a un colore in tinta unita, mentre un valore pari a 0,0 a un colore completamente trasparente. Viene utilizzato un messaggio wrapper anziché un semplice scalare in virgola mobile in modo che sia possibile distinguere tra un valore predefinito e il valore non impostato. Se omesso, l'oggetto colore viene visualizzato come colore a tinta unita (come se al valore alpha fosse stato assegnato esplicitamente un valore 1,0). |
Tipo
La tipo di un pulsante.
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
TYPE_UNSPECIFIED
|
Non utilizzare. Non specificato. |
OUTLINED
|
I pulsanti con contorni sono pulsanti con enfasi media. Di solito contengono azioni importanti, ma che non sono l'azione principale in un'app di Chat o in un componente aggiuntivo. |
FILLED
|
Un pulsante pieno ha un contenitore in un colore a tinta unita. Ha il massimo impatto visivo ed è consigliato per l'azione importante e principale in un'app di Chat o in un componente aggiuntivo. |
FILLED_TONAL
|
I pulsanti colorati riempiti rappresentano una via di mezzo alternativa tra pulsanti pieni e con contorni. Sono utili in contesti in cui un pulsante a priorità inferiore richiede un po' più di enfasi rispetto a un pulsante struttura. |
BORDERLESS
|
Un pulsante non ha un contenitore invisibile nello stato predefinito. Viene spesso utilizzata per le azioni con priorità più bassa, soprattutto quando si presentano più opzioni. |
SwitchControl
un'opzione di attivazione/disattivazione o una casella di controllo all'interno di
decoratedText
widget.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Supportata solo in
decoratedText
widget.
Rappresentazione JSON |
---|
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object ( |
Campi | |
---|---|
name
|
Il nome con cui viene identificato il widget di cambio in un evento di input del modulo. Per maggiori dettagli sull'utilizzo degli input modulo, vedi Ricevere i dati dei moduli. |
value
|
Il valore inserito da un utente, restituito come parte di un evento di input modulo. Per maggiori dettagli sull'utilizzo degli input modulo, vedi Ricevere i dati dei moduli. |
selected
|
Quando
|
onChangeAction
|
L'azione da eseguire quando viene modificato lo stato del cambio, ad esempio la funzione da eseguire. |
controlType
|
Come viene visualizzata l'opzione nell'interfaccia utente.
|
ControlType
Come viene visualizzata l'opzione nell'interfaccia utente.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
SWITCH
|
Un interruttore. |
CHECKBOX
|
Deprecato a favore di
CHECK_BOX .
|
CHECK_BOX
|
Una casella di controllo. |
ButtonList
Un elenco di pulsanti disposti orizzontalmente. Per un esempio nelle app Google Chat, vedi Aggiungi un pulsante.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{
"buttons": [
{
object ( |
Campi | |
---|---|
buttons[]
|
Una serie di pulsanti. |
TextInput
Un campo in cui gli utenti possono inserire testo. Supporta i suggerimenti e le azioni in caso di modifica. Per un esempio nelle app Google Chat, vedi Aggiungi un campo in cui un utente può inserire testo.
Le app di chat ricevono e possono elaborare il valore del testo inserito durante gli eventi di immissione modulo. Per maggiori dettagli sull'utilizzo degli input modulo, vedi Ricevere i dati dei moduli.
Quando hai bisogno di raccogliere dati indefiniti o astratti dagli utenti, utilizza un input di testo. Per raccogliere dati definiti o enumerati dagli utenti, utilizza la
SelectionInput
widget.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum ( |
Campi | |
---|---|
name
|
Il nome con cui l'input di testo viene identificato in un evento di input del modulo. Per maggiori dettagli sull'utilizzo degli input modulo, vedi Ricevere i dati dei moduli. |
label
|
Il testo visualizzato sopra il campo di immissione di testo nell'interfaccia utente.
Specifica il testo che aiuti l'utente a inserire le informazioni necessarie alla tua app. Ad esempio, se hai chiesto il nome di una persona, ma hai bisogno specifica del suo cognome, scrivi
Obbligatorio se
|
hintText
|
Testo visualizzato sotto il campo di immissione testo per assistere gli utenti chiedendo loro di inserire un determinato valore. Questo testo è sempre visibile.
Obbligatorio se
|
value
|
Il valore inserito da un utente, restituito come parte di un evento di input modulo. Per maggiori dettagli sull'utilizzo degli input modulo, vedi Ricevere i dati dei moduli. |
type
|
Come viene visualizzato un campo di immissione di testo nell'interfaccia utente. ad esempio se il campo è a una o più righe. |
onChangeAction
|
Cosa fare quando si verifica una modifica nel campo di immissione di testo. ad esempio un utente che aggiunge un elemento al campo o elimina del testo. Ecco alcuni esempi di azioni da intraprendere: l'esecuzione di una funzione personalizzata o l'apertura di un finestra di dialogo in Google Chat. |
initialSuggestions
|
Valori suggeriti che gli utenti possono inserire. Questi valori vengono visualizzati quando gli utenti fanno clic all'interno del campo di immissione testo. Mentre gli utenti digitano, i valori suggeriti vengono filtrati in modo dinamico per corrispondere alle parole digitate dagli utenti.
Ad esempio, un campo di immissione di testo per un linguaggio di programmazione potrebbe suggerire Java, JavaScript, Python e C++. Quando gli utenti iniziano a digitare
I valori suggeriti aiutano gli utenti a inserire valori con cui la tua app può avere un senso. Quando si fa riferimento a JavaScript, alcuni utenti potrebbero inserire
Se specificato,
|
autoCompleteAction
|
(Facoltativo) Specifica quale azione eseguire quando il campo di immissione di testo fornisce suggerimenti agli utenti che interagiscono con questo campo.
Se non specificati, i suggerimenti vengono impostati
Se specificata, l'app esegue l'azione specificata qui, ad esempio l'esecuzione di una funzione personalizzata.
|
validation
|
di Gemini Advanced. Specifica la convalida necessaria per questo campo di immissione di testo.
|
placeholderText
|
Testo visualizzato nel campo di immissione testo quando questo è vuoto. Utilizza questo testo per richiedere agli utenti di inserire un valore. Ad esempio:
|
Tipo
Come viene visualizzato un campo di immissione di testo nell'interfaccia utente. Ad esempio, che si tratti di un campo di immissione a riga singola o su più righe. Se
initialSuggestions
viene specificato,
type
è sempre
SINGLE_LINE
, anche se impostato su
MULTIPLE_LINE
.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
SINGLE_LINE
|
Il campo di immissione testo ha un'altezza fissa di una riga. |
MULTIPLE_LINE
|
Il campo di immissione testo ha un'altezza fissa di più righe. |
RenderActions
Un insieme di istruzioni di rendering che indicano a una scheda di eseguire un'azione. indica all'app host del componente aggiuntivo o all'app Chat di eseguire un'azione specifica per l'app.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Campi | |
---|---|
action |
Azione
Campi | |
---|---|
navigations[] |
Esegui il push o aggiorna le schede visualizzate. |
Suggerimenti
Valori suggeriti che gli utenti possono inserire. Questi valori vengono visualizzati quando gli utenti fanno clic all'interno del campo di immissione testo. Mentre gli utenti digitano, i valori suggeriti vengono filtrati in modo dinamico per corrispondere alle parole digitate dagli utenti.
Ad esempio, un campo di immissione di testo per un linguaggio di programmazione potrebbe suggerire Java, JavaScript, Python e C++. Quando gli utenti iniziano a digitare
Jav
, l'elenco dei filtri dei suggerimenti da mostrare
Java
e
JavaScript
.
I valori suggeriti aiutano gli utenti a inserire valori con cui la tua app può avere un senso. Quando si fa riferimento a JavaScript, alcuni utenti potrebbero inserire
javascript
e altri
java script
. Suggerimento
JavaScript
puoi standardizzare il modo in cui gli utenti interagiscono con la tua app.
Se specificato,
TextInput.type
è sempre
SINGLE_LINE
, anche se impostato su
MULTIPLE_LINE
.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{
"items": [
{
object ( |
Campi | |
---|---|
items[]
|
Un elenco di suggerimenti utilizzati per i suggerimenti di completamento automatico nei campi di immissione di testo. |
SuggestionItem
Un valore suggerito che gli utenti possono inserire in un campo di immissione di testo.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ // Union field |
Campi | |
---|---|
Campo unione
|
|
text
|
Il valore di un input suggerito in un campo di immissione di testo. Equivale ai dati inseriti dagli utenti. |
Convalida
di Gemini Advanced. Rappresenta i dati necessari per la convalida del widget a cui è associato.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{
"characterLimit": integer,
"inputType": enum ( |
Campi | |
---|---|
characterLimit
|
di Gemini Advanced. Specifica il limite di caratteri per i widget di input di testo. Tieni presente che viene utilizzato solo per l'inserimento di testo e viene ignorato per altri widget.
|
inputType
|
di Gemini Advanced. Specifica il tipo di widget di input.
|
InputType
Il tipo di widget di input.
Enum | |
---|---|
INPUT_TYPE_UNSPECIFIED
|
Tipo non specificato. Non utilizzare. |
TEXT
|
Testo normale che accetta tutti i caratteri. |
INTEGER
|
Un valore intero. |
FLOAT
|
Un valore in virgola mobile. |
EMAIL
|
Un indirizzo email. |
EMOJI_PICKER
|
Un'emoji selezionata dal selettore di emoji fornito dal sistema. |
SelectionInput
Un widget che crea uno o più elementi UI selezionabili dagli utenti. Ad esempio, un menu a discesa o delle caselle di controllo. Puoi utilizzare questo widget per raccogliere dati che possono essere previsti o enumerati. Per un esempio nelle app Google Chat, vedi Aggiungi elementi dell'interfaccia utente selezionabili.
Le app di chat possono elaborare il valore degli elementi selezionati o inseriti dagli utenti. Per maggiori dettagli sull'utilizzo degli input modulo, vedi Ricevere i dati dei moduli.
Per raccogliere dagli utenti dati indefiniti o astratti, utilizza la classe
TextInput
widget.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Campi | |
---|---|
name
|
Obbligatorio. Il nome che identifica l'input di selezione in un evento di input modulo. Per maggiori dettagli sull'utilizzo degli input modulo, vedi Ricevere i dati dei moduli. |
label
|
Il testo visualizzato sopra il campo di immissione della selezione nell'interfaccia utente. Specifica il testo che aiuti l'utente a inserire le informazioni necessarie alla tua app. Ad esempio, se gli utenti selezionano l'urgenza di un ticket di lavoro da un menu a discesa, l'etichetta potrebbe essere "Urgenza". o "Seleziona urgenza". |
type
|
Il tipo di elementi che vengono mostrati agli utenti in una
|
items[]
|
Un array di elementi selezionabili. Ad esempio, un array di pulsanti di opzione o caselle di controllo. Supporta fino a 100 elementi. |
onChangeAction
|
Se specificato, il modulo viene inviato quando la selezione cambia. Se non specificato, devi specificare un pulsante separato per l'invio del modulo. Per maggiori dettagli sull'utilizzo degli input modulo, vedi Ricevere i dati dei moduli. |
multiSelectMaxSelectedItems
|
Per i menu a selezione multipla, il numero massimo di elementi che un utente può selezionare. Il valore minimo è 1 elemento. Se non specificato, il valore predefinito è 3 elementi. |
multiSelectMinQueryLength
|
Per i menu a selezione multipla, il numero di caratteri di testo inseriti da un utente prima che l'app esegua una query per il completamento automatico e mostra gli elementi suggeriti nel menu. Se non specificato, il valore predefinito è 0 caratteri per le origini dati statiche e 3 caratteri per le origini dati esterne. |
validation
|
Per i menu a discesa, la convalida del campo di immissione della selezione.
|
Campo unione
|
|
externalDataSource
|
Un'origine dati esterna, ad esempio un database relazionale. |
platformDataSource
|
Un'origine dati di Google Workspace. |
SelectionType
Il formato degli elementi che gli utenti possono selezionare. Opzioni diverse supportano diversi tipi di interazioni. Ad esempio, gli utenti possono selezionare più caselle di controllo, ma possono selezionare un solo elemento da un menu a discesa.
Ogni input di selezione supporta un tipo di selezione. La combinazione di caselle di controllo e opzioni, ad esempio, non è supportata.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
CHECK_BOX
|
Una serie di caselle di controllo. Gli utenti possono selezionare una o più caselle di controllo. |
RADIO_BUTTON
|
Una serie di pulsanti di opzione. Gli utenti possono selezionare un solo pulsante di opzione. |
SWITCH
|
Una serie di sensori. Gli utenti possono attivare uno o più sensori. |
DROPDOWN
|
Un menu a discesa. Gli utenti possono selezionare un elemento dal menu. |
MULTI_SELECT
|
Un menu a selezione multipla per dati statici o dinamici. Dalla barra dei menu, gli utenti possono selezionare una o più voci. Gli utenti possono anche inserire valori per compilare i dati dinamici. Ad esempio, gli utenti possono iniziare a digitare il nome di uno spazio di Google Chat e il widget suggerirà automaticamente lo spazio. Per compilare gli elementi di un menu a selezione multipla, puoi utilizzare uno dei seguenti tipi di origini dati:
Per esempi su come implementare i menu a selezione multipla, consulta Aggiungi un menu a selezione multipla.
|
SelectionItem
Un elemento che gli utenti possono selezionare in un input di selezione, ad esempio una casella di controllo o un'opzione.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "text": string, "value": string, "selected": boolean, "startIconUri": string, "bottomText": string } |
Campi | |
---|---|
text
|
Il testo che identifica o descrive l'articolo agli utenti. |
value
|
Il valore associato a questo elemento. Il cliente dovrebbe utilizzarlo come valore di input del modulo. Per maggiori dettagli sull'utilizzo degli input modulo, vedi Ricevere i dati dei moduli. |
selected
|
Indica se l'elemento è selezionato per impostazione predefinita. Se l'input di selezione accetta un solo valore (ad esempio per i pulsanti di opzione o per un menu a discesa), imposta questo campo solo per un elemento. |
startIconUri
|
Per i menu a selezione multipla, l'URL dell'icona visualizzata accanto alla voce
|
bottomText
|
Per i menu a selezione multipla, una descrizione testuale o un'etichetta visualizzata sotto il
|
PlatformDataSource
Per un
widget che utilizza un menu a selezione multipla, un'origine dati di Google Workspace. Utilizzato per completare gli elementi in un menu a selezione multipla.
SelectionInput
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ // Union field |
Campi | |
---|---|
Campo unione
data_source . L'origine dati.
data_source
può essere solo uno dei seguenti:
|
|
commonDataSource
|
Un'origine dati condivisa da tutte le applicazioni Google Workspace, ad esempio gli utenti di un'organizzazione Google Workspace. |
hostAppDataSource
|
Un'origine dati univoca per un'applicazione host di Google Workspace, come gli spazi di Google Chat. |
CommonDataSource
Un'origine dati condivisa da tutti Applicazioni Google Workspace.
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
UNKNOWN
|
Valore predefinito. Non utilizzare. |
USER
|
Utenti di Google Workspace. L'utente può solo visualizzare e selezionare gli utenti della sua organizzazione Google Workspace. |
HostAppDataSourceMarkup
Per un
widget che utilizza un menu a selezione multipla, un'origine dati di un'applicazione Google Workspace. L'origine dati completa gli elementi di selezione per il menu a selezione multipla.
SelectionInput
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ // Union field |
Campi | |
---|---|
Campo unione
data_source . L'applicazione Google Workspace che compila gli elementi di un menu a selezione multipla.
data_source
può essere solo uno dei seguenti:
|
|
chatDataSource
|
Un'origine dati di Google Chat. |
ChatClientDataSourceMarkup
Per un
widget che utilizza un menu a selezione multipla, un'origine dati di Google Chat. L'origine dati completa gli elementi di selezione per il menu a selezione multipla. Ad esempio, un utente può selezionare gli spazi di Google Chat di cui è membro.
SelectionInput
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ // Union field |
Campi | |
---|---|
Campo unione
source . Origine dati Google Chat.
source
può essere solo uno dei seguenti:
|
|
spaceDataSource
|
Spazi di Google Chat di cui l'utente è membro. |
SpaceDataSource
Un'origine dati che compila gli spazi di Google Chat come elementi di selezione per un menu a selezione multipla. Compila solo gli spazi di cui l'utente è membro.
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "defaultToCurrentSpace": boolean } |
Campi | |
---|---|
defaultToCurrentSpace
|
Se impostato su
|
DateTimePicker
Consente agli utenti di inserire una data, un'ora oppure una data e un'ora. Per un esempio nelle app Google Chat, vedi Consenti a un utente di scegliere una data e un'ora.
Gli utenti possono inserire testo o utilizzare il selettore per selezionare date e orari. Se gli utenti inseriscono una data o un'ora non valide, il selettore mostra un errore che chiede agli utenti di inserire correttamente le informazioni.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Campi | |
---|---|
name
|
Il nome con cui
Per maggiori dettagli sull'utilizzo degli input modulo, vedi Ricevere i dati dei moduli. |
label
|
Il testo che richiede agli utenti di inserire una data, un'ora o una data e un'ora. Ad esempio, se gli utenti stanno fissando un appuntamento, utilizza un'etichetta come
|
type
|
Se il widget supporta l'inserimento di data, ora o data e ora. |
valueMsEpoch
|
Il valore predefinito visualizzato nel widget, in millisecondi a partire da Tempo di Unix:
Specifica il valore in base al tipo di selettore (
|
timezoneOffsetDate
|
Il numero che rappresenta la differenza di fuso orario rispetto al fuso orario UTC, espressa in minuti. Se impostato, il parametro
|
onChangeAction
|
Si attiva quando l'utente fa clic
Salva
o
Cancella
dal
|
validation
|
di Gemini Advanced. Facoltativa. Specifica la convalida richiesta per questo selettore data/ora.
|
DateTimePickerType
Il formato di data e ora nel
DateTimePicker
widget. Determina se gli utenti possono inserire una data, un'ora o entrambi.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
DATE_AND_TIME
|
Gli utenti inseriscono una data e un'ora. |
DATE_ONLY
|
Gli utenti hanno inserito una data. |
TIME_ONLY
|
Gli utenti inseriscono un orario. |
Divisore
Questo tipo non contiene campi.
Visualizza un divisore tra i widget come una linea orizzontale. Per un esempio nelle app Google Chat, vedi Aggiungi un divisore orizzontale tra i widget.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Ad esempio, il seguente JSON crea un divisore:
"divider": {}
Griglia
Visualizza una griglia con una raccolta di elementi. Gli elementi possono includere solo testo o immagini. Per le colonne adattabili, o per includere più di testo o immagini, utilizza
. Per un esempio nelle app Google Chat, vedi
Visualizzare una griglia con una raccolta di elementi.
Columns
Una griglia supporta un numero illimitato di colonne ed elementi. Il numero di righe è determinato dagli elementi divisi per le colonne. Una griglia con 10 elementi e 2 colonne ha 5 righe. Una griglia con 11 elementi e 2 colonne ha 6 righe.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Ad esempio, il seguente JSON crea una griglia a 2 colonne con un singolo elemento:
"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"
}
}
}
Rappresentazione JSON |
---|
{ "title": string, "items": [ { object ( |
Campi | |
---|---|
title
|
Il testo visualizzato nell'intestazione della griglia. |
items[]
|
Gli elementi da visualizzare nella griglia. |
borderStyle
|
Lo stile del bordo da applicare a ogni elemento della griglia. |
columnCount
|
Il numero di colonne da visualizzare nella griglia. Se questo campo non viene specificato, viene utilizzato un valore predefinito che varia a seconda di dove viene visualizzata la griglia (finestra di dialogo o companion). |
onClick
|
Questo callback viene riutilizzato da ogni singolo elemento della griglia, ma con l'identificatore e l'indice dell'elemento nell'elenco di elementi aggiunti ai parametri del callback. |
GridItem
Rappresenta un elemento in un layout a griglia. Gli elementi possono contenere testo, un'immagine o sia testo sia un'immagine.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "id": string, "image": { object ( |
Campi | |
---|---|
id
|
Un identificatore specificato dall'utente per questo elemento della griglia. Questo identificatore viene restituito nella griglia padre
|
image
|
L'immagine visualizzata nell'elemento della griglia. |
title
|
Il titolo dell'elemento della griglia. |
subtitle
|
Il sottotitolo dell'elemento della griglia. |
layout
|
Il layout da utilizzare per l'elemento della griglia. |
ImageComponent
Rappresenta un'immagine.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "imageUri": string, "altText": string, "cropStyle": { object ( |
Campi | |
---|---|
imageUri
|
L'URL dell'immagine. |
altText
|
L'etichetta di accessibilità per l'immagine. |
cropStyle
|
Lo stile di ritaglio da applicare all'immagine. |
borderStyle
|
Lo stile del bordo da applicare all'immagine. |
ImageCropStyle
Rappresenta lo stile di ritaglio applicato a un'immagine.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Ad esempio, ecco come applicare proporzioni 16:9:
cropStyle {
"type": "RECTANGLE_CUSTOM",
"aspectRatio": 16/9
}
Rappresentazione JSON |
---|
{
"type": enum ( |
Campi | |
---|---|
type
|
Il tipo di ritaglio. |
aspectRatio
|
Le proporzioni da utilizzare se il tipo di ritaglio è
Ad esempio, ecco come applicare proporzioni 16:9:
|
ImageCropType
Rappresenta lo stile di ritaglio applicato a un'immagine.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
IMAGE_CROP_TYPE_UNSPECIFIED
|
Non utilizzare. Non specificato. |
SQUARE
|
Valore predefinito. Applica un ritaglio quadrato. |
CIRCLE
|
Applica un ritaglio circolare. |
RECTANGLE_CUSTOM
|
Applica un ritaglio rettangolare con proporzioni personalizzate. Imposta le proporzioni personalizzate con
aspectRatio .
|
RECTANGLE_4_3
|
Applica un ritaglio rettangolare con proporzioni 4:3. |
BorderStyle
Le opzioni di stile per il bordo di una scheda o di un widget, inclusi tipo e colore del bordo.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "type": enum ( |
Campi | |
---|---|
type
|
Il tipo di bordo. |
strokeColor
|
I colori da utilizzare quando il tipo è
|
cornerRadius
|
Il raggio d'angolo del bordo. |
BorderType
Rappresenta i tipi di bordi applicati ai widget.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
BORDER_TYPE_UNSPECIFIED
|
Non utilizzare. Non specificato. |
NO_BORDER
|
Valore predefinito. Senza bordo. |
STROKE
|
Outline. |
GridItemLayout
Rappresenta le varie opzioni di layout disponibili per un elemento della griglia.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
GRID_ITEM_LAYOUT_UNSPECIFIED
|
Non utilizzare. Non specificato. |
TEXT_BELOW
|
Il titolo e il sottotitolo vengono visualizzati sotto l'immagine dell'elemento della griglia. |
TEXT_ABOVE
|
Il titolo e il sottotitolo vengono visualizzati sopra l'immagine dell'elemento della griglia. |
Colonne
La
Columns
mostra fino a 2 colonne in una scheda o in una finestra di dialogo. Puoi aggiungere widget a ogni colonna; i widget vengono visualizzati nell'ordine specificato. Per un esempio nelle app Google Chat, vedi
Mostra schede e finestre di dialogo nelle colonne.
L'altezza di ogni colonna è determinata dalla colonna più alta. Ad esempio, se la prima colonna è più alta della seconda colonna, entrambe le colonne avranno l'altezza della prima colonna. Poiché ogni colonna può contenere un numero diverso di widget, non puoi definire righe o allineare widget tra le colonne.
Le colonne vengono visualizzate una accanto all'altra. Puoi personalizzare la larghezza di ogni colonna utilizzando il metodo
HorizontalSizeStyle
. Se la larghezza dello schermo dell'utente è troppo ridotta, la seconda colonna va a capo sotto la prima:
- Sul web, la seconda colonna va a capo se la larghezza dello schermo è inferiore o uguale a 480 pixel.
- Sui dispositivi iOS, la seconda colonna va a capo se la larghezza dello schermo è inferiore o uguale a 300 punti.
- Sui dispositivi Android, la seconda colonna va a capo se la larghezza dello schermo è inferiore o uguale a 320 dp.
Per includere più di due colonne o per utilizzare le righe, utilizza il
widget.
Grid
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{
"columnItems": [
{
object ( |
Campi | |
---|---|
columnItems[]
|
Un array di colonne. Puoi includere fino a due colonne in una scheda o una finestra di dialogo. |
Colonna
Una colonna.
Rappresentazione JSON |
---|
{ "horizontalSizeStyle": enum ( |
Campi | |
---|---|
horizontalSizeStyle
|
Specifica in che modo una colonna occupa la larghezza della scheda. |
horizontalAlignment
|
Specifica se i widget sono allineati a sinistra, a destra o al centro di una colonna. |
verticalAlignment
|
Specifica se i widget sono allineati in alto, in basso o al centro di una colonna. |
widgets[]
|
Un array di widget inclusi in una colonna. I widget vengono visualizzati nell'ordine in cui sono specificati. |
HorizontalSizeStyle
Specifica in che modo una colonna occupa la larghezza della scheda. La larghezza di ogni colonna dipende dalla
HorizontalSizeStyle
e la larghezza dei widget all'interno della colonna.
Enum | |
---|---|
HORIZONTAL_SIZE_STYLE_UNSPECIFIED
|
Non utilizzare. Non specificato. |
FILL_AVAILABLE_SPACE
|
Valore predefinito. La colonna riempie lo spazio disponibile, fino al 70% della larghezza della scheda. Se entrambe le colonne sono impostate su
FILL_AVAILABLE_SPACE , ogni colonna riempie il 50% dello spazio.
|
FILL_MINIMUM_SPACE
|
La colonna riempie la quantità minore di spazio possibile e non più del 30% della larghezza della scheda. |
HorizontalAlignment
Specifica se i widget sono allineati a sinistra, a destra o al centro di una colonna.
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
HORIZONTAL_ALIGNMENT_UNSPECIFIED
|
Non utilizzare. Non specificato. |
START
|
Valore predefinito. Allinea i widget alla posizione iniziale della colonna. Per i layout da sinistra a destra, viene allineato a sinistra. Per i layout da destra a sinistra, allinea a destra. |
CENTER
|
Allinea i widget al centro della colonna. |
END
|
Allinea i widget alla posizione finale della colonna. Per i layout da sinistra a destra, i widget vengono allineati a destra. Per i layout da destra a sinistra, i widget vengono allineati a sinistra. |
VerticalAlignment
Specifica se i widget sono allineati in alto, in basso o al centro di una colonna.
Enum | |
---|---|
VERTICAL_ALIGNMENT_UNSPECIFIED
|
Non utilizzare. Non specificato. |
CENTER
|
Valore predefinito. Allinea i widget al centro di una colonna. |
TOP
|
Allinea i widget alla parte superiore di una colonna. |
BOTTOM
|
Allinea i widget alla parte inferiore di una colonna. |
Widget
I widget supportati che puoi includere in una colonna.
Rappresentazione JSON |
---|
{ // Union field |
Campi | |
---|---|
Campo unione
|
|
textParagraph
|
|
image
|
|
decoratedText
|
|
buttonList
|
|
textInput
|
|
selectionInput
|
|
dateTimePicker
|
|
chipList
|
|
ChipList
Un elenco di chip disposti orizzontalmente, che possono scorrere orizzontalmente o passare alla riga successiva.
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "layout": enum ( |
Campi | |
---|---|
layout
|
Layout dell'elenco di chip specificato. |
chips[]
|
Un array di chip. |
Layout
Il layout dell'elenco dei chip.
Enum | |
---|---|
LAYOUT_UNSPECIFIED
|
Non utilizzare. Non specificato. |
WRAPPED
|
Valore predefinito. L'elenco dei chip viene rimandato alla riga successiva se non c'è abbastanza spazio orizzontale. |
HORIZONTAL_SCROLLABLE
|
I chip scorrono orizzontalmente se non si adattano allo spazio disponibile. |
Chip
Un chip di testo, icona o testo e icona su cui gli utenti possono fare clic.
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "icon": { object ( |
Campi | |
---|---|
icon
|
L'immagine dell'icona. Se entrambi
|
label
|
Il testo visualizzato all'interno del chip. |
onClick
|
(Facoltativo) L'azione da eseguire quando un utente fa clic sul chip, ad esempio l'apertura di un link ipertestuale o l'esecuzione di una funzione personalizzata. |
enabled
|
Indica se il chip è in stato attivo e risponde alle azioni dell'utente. Il valore predefinito è
|
disabled
|
Indica se il chip è in stato inattivo e ignora le azioni dell'utente. Il valore predefinito è
|
altText
|
Il testo alternativo utilizzato per l'accessibilità. Imposta un testo descrittivo che indichi agli utenti la funzione del chip. Ad esempio, se un chip apre un link ipertestuale, scrivi: "Apre una nuova scheda del browser e passa alla documentazione per gli sviluppatori di Google Chat all'indirizzo https://developers.google.com/workspace/chat". |
CollapseControl
Rappresenta un controllo di espansione e compressione.
Disponibile per le app Google Chat e per i componenti aggiuntivi di Google Workspace.
Rappresentazione JSON |
---|
{ "horizontalAlignment": enum ( |
Campi | |
---|---|
horizontalAlignment
|
L'allineamento orizzontale del pulsante Espandi e Comprimi. |
expandButton
|
(Facoltativo) Definisci un pulsante personalizzabile per espandere la sezione. È necessario impostare sia il campo espandibiliButton che il campo CompressButton. Un solo set di campi non verrà applicato. Se questo campo non è impostato, viene utilizzato il pulsante predefinito. |
collapseButton
|
(Facoltativo) Definisci un pulsante personalizzabile per comprimere la sezione. È necessario impostare sia il campo espandibiliButton che il campo CompressButton. Un solo set di campi non verrà applicato. Se questo campo non è impostato, viene utilizzato il pulsante predefinito. |
DividerStyle
Lo stile di divisore di una scheda. Attualmente utilizzato solo per i divisori tra le sezioni delle schede.
Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.
Enum | |
---|---|
DIVIDER_STYLE_UNSPECIFIED
|
Non utilizzare. Non specificato. |
SOLID_DIVIDER
|
Opzione predefinita. Crea un separatore solido tra le sezioni. |
NO_DIVIDER
|
Se impostato, non viene visualizzato alcun divisore tra le sezioni. |
CardAction
Un'azione della scheda è l'azione associata alla scheda. Ad esempio, una scheda fattura potrebbe includere azioni come l'eliminazione della fattura, l'invio di una fattura via email o l'apertura della fattura in un browser.
Disponibile per i componenti aggiuntivi di Google Workspace e per le app Google Chat.
Rappresentazione JSON |
---|
{
"actionLabel": string,
"onClick": {
object ( |
Campi | |
---|---|
actionLabel
|
L'etichetta visualizzata come voce del menu azione. |
onClick
|
La
|
DisplayStyle
Nei componenti aggiuntivi di Google Workspace, determina il modo in cui viene visualizzata una scheda.
Disponibile per i componenti aggiuntivi di Google Workspace e per le app Google Chat.
Enum | |
---|---|
DISPLAY_STYLE_UNSPECIFIED
|
Non utilizzare. Non specificato. |
PEEK
|
L'intestazione della scheda viene visualizzata nella parte inferiore della barra laterale e copre parzialmente l'attuale scheda superiore della pila. Se fai clic sull'intestazione, la scheda viene visualizzata nella pila di schede. Se la scheda non ha un'intestazione, viene utilizzata un'intestazione generata. |
REPLACE
|
Valore predefinito. La scheda viene mostrata sostituendo la visualizzazione della scheda in alto nella pila di schede. |