Cards v2

Scheda

Un'interfaccia delle schede visualizzata in un messaggio di Google Chat o in un componente aggiuntivo di Google Workspace.

Le schede supportano un layout definito, elementi UI interattivi come pulsanti e rich media come immagini. Utilizza le schede per presentare informazioni dettagliate, raccogliere informazioni dagli utenti e guidarli a eseguire un passaggio successivo.

Progetta e visualizza l'anteprima delle schede con Card Builder.

Apri il generatore di schede

Per scoprire come creare schede, consulta la seguente documentazione:

Nota: puoi aggiungere fino a 100 widget per scheda. I widget oltre questo limite vengono ignorati. Questo limite si applica sia ai messaggi con schede e alle finestre di dialogo nelle app Google Chat sia alle schede nei componenti aggiuntivi di Google Workspace.

Esempio: messaggio della scheda per un'app Google Chat

Scheda contatto di esempio

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 (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
Campi
header

object (CardHeader)

L'intestazione della scheda. Un'intestazione di solito contiene un'immagine iniziale e un titolo. Le intestazioni vengono sempre visualizzate nella parte superiore di una scheda.

sections[]

object (Section)

Contiene una raccolta di widget. Ogni sezione ha la propria intestazione facoltativa. Le sezioni sono separate visivamente da una linea di divisione. Per un esempio nelle app Google Chat, vedi Definire una sezione di una scheda.

sectionDividerStyle

enum (DividerStyle)

Lo stile del divisore tra l'intestazione, le sezioni e il piè di pagina.

cardActions[]

object (CardAction)

Le azioni della scheda. Le azioni vengono aggiunte al menu della barra degli strumenti della scheda.

Disponibile per i componenti aggiuntivi Google Workspace e non disponibile per le app Google Chat.

Ad esempio, il seguente codice JSON crea un menu di azioni della scheda con le opzioni Settings e 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

Nome della scheda. Utilizzato come identificatore della scheda nella navigazione delle schede.

Disponibile per i componenti aggiuntivi Google Workspace e non disponibile per le app Google Chat.

displayStyle

enum (DisplayStyle)

Nei componenti aggiuntivi di Google Workspace, imposta le proprietà di visualizzazione di peekCardHeader.

Disponibile per i componenti aggiuntivi Google Workspace e non disponibile per le app Google Chat.

peekCardHeader

object (CardHeader)

Quando vengono visualizzati contenuti contestuali, l'intestazione della scheda di anteprima funge da segnaposto in modo che l'utente possa navigare in avanti tra le schede della home page e quelle contestuali.

Disponibile per i componenti aggiuntivi Google Workspace e non disponibile per le app Google Chat.

CardHeader

Rappresenta l'intestazione di una scheda. Per un esempio nelle app Google Chat, vedi Aggiungere un'intestazione.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

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

string

Obbligatorio. Il titolo dell'intestazione della scheda. L'intestazione ha un'altezza fissa: se vengono specificati sia un titolo che un sottotitolo, ognuno occupa una riga. Se viene specificato solo il titolo, questo occupa entrambe le righe.

subtitle

string

Il sottotitolo dell'intestazione della scheda. Se specificato, viene visualizzato su una riga separata sotto title.

imageType

enum (ImageType)

La forma utilizzata per ritagliare l'immagine.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

imageUrl

string

L'URL HTTPS dell'immagine nell'intestazione della scheda.

imageAltText

string

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 4x3 diventa 3x3.
CIRCLE Applica una maschera circolare all'immagine. Ad esempio, un'immagine 4x3 diventa un cerchio con un diametro di 3.

Sezione

Una sezione contiene una raccolta di widget 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 (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer,
  "collapseControl": {
    object (CollapseControl)
  }
}
Campi
header

string

Testo visualizzato nella parte superiore di una sezione. Supporta il testo formattato in HTML semplice. Per saperne di più sulla formattazione del testo, vedi Formattare il testo nelle app Google Chat e Formattare il testo nei componenti aggiuntivi di Google Workspace.

widgets[]

object (Widget)

Tutti i widget della sezione. Deve contenere almeno un widget.

collapsible

boolean

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 su Mostra altro. Gli utenti possono nascondere di nuovo i widget facendo clic su Mostra meno.

Per determinare quali widget sono nascosti, specifica uncollapsibleWidgetsCount.

uncollapsibleWidgetsCount

integer

Il numero di widget non comprimibili che rimangono visibili anche quando una sezione è compressa.

Ad esempio, quando una sezione contiene cinque widget e uncollapsibleWidgetsCount è impostato su 2, i primi due widget vengono sempre mostrati e gli ultimi tre vengono compressi per impostazione predefinita. uncollapsibleWidgetsCount viene preso in considerazione solo quando collapsible è true.

collapseControl

object (CollapseControl)

(Facoltativo) Definisci il pulsante di espansione e compressione della sezione. Questo pulsante viene visualizzato 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 uno dei tipi di testo, immagini, pulsanti e altri tipi di oggetti.

Rappresentazione 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)
  },
  "carousel": {
    object (Carousel)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
Campi
horizontalAlignment

enum (HorizontalAlignment)

Specifica se i widget sono allineati a sinistra, a destra o al centro di una colonna.

Campo unione data. Un widget può contenere solo uno dei seguenti elementi. Puoi utilizzare più campi del widget per visualizzare più elementi. data può essere solo uno dei seguenti:
textParagraph

object (TextParagraph)

Visualizza un paragrafo di testo. Supporta il testo formattato in HTML semplice. Per saperne di più sulla formattazione del testo, vedi Formattare il testo nelle app Google Chat e Formattare il testo nei componenti aggiuntivi di Google Workspace.

Ad esempio, il seguente JSON crea un testo in grassetto: 

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

object (Image)

Mostra un'immagine.

Ad esempio, il seguente JSON crea un'immagine con testo alternativo: 

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

object (DecoratedText)

Mostra un elemento di testo decorato.

Ad esempio, il seguente codice JSON crea un widget di testo decorato che mostra l'indirizzo email: 

"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)

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: 

"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)

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: 

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

Come altro esempio, il seguente JSON crea un input di testo per un linguaggio di programmazione con suggerimenti statici: 

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object (SelectionInput)

Visualizza un controllo di selezione che consente agli utenti di selezionare gli 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 taglia: 

"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)

Visualizza un widget che consente agli utenti di inserire una data, un'ora o una data e un'ora.

Ad esempio, il seguente codice JSON crea un selettore di data e ora per programmare un appuntamento: 

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

object (Divider)

Visualizza una linea orizzontale di separazione tra i widget.

Ad esempio, il seguente JSON crea un divisore: 

"divider": {
}
grid

object (Grid)

Visualizza una griglia con una raccolta di elementi.

Una griglia supporta un numero qualsiasi di colonne e elementi. Il numero di righe è determinato dai limiti superiori del numero di elementi diviso 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.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Ad esempio, il seguente JSON crea una griglia a due 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"
    }
  }
}
columns

object (Columns)

Visualizza fino a due colonne.

Per includere più di due colonne o utilizzare le righe, utilizza il widget Grid.

Ad esempio, il seguente JSON crea due colonne contenenti ciascuna paragrafi di testo: 

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

object (Carousel)

Un carosello contiene una raccolta di widget nidificati. Ad esempio, questa è una rappresentazione JSON di un carosello che contiene due paragrafi di testo. 

{
  "widgets": [
    {
      "textParagraph": {
        "text": "First text paragraph in the carousel."
      }
    },
    {
      "textParagraph": {
        "text": "Second text paragraph in the carousel."
      }
    }
  ]
}
chipList

object (ChipList)

Un elenco di chip.

Ad esempio, il seguente JSON crea due chip. Il primo è un chip di testo e il secondo è un chip icona che apre un link: 

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

TextParagraph

Un paragrafo di testo che supporta la formattazione. Per un esempio nelle app Google Chat, vedi Aggiungere un paragrafo di testo formattato. Per saperne di più sulla formattazione del testo, vedi Formattare il testo nelle app Google Chat e Formattare il 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,
  "textSyntax": enum (TextSyntax)
}
Campi
text

string

Il testo visualizzato nel widget.

maxLines

integer

Il numero massimo di righe di testo visualizzate nel widget. Se il testo supera il numero massimo di righe specificato, i contenuti in eccesso vengono nascosti dietro un pulsante Mostra altro. Se il testo è uguale o più corto del numero massimo di righe specificato, non viene visualizzato il pulsante Mostra altro.

Il valore predefinito è 0, nel qual caso viene visualizzato tutto il contesto. I valori negativi vengono ignorati.

textSyntax

enum (TextSyntax)

La sintassi del testo. Se non è impostato, il testo viene visualizzato come HTML.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

TextSyntax

Sintassi da utilizzare per la formattazione del testo.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Enum
TEXT_SYNTAX_UNSPECIFIED Se non specificato, il testo viene sottoposto a rendering come HTML.
HTML Il testo viene visualizzato come HTML. Questo è il valore predefinito.
MARKDOWN Il testo viene visualizzato come Markdown.

Immagine

Un'immagine specificata da un URL e che può avere un'azione onClick. Per un esempio, vedi Aggiungere un'immagine.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
Campi
imageUrl

string

L'URL HTTPS che ospita l'immagine.

Ad esempio: 

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

object (OnClick)

Quando un utente fa clic sull'immagine, il clic attiva questa azione.

altText

string

Il testo alternativo di questa immagine, utilizzato per l'accessibilità.

OnClick

Rappresenta come rispondere quando gli utenti fanno clic su un elemento interattivo di una scheda, ad esempio un pulsante.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione 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.
}
Campi

Campo unione data.

data può essere solo uno dei seguenti:

action

object (Action)

Se specificata, un'azione viene attivata da questo onClick.

card

object (Card)

Se specificato, dopo aver fatto clic viene inserita una nuova scheda nella pila di schede.

Disponibile per i componenti aggiuntivi Google Workspace e non disponibile per le app Google Chat.

overflowMenu

object (OverflowMenu)

Se specificato, questo onClick apre un menu extra.

Azione

Un'azione che descrive il comportamento quando il modulo viene inviato. 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 (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction),
  "requiredWidgets": [
    string
  ],
  "allWidgetsAreRequired": boolean
}
Campi
function

string

Una funzione personalizzata da richiamare quando l'elemento contenitore viene cliccato o attivato in altro modo.

Per un esempio di utilizzo, vedi Leggere i dati del modulo.

parameters[]

object (ActionParameter)

Elenco dei parametri di azione.

loadIndicator

enum (LoadIndicator)

Specifica l'indicatore di caricamento che l'azione mostra durante la chiamata all'azione.

persistValues

boolean

Indica se i valori del modulo vengono mantenuti dopo l'azione. Il valore predefinito è false.

Se true, i valori del modulo rimangono dopo l'attivazione dell'azione. Per consentire all'utente di apportare modifiche durante l'elaborazione dell'azione, imposta LoadIndicator su NONE. Per i messaggi delle schede nelle app di chat, devi anche impostare ResponseType dell'azione su UPDATE_MESSAGE e utilizzare lo stesso cardId della scheda che conteneva l'azione.

Se false, i valori del modulo vengono cancellati quando viene attivata l'azione. Per impedire all'utente di apportare modifiche durante l'elaborazione dell'azione, imposta LoadIndicator su SPINNER.

interaction

enum (Interaction)

(Facoltativo) Obbligatorio quando si apre una finestra di dialogo.

Cosa fare in risposta a un'interazione con un utente, ad esempio quando un utente fa clic su un pulsante in un messaggio della scheda.

Se non specificato, l'app risponde eseguendo un action , ad esempio aprendo un link o eseguendo una funzione, come di consueto.

Se specifichi un interaction, l'app può rispondere in modi interattivi speciali. Ad esempio, impostando interaction su OPEN_DIALOG, l'app può aprire una finestra di dialogo. Se specificato, non viene visualizzato un indicatore di caricamento. Se specificato per un componente aggiuntivo, l'intera scheda viene eliminata e non viene visualizzato nulla nel client.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

requiredWidgets[]

string

(Facoltativo) Riempi questo elenco con i nomi dei widget necessari per un invio valido di questa azione.

Se i widget elencati qui non hanno un valore quando viene richiamata questa azione, l'invio del modulo viene interrotto.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

allWidgetsAreRequired

boolean

(Facoltativo) Se il valore è true, tutti i widget vengono considerati obbligatori per questa azione.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

ActionParameter

Elenco dei parametri stringa da fornire quando viene richiamato il metodo di azione. Ad esempio, considera tre pulsanti di posticipo: Posticipa ora, Posticipa di un giorno o Posticipa alla prossima settimana. Puoi utilizzare action method = snooze(), passando il tipo di posticipo e il tempo di posticipo 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

string

Il nome del parametro per lo script dell'azione.

value

string

Il valore del parametro.

LoadIndicator

Specifica l'indicatore di caricamento che l'azione mostra durante la chiamata all'azione.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Enum
SPINNER Visualizza un indicatore di caricamento per segnalare che i contenuti sono in fase di caricamento.
NONE Non viene visualizzato nulla.

Interazione

(Facoltativo) Obbligatorio quando si apre una finestra di dialogo.

Cosa fare in risposta a un'interazione con un utente, ad esempio quando un utente fa clic su un pulsante in un messaggio della scheda.

Se non specificato, l'app risponde eseguendo un action , ad esempio aprendo un link o eseguendo una funzione, come di consueto.

Se specifichi un interaction, l'app può rispondere in modi interattivi speciali. Ad esempio, impostando interaction su OPEN_DIALOG, l'app può aprire una finestra di dialogo.

Se specificato, non viene visualizzato un indicatore di caricamento. Se specificato per un componente aggiuntivo, l'intera scheda viene eliminata e non viene visualizzato nulla nel client.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Enum
INTERACTION_UNSPECIFIED Valore predefinito. L'azione action viene eseguita normalmente.
OPEN_DIALOG

Apre una finestra di dialogo, un'interfaccia basata su schede e finestre che le app di chat utilizzano per interagire con gli utenti.

Supportato solo dalle app di chat in risposta ai clic sui pulsanti dei messaggi delle schede. Se specificato per un componente aggiuntivo, l'intera scheda viene eliminata e non viene visualizzato nulla nel client.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

OpenAs

Quando un'azione OnClick apre un link, il client può aprirlo come finestra a schermo intero (se questo è il frame utilizzato dal client) o come 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 è supportato da tutti i client.

Disponibile per i componenti aggiuntivi Google Workspace e non disponibile per le app Google Chat.

Enum
FULL_SIZE Il link si apre come finestra a grandezza naturale (se questo è il frame utilizzato dal client).
OVERLAY Il link si apre come overlay, ad esempio un popup.

OnClose

Cosa fa il client quando un link aperto da un'azione OnClick viene chiuso.

L'implementazione dipende dalle funzionalità della piattaforma client. Ad esempio, un browser web potrebbe aprire un link in una finestra popup con un OnClose gestore.

Se sono impostati entrambi i gestori OnOpen e OnClose e la piattaforma client non supporta entrambi i valori, OnClose ha la precedenza.

Disponibile per i componenti aggiuntivi Google Workspace e non disponibile per le app Google Chat.

Enum
NOTHING Valore predefinito. La carta non viene ricaricata e non succede nulla.
RELOAD

Ricarica la scheda dopo la chiusura della finestra secondaria.

Se utilizzata insieme a OpenAs.OVERLAY, la finestra secondaria funge da finestra di dialogo modale e la scheda principale viene bloccata finché la finestra secondaria non si chiude.

OverflowMenu

Un widget che presenta un menu popup con una o più azioni che gli utenti possono richiamare. Ad esempio, mostrare azioni non principali in una scheda. Puoi utilizzare questo widget quando le azioni non rientrano nello spazio disponibile. Per utilizzarlo, specifica questo widget nell'azione OnClick dei widget che lo supportano. Ad esempio, in un Button.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "items": [
    {
      object (OverflowMenuItem)
    }
  ]
}
Campi
items[]

object (OverflowMenuItem)

Obbligatorio. L'elenco delle opzioni di menu.

OverflowMenuItem

Un'opzione che gli utenti possono richiamare in un menu extra.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

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

object (Icon)

L'icona visualizzata davanti al testo.

text

string

Obbligatorio. Il testo che identifica o descrive l'articolo agli utenti.

onClick

object (OnClick)

Obbligatorio. L'azione richiamata quando viene selezionata un'opzione di menu. Questo OnClick non può contenere un OverflowMenu, qualsiasi OverflowMenu specificato viene eliminato e la voce di menu disattivata.

disabled

boolean

Indica se l'opzione di menu è disattivata. Il valore predefinito è false.

Icona

Un'icona visualizzata in un widget su una scheda. Per un esempio nelle app Google Chat, vedi Aggiungere un'icona.

Supporta icone integrate e personalizzate.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione 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.
}
Campi
altText

string

(Facoltativo) Una descrizione dell'icona utilizzata per l'accessibilità. Se non specificato, viene fornito il valore predefinito Button. Come best practice, dovresti impostare una descrizione utile di ciò che mostra l'icona e, se applicabile, di ciò che fa. Ad esempio, A user's account portrait o Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/workspace/chat.

Se l'icona è impostata in un Button, il altText viene visualizzato come testo di aiuto quando l'utente passa il mouse sopra il pulsante. Tuttavia, se il pulsante imposta anche text, l'icona altText viene ignorata.

imageType

enum (ImageType)

Lo stile di ritaglio applicato all'immagine. In alcuni casi, l'applicazione di un CIRCLE ritaglio fa sì che l'immagine venga disegnata più grande di un'icona integrata.

Campo unione icons. L'icona visualizzata nel widget sulla scheda. icons può essere solo uno dei seguenti:
knownIcon

string

Visualizza una delle icone integrate fornite da Google Workspace.

Ad esempio, per visualizzare un'icona a forma di aereo, specifica AIRPLANE. Per un autobus, specifica BUS.

Per un elenco completo delle icone supportate, consulta Icone integrate.

iconUrl

string

Mostra un'icona personalizzata ospitata a un URL HTTPS.

Ad esempio: 

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

I tipi di file supportati includono .png e .jpg.

materialIcon

object (MaterialIcon)

Visualizza una delle icone Google Material.

Ad esempio, per visualizzare un'icona della casella di controllo, utilizza 

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

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

MaterialIcon

Un'icona Google Material, che include oltre 2500 opzioni.

Ad esempio, per visualizzare un'icona di casella di controllo con peso e grado personalizzati, scrivi quanto segue: 

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

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "name": string,
  "fill": boolean,
  "weight": integer,
  "grade": integer
}
Campi
name

string

Il nome dell'icona definito nell'icona Google Material, ad esempio check_box. I nomi non validi vengono abbandonati e sostituiti con una stringa vuota, il che comporta il mancato rendering dell'icona.

fill

boolean

Indica se l'icona viene visualizzata come riempita. Il valore predefinito è false.

Per visualizzare l'anteprima delle diverse impostazioni delle icone, vai a Icone dei caratteri Google e modifica le impostazioni in Personalizza.

weight

integer

Lo spessore del tratto dell'icona. Scegli tra {100, 200, 300, 400, 500, 600, 700}. Se assente, il valore predefinito è 400. Se viene specificato un altro valore, viene utilizzato il valore predefinito.

Per visualizzare l'anteprima delle diverse impostazioni delle icone, vai a Icone dei caratteri Google e modifica le impostazioni in Personalizza.

grade

integer

Il peso e il grado influiscono sullo spessore di un simbolo. Gli aggiustamenti al voto sono più granulari rispetto agli aggiustamenti al peso e hanno un impatto ridotto sulle dimensioni del simbolo. Scegli tra {-25, 0, 200}. Se assente, il valore predefinito è 0. Se viene specificato un altro valore, viene utilizzato il valore predefinito.

Per visualizzare l'anteprima delle diverse impostazioni delle icone, vai a Icone dei caratteri Google e modifica le impostazioni in Personalizza.

DecoratedText

Un widget che mostra il testo con decorazioni opzionali, ad esempio 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 Visualizzare testo con testo decorativo.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "startIconVerticalAlignment": enum (VerticalAlignment),
  "topLabel": string,
  "topLabelText": {
    object (TextParagraph)
  },
  "text": string,
  "contentText": {
    object (TextParagraph)
  },
  "wrapText": boolean,
  "bottomLabel": string,
  "bottomLabelText": {
    object (TextParagraph)
  },
  "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.
}
Campi
icon
(deprecated)

object (Icon)

Deprecata a favore di startIcon.

startIcon

object (Icon)

L'icona visualizzata davanti al testo.

startIconVerticalAlignment

enum (VerticalAlignment)

(Facoltativo) Allineamento verticale dell'icona di avvio. Se non impostata, l'icona verrà centrata verticalmente.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

topLabel

string

Il testo visualizzato sopra text. Tronca sempre.

topLabelText

object (TextParagraph)

TextParagraph equivalente a topLabel. Tronca sempre. Consente una formattazione più complessa rispetto a topLabel.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

text

string

Obbligatorio. Il testo principale.

Supporta la formattazione semplice. Per saperne di più sulla formattazione del testo, vedi Formattare il testo nelle app Google Chat e Formattare il testo nei componenti aggiuntivi di Google Workspace.

contentText

object (TextParagraph)

TextParagraph equivalente a text. Consente una formattazione più complessa rispetto a text.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

wrapText

boolean

L'impostazione del testo a capo. Se true, il testo va a capo e viene visualizzato su più righe. In caso contrario, il testo viene troncato.

Si applica solo a text, non a topLabel e bottomLabel.

bottomLabel

string

Il testo visualizzato sotto text. Sempre a capo.

bottomLabelText

object (TextParagraph)

TextParagraph equivalente a bottomLabel. Sempre a capo. Consente una formattazione più complessa rispetto a bottomLabel.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

onClick

object (OnClick)

Questa azione viene attivata quando gli utenti fanno clic su topLabel o bottomLabel.

Campo unione control. Un pulsante, un interruttore, una casella di controllo o un'immagine che viene visualizzata a destra del testo nel widget decoratedText. control può essere solo uno dei seguenti:
button

object (Button)

Un pulsante su cui un utente può fare clic per attivare un'azione.

switchControl

object (SwitchControl)

Un widget di attivazione/disattivazione su cui un utente può fare clic per modificarne lo stato e attivare un'azione.

endIcon

object (Icon)

Un'icona visualizzata dopo il testo.

Supporta icone integrate e personalizzate.

VerticalAlignment

Rappresenta l'attributo di allineamento verticale.

Enum
VERTICAL_ALIGNMENT_UNSPECIFIED Tipo non specificato. Non utilizzare.
TOP Allineamento alla posizione superiore.
MIDDLE Allineamento alla posizione centrale.
BOTTOM Allineamento alla posizione inferiore.

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 Aggiungere un pulsante.

Per trasformare un'immagine in un pulsante cliccabile, specifica un Image (non un ImageComponent) e imposta un'azione onClick.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

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

string

Il testo visualizzato all'interno del pulsante.

icon

object (Icon)

Un'icona visualizzata all'interno del pulsante. Se sono impostati sia icon che text, l'icona viene visualizzata prima del testo.

color

object (Color)

(Facoltativo) Il colore del pulsante. Se impostato, il pulsante type è impostato su FILLED e il colore dei campi text e icon è impostato su un colore a contrasto per la leggibilità. Ad esempio, se il colore del pulsante è impostato su blu, il testo o le icone nel pulsante sono impostati su bianco.

Per impostare il colore del pulsante, specifica un valore per i campi red, green e blue. Il valore deve essere un numero float compreso tra 0 e 1 in base al valore del colore RGB, dove 0 (0/255) rappresenta l'assenza di colore e 1 (255/255) rappresenta l'intensità massima del colore.

Ad esempio, il seguente codice imposta il colore rosso alla massima intensità: 

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

Il campo alpha non è disponibile per il colore del pulsante. Se specificato, questo campo viene ignorato.

onClick

object (OnClick)

Obbligatorio. L'azione da eseguire quando un utente fa clic sul pulsante, ad esempio l'apertura di un collegamento ipertestuale o l'esecuzione di una funzione personalizzata.

disabled

boolean

Se true, il pulsante viene visualizzato in stato inattivo e non risponde alle azioni dell'utente.

altText

string

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 collegamento 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

enum (Type)

(Facoltativo) Il tipo di pulsante. Se non viene impostato, il tipo di pulsante predefinito è OUTLINED. Se il campo color è impostato, il tipo di pulsante viene forzato su FILLED e qualsiasi valore impostato per questo campo viene ignorato.

Colore

Rappresenta un colore nello spazio colore RGBA. Questa rappresentazione è progettata per semplificare la conversione da e verso le rappresentazioni del colore in varie lingue, piuttosto che per la compattezza. Ad esempio, i campi di questa rappresentazione possono essere forniti in modo semplice al costruttore di java.awt.Color in Java; possono anche essere forniti in modo semplice al metodo +colorWithRed:green:blue:alpha di UIColor in iOS; e, con un po' di lavoro, possono essere facilmente formattati in una stringa rgba() CSS in JavaScript.

Questa pagina di riferimento non contiene informazioni sullo spazio colore assoluto da utilizzare 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 dei colori, le implementazioni, se non diversamente documentato, considerano due colori uguali se tutti i loro valori di rosso, verde, blu e alfa differiscono al massimo di 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

number

La quantità di rosso nel colore come valore nell'intervallo [0, 1].

green

number

La quantità di verde nel colore come valore nell'intervallo [0, 1].

blue

number

La quantità di blu nel colore come valore nell'intervallo [0, 1].

alpha

number

La frazione di questo colore da applicare al pixel. ovvero il colore finale del pixel è definito dall'equazione:

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

Ciò significa che un valore di 1.0 corrisponde a un colore pieno, mentre un valore di 0.0 corrisponde a un colore completamente trasparente. Utilizza un messaggio wrapper anziché un semplice scalare float, in modo da poter distinguere tra un valore predefinito e il valore che viene annullato. Se omesso, questo oggetto colore viene visualizzato come un colore solido (come se al valore alfa fosse stato assegnato esplicitamente un valore di 1.0).

Tipo

(Facoltativo) Il tipo di pulsante. Se il campo color è impostato, il campo type è forzato su FILLED.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Enum
TYPE_UNSPECIFIED Non utilizzare. Non specificato.
OUTLINED I pulsanti con contorni sono pulsanti con enfasi media. In genere contengono azioni importanti, ma non sono l'azione principale in un'app di chat o in un componente aggiuntivo.
FILLED Un pulsante con riempimento ha un contenitore con un colore pieno. Ha il maggiore impatto visivo ed è consigliato per l'azione importante e principale in un'app di chat o in un componente aggiuntivo.
FILLED_TONAL Un pulsante tonale con riempimento è un'alternativa intermedia tra i pulsanti con riempimento e quelli con contorno. Sono utili in contesti in cui un pulsante con priorità inferiore richiede un'enfasi leggermente maggiore rispetto a un pulsante contorno.
BORDERLESS Un pulsante non ha un contenitore invisibile nel suo stato predefinito. Viene spesso utilizzato per le azioni con la priorità più bassa, soprattutto quando vengono presentate più opzioni.

SwitchControl

Un interruttore a levetta o una casella di controllo all'interno di un decoratedText widget.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Supportato solo nel widget decoratedText.

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

string

Il nome con cui il widget di attivazione/disattivazione viene identificato in un evento di input del modulo.

Per informazioni dettagliate sull'utilizzo degli input dei moduli, vedi Ricevere i dati dei moduli.

value

string

Il valore inserito da un utente, restituito nell'ambito di un evento di input del modulo.

Per informazioni dettagliate sull'utilizzo degli input dei moduli, vedi Ricevere i dati dei moduli.

selected

boolean

Quando true, l'opzione è selezionata.

onChangeAction

object (Action)

L'azione da eseguire quando lo stato del sensore viene modificato, ad esempio la funzione da eseguire.

controlType

enum (ControlType)

Come viene visualizzato l'interruttore nell'interfaccia utente.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

ControlType

Come viene visualizzato l'interruttore nell'interfaccia utente.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Enum
SWITCH Un interruttore a levetta.
CHECKBOX Deprecata 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 Aggiungere un pulsante.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Campi
buttons[]

object (Button)

Un array di pulsanti.

TextInput

Un campo in cui gli utenti possono inserire testo. Supporta suggerimenti e azioni di modifica. Supporta la convalida dell'invio del modulo. Quando Action.all_widgets_are_required è impostato su true o questo widget è specificato in Action.required_widgets, l'azione di invio viene bloccata a meno che non venga inserito un valore. Per un esempio nelle app Google Chat, vedi Aggiungere un campo in cui un utente può inserire testo.

Le app di chat ricevono ed elaborano il valore del testo inserito durante gli eventi di input del modulo. Per informazioni dettagliate sull'utilizzo degli input dei moduli, vedi Ricevere i dati dei moduli.

Quando devi raccogliere dati astratti o non definiti dagli utenti, utilizza un input di testo. Per raccogliere dati definiti o enumerati dagli utenti, utilizza il widget SelectionInput.

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 (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  },
  "validation": {
    object (Validation)
  },
  "placeholderText": string
}
Campi
name

string

Il nome con cui l'input di testo viene identificato in un evento di input del modulo.

Per informazioni dettagliate sull'utilizzo degli input dei moduli, vedi Ricevere i dati dei moduli.

label

string

Il testo visualizzato sopra il campo di inserimento del testo nell'interfaccia utente.

Specifica il testo che aiuta l'utente a inserire le informazioni necessarie alla tua app. Ad esempio, se stai chiedendo il nome di qualcuno, ma hai bisogno specificamente del cognome, scrivi surname anziché name.

Obbligatorio se hintText non è specificato. Altrimenti, è facoltativo.

hintText

string

Testo visualizzato sotto il campo di immissione del testo, pensato per aiutare gli utenti a inserire un determinato valore. Questo testo è sempre visibile.

Obbligatorio se label non è specificato. Altrimenti, è facoltativo.

value

string

Il valore inserito da un utente, restituito nell'ambito di un evento di input del modulo.

Per informazioni dettagliate sull'utilizzo degli input dei moduli, vedi Ricevere i dati dei moduli.

type

enum (Type)

Come appare un campo di input di testo nell'interfaccia utente. Ad esempio, se il campo è a una o più righe.

onChangeAction

object (Action)

Cosa fare quando si verifica una modifica nel campo di input di testo. Ad esempio, un utente che aggiunge o elimina testo nel campo.

Esempi di azioni da intraprendere includono l'esecuzione di una funzione personalizzata o l'apertura di una finestra di dialogo in Google Chat.

initialSuggestions

object (Suggestions)

Valori suggeriti che gli utenti possono inserire. Questi valori vengono visualizzati quando gli utenti fanno clic all'interno del campo di input di testo. Man mano che gli utenti digitano, i valori suggeriti vengono filtrati dinamicamente in base a ciò che hanno digitato.

Ad esempio, un campo di input di testo per il linguaggio di programmazione potrebbe suggerire Java, JavaScript, Python e C++. Quando gli utenti iniziano a digitare Jav, l'elenco dei suggerimenti viene filtrato per mostrare solo Java e JavaScript.

I valori suggeriti aiutano gli utenti a inserire valori che la tua app può interpretare. Quando si fa riferimento a JavaScript, alcuni utenti potrebbero inserire javascript e altri java script. Suggerimenti JavaScript possono 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.

autoCompleteAction

object (Action)

(Facoltativo) Specifica l'azione da intraprendere quando il campo di immissione del testo fornisce suggerimenti agli utenti che interagiscono con esso.

Se non specificati, i suggerimenti vengono impostati da initialSuggestions e vengono elaborati dal client.

Se specificata, l'app esegue l'azione specificata qui, ad esempio l'esecuzione di una funzione personalizzata.

Disponibile per i componenti aggiuntivi Google Workspace e non disponibile per le app Google Chat.

validation

object (Validation)

Specifica la convalida del formato di input necessaria per questo campo di testo.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

placeholderText

string

Testo visualizzato nel campo di immissione del testo quando il campo è vuoto. Utilizza questo testo per invitare gli utenti a inserire un valore. Ad esempio, Enter a number from 0 to 100.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Tipo

Come appare un campo di input di testo nell'interfaccia utente. Ad esempio, se si tratta di un campo di input a una sola riga o di un input multilinea. Se initialSuggestions è 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 input del testo ha un'altezza fissa di una riga.
MULTIPLE_LINE Il campo di input del testo ha un'altezza fissa di più righe.

RenderActions

Un insieme di istruzioni di rendering che indicano a una scheda di eseguire un'azione oppure all'app host del componente aggiuntivo o all'app di chat di eseguire un'azione specifica dell'app.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Campi
action

Action

Azione

Campi
navigations[]

Navigation

Invia, apre o aggiorna una scheda.

Componenti aggiuntivi in Google Chat.

Aggiungi una nuova carta alla pila (vai avanti). Per le app di chat, disponibile solo per la home page dell'app.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

navigations: {
  pushCard: CARD
}

Sostituisci la prima carta con una nuova. Per le app di chat, disponibile solo per la home page dell'app.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

navigations: {
  updateCard: CARD
}

Suggerimenti

Valori suggeriti che gli utenti possono inserire. Questi valori vengono visualizzati quando gli utenti fanno clic all'interno del campo di input di testo. Man mano che gli utenti digitano, i valori suggeriti vengono filtrati dinamicamente in base a ciò che hanno digitato.

Ad esempio, un campo di input di testo per il linguaggio di programmazione potrebbe suggerire Java, JavaScript, Python e C++. Quando gli utenti iniziano a digitare Jav, l'elenco dei suggerimenti viene filtrato per mostrare Java e JavaScript.

I valori suggeriti aiutano gli utenti a inserire valori che la tua app può interpretare. Quando si fa riferimento a JavaScript, alcuni utenti potrebbero inserire javascript e altri java script. Suggerimenti JavaScript possono 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 (SuggestionItem)
    }
  ]
}
Campi
items[]

object (SuggestionItem)

Un elenco di suggerimenti utilizzati per i consigli di completamento automatico nei campi di input di testo.

SuggestionItem

Un valore suggerito che gli utenti possono inserire in un campo di input di testo.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{

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

Campo unione content.

content può essere solo uno dei seguenti:

text

string

Il valore di un input suggerito per un campo di input di testo. Equivale a ciò che gli utenti inseriscono personalmente.

Convalida

Rappresenta i dati necessari per la convalida del widget a cui è collegato.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "characterLimit": integer,
  "inputType": enum (InputType)
}
Campi
characterLimit

integer

Specifica il limite di caratteri per i widget di inserimento del testo. Tieni presente che questo valore viene utilizzato solo per l'input di testo e viene ignorato per gli altri widget.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

inputType

enum (InputType)

Specifica il tipo di widget di input.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

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 float.
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 che gli utenti possono selezionare. Supporta la convalida dell'invio del modulo solo per i menu dropdown e multiselect. Quando Action.all_widgets_are_required è impostato su true o questo widget è specificato in Action.required_widgets, l'azione di invio viene bloccata a meno che non venga selezionato un valore. 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 Aggiungere elementi dell'interfaccia utente selezionabili.

Le app di chat possono elaborare il valore degli elementi selezionati o inseriti dagli utenti. Per informazioni dettagliate sull'utilizzo degli input dei moduli, vedi Ricevere i dati dei moduli.

Per raccogliere dati indefiniti o astratti dagli utenti, utilizza il widget TextInput.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

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

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

string

Obbligatorio. Il nome che identifica l'input di selezione in un evento di input del modulo.

Per informazioni dettagliate sull'utilizzo degli input dei moduli, vedi Ricevere i dati dei moduli.

label

string

Il testo visualizzato sopra il campo di input della selezione nell'interfaccia utente.

Specifica il testo che aiuta l'utente a inserire le informazioni necessarie alla tua app. Ad esempio, se gli utenti selezionano l'urgenza di una richiesta di lavoro da un menu a discesa, l'etichetta potrebbe essere "Urgenza" o "Seleziona urgenza".

type

enum (SelectionType)

Il tipo di elementi visualizzati dagli utenti in un SelectionInput widget. I tipi di selezione supportano diversi tipi di interazioni. Ad esempio, gli utenti possono selezionare una o più caselle di controllo, ma possono selezionare un solo valore da un menu a discesa.

items[]

object (SelectionItem)

Un array di elementi selezionabili. Ad esempio, un array di pulsanti di opzione o caselle di controllo. Supporta fino a 100 elementi.

onChangeAction

object (Action)

Se specificato, il modulo viene inviato quando cambia la selezione. Se non viene specificato, devi specificare un pulsante separato che invia il modulo.

Per informazioni dettagliate sull'utilizzo degli input dei moduli, vedi Ricevere i dati dei moduli.

multiSelectMaxSelectedItems

integer

Per i menu a selezione multipla, il numero massimo di elementi che un utente può selezionare. Il valore minimo è 1 articolo. Se non specificato, il valore predefinito è 3 elementi.

multiSelectMinQueryLength

integer

Per i menu a selezione multipla, il numero di caratteri di testo che un utente inserisce prima che il menu restituisca gli elementi di selezione suggeriti.

Se non è impostato, il menu a selezione multipla utilizza i seguenti valori predefiniti:

  • Se il menu utilizza un array statico di SelectionInput elementi, il valore predefinito è 0 caratteri e gli elementi vengono compilati immediatamente dall'array.
  • Se il menu utilizza un'origine dati dinamica ( multi_select_data_source), il valore predefinito è 3 caratteri prima di eseguire una query sull'origine dati per restituire gli elementi suggeriti.

Campo unione multi_select_data_source. Per un menu a selezione multipla, un'origine dati che compila dinamicamente gli elementi di selezione.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace. multi_select_data_source può essere solo uno dei seguenti:

externalDataSource

object (Action)

Un'origine dati esterna, ad esempio un database relazionale.

platformDataSource

object (PlatformDataSource)

Un'origine dati di Google Workspace.

SelectionType

Il formato degli elementi che gli utenti possono selezionare. Opzioni diverse supportano tipi diversi 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 interruttori, ad esempio, non è supportata.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Enum
CHECK_BOX Un insieme di caselle di controllo. Gli utenti possono selezionare una o più caselle di controllo.
RADIO_BUTTON Un insieme di pulsanti di opzione. Gli utenti possono selezionare un solo pulsante di opzione.
SWITCH Un insieme di interruttori. Gli utenti possono attivare uno o più interruttori.
DROPDOWN Un menu a discesa. Gli utenti possono selezionare un elemento dal menu.
MULTI_SELECT

Un menu con una casella di testo. Gli utenti possono digitare e selezionare uno o più elementi. Per i componenti aggiuntivi di Google Workspace, devi compilare gli elementi utilizzando un array statico di SelectionItem oggetti.

Per le app Google Chat, puoi anche compilare gli elementi utilizzando un'origine dati dinamica e suggerire automaticamente gli elementi mentre gli utenti digitano nel menu. Ad esempio, gli utenti possono iniziare a digitare il nome di uno spazio Google Chat e il widget suggerisce automaticamente lo spazio. Per compilare dinamicamente gli elementi di un menu a selezione multipla, utilizza uno dei seguenti tipi di origini dati:

  • Dati di Google Workspace: gli elementi vengono compilati utilizzando i dati di Google Workspace, ad esempio utenti di Google Workspace o spazi di Google Chat.
  • Dati esterni: gli elementi vengono compilati da un'origine dati esterna al di fuori di Google Workspace.

Per esempi di come implementare i menu a selezione multipla per le app di Chat, vedi Aggiungere un menu a selezione multipla.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

SelectionItem

Un elemento che gli utenti possono selezionare in un input di selezione, ad esempio una casella di controllo o un interruttore. Supporta fino a 100 elementi.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "text": string,
  "value": string,
  "selected": boolean,
  "bottomText": string,

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

string

Il testo che identifica o descrive l'articolo agli utenti.

value

string

Il valore associato a questo elemento. Il client deve utilizzarlo come valore di input del modulo.

Per informazioni dettagliate sull'utilizzo degli input dei moduli, vedi Ricevere i dati dei moduli.

selected

boolean

Se l'elemento è selezionato per impostazione predefinita. Se l'input di selezione accetta un solo valore (ad esempio per i pulsanti di opzione o un menu a discesa), imposta questo campo solo per un elemento.

bottomText

string

Per i menu a selezione multipla, una descrizione o un'etichetta di testo visualizzata sotto il campo text dell'elemento.

Campo unione start_icon. Per i menu a selezione multipla, l'URL dell'icona visualizzata accanto al campo text dell'elemento. Supporta i file PNG e JPEG. Deve essere un URL HTTPS. Ad esempio, https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png. start_icon può essere solo uno dei seguenti:
startIconUri

string

PlatformDataSource

Per un SelectionInput widget che utilizza un menu a selezione multipla, un'origine dati di Google Workspace. Utilizzato per compilare gli elementi in un menu a selezione multipla.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Rappresentazione 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.
}
Campi
Campo unione data_source. L'origine dati. data_source può essere solo uno dei seguenti:
commonDataSource

enum (CommonDataSource)

Un'origine dati condivisa da tutte le applicazioni Google Workspace, ad esempio gli utenti di un'organizzazione Google Workspace.

hostAppDataSource

object (HostAppDataSourceMarkup)

Un'origine dati univoca per un'applicazione host Google Workspace, ad esempio gli spazi in Google Chat.

Questo campo supporta le librerie client delle API di Google, ma non è disponibile nelle librerie client di Cloud. Per saperne di più, vedi Installare le librerie client.

CommonDataSource

Un'origine dati condivisa da tutte le applicazioni Google Workspace.

Disponibile per le app Google Chat e non disponibile 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 propria organizzazione Google Workspace.

HostAppDataSourceMarkup

Per un SelectionInput widget che utilizza un menu a selezione multipla, un'origine dati di un'applicazione Google Workspace. L'origine dati compila gli elementi di selezione per il menu a selezione multipla.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Rappresentazione 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.
}
Campi
Campo unione data_source. L'applicazione Google Workspace che compila gli elementi per un menu a selezione multipla. data_source può essere solo uno dei seguenti:
chatDataSource

object (ChatClientDataSourceMarkup)

Un'origine dati di Google Chat.

ChatClientDataSourceMarkup

Per un SelectionInput widget che utilizza un menu a selezione multipla, un'origine dati di Google Chat. L'origine dati compila gli elementi di selezione per il menu a selezione multipla. Ad esempio, un utente può selezionare gli spazi di Google Chat di cui è membro.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{

  // Union field source can be only one of the following:
  "spaceDataSource": {
    object (SpaceDataSource)
  }
  // End of list of possible types for union field source.
}
Campi
Campo unione source. L'origine dati Google Chat. source può essere solo uno dei seguenti:
spaceDataSource

object (SpaceDataSource)

Gli spazi Google Chat di cui l'utente è membro.

SpaceDataSource

Un'origine dati che popola gli spazi di Google Chat come elementi di selezione per un menu a selezione multipla. Vengono compilati solo gli spazi di cui l'utente è membro.

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "defaultToCurrentSpace": boolean
}
Campi
defaultToCurrentSpace

boolean

Se impostato su true, il menu di selezione multipla seleziona lo spazio di Google Chat corrente come elemento per impostazione predefinita.

DateTimePicker

Consente agli utenti di inserire una data, un orario o entrambi. Supporta la convalida dell'invio del modulo. Quando Action.all_widgets_are_required è impostato su true o questo widget è specificato in Action.required_widgets, l'azione di invio viene bloccata a meno che non venga selezionato un valore. Per un esempio nelle app Google Chat, vedi Consentire 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 valida, il selettore mostra un errore che invita gli utenti a inserire le informazioni correttamente.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

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

string

Il nome con cui DateTimePicker viene identificato in un evento di input del modulo.

Per informazioni dettagliate sull'utilizzo degli input dei moduli, vedi Ricevere i dati dei moduli.

label

string

Il testo che chiede agli utenti di inserire una data, un orario o una data e un orario. Ad esempio, se gli utenti stanno prenotando un appuntamento, utilizza un'etichetta come Appointment date o Appointment date and time.

type

enum (DateTimePickerType)

Indica se il widget supporta l'inserimento di una data, un orario o la data e l'ora.

valueMsEpoch

int64

Il valore predefinito visualizzato nel widget, in millisecondi dal tempo Unix.

Specifica il valore in base al tipo di selettore ( DateTimePickerType):

  • DATE_AND_TIME : una data e un'ora del calendario in formato UTC. Ad esempio, per rappresentare il 1° gennaio 2023 alle 12:00 UTC, utilizza 1672574400000.
  • DATE_ONLY : una data del calendario alle ore 00:00:00 UTC. Ad esempio, per rappresentare il 1° gennaio 2023, utilizza 1672531200000.
  • TIME_ONLY : un orario in UTC. Ad esempio, per rappresentare le 12:00, utilizza 43200000 (o 12 * 60 * 60 * 1000).
timezoneOffsetDate

integer

Il numero che rappresenta la differenza del fuso orario rispetto all'UTC, in minuti. Se impostato, il valueMsEpoch viene visualizzato nel fuso orario specificato. Se non viene impostato, il valore predefinito è l'impostazione del fuso orario dell'utente.

onChangeAction

object (Action)

Attivato quando l'utente fa clic su Salva o Cancella dall'interfaccia DateTimePicker.

DateTimePickerType

Il formato per la data e l'ora nel widget DateTimePicker. Determina se gli utenti possono inserire una data, un'ora o entrambe.

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 inseriscono 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 Aggiungere 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 Columns. Per un esempio nelle app Google Chat, vedi Visualizzare una griglia con una raccolta di elementi.

Una griglia supporta un numero qualsiasi di colonne e 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 due 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 (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
Campi
title

string

Il testo visualizzato nell'intestazione della griglia.

items[]

object (GridItem)

Gli elementi da visualizzare nella griglia.

borderStyle

object (BorderStyle)

Lo stile del bordo da applicare a ogni elemento della griglia.

columnCount

integer

Il numero di colonne da visualizzare nella griglia. Se questo campo non è specificato, viene utilizzato un valore predefinito, che varia a seconda di dove viene visualizzata la griglia (dialogo o companion).

onClick

object (OnClick)

Questo callback viene riutilizzato da ogni singolo elemento della griglia, ma con l'identificatore e l'indice dell'elemento nell'elenco degli 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 che un'immagine.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
Campi
id

string

Un identificatore specificato dall'utente per questo elemento della griglia. Questo identificatore viene restituito nei parametri di callback onClick della griglia principale.

image

object (ImageComponent)

L'immagine visualizzata nell'elemento della griglia.

title

string

Il titolo dell'elemento della griglia.

subtitle

string

Il sottotitolo dell'elemento della griglia.

layout

enum (GridItemLayout)

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 (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
Campi
imageUri

string

L'URL dell'immagine.

altText

string

L'etichetta di accessibilità per l'immagine.

cropStyle

object (ImageCropStyle)

Lo stile di ritaglio da applicare all'immagine.

borderStyle

object (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 (ImageCropType),
  "aspectRatio": number
}
Campi
type

enum (ImageCropType)

Il tipo di ritaglio.

aspectRatio

number

Le proporzioni da utilizzare se il tipo di ritaglio è RECTANGLE_CUSTOM.

Ad esempio, ecco come applicare proporzioni 16:9: 

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 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 il tipo e il colore del bordo.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

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

enum (BorderType)

Il tipo di bordo.

strokeColor

object (Color)

I colori da utilizzare quando il tipo è BORDER_TYPE_STROKE.

Per impostare il colore del tratto, specifica un valore per i campi red, green e blue. Il valore deve essere un numero float compreso tra 0 e 1 in base al valore del colore RGB, dove 0 (0/255) rappresenta l'assenza di colore e 1 (255/255) rappresenta l'intensità massima del colore.

Ad esempio, il seguente codice imposta il colore rosso alla massima intensità: 

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

Il campo alpha non è disponibile per il colore del tratto. Se specificato, questo campo viene ignorato.

cornerRadius

integer

Il raggio d'angolo per il bordo.

BorderType

Rappresenta i tipi di bordo 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 Nessun bordo.
STROKE Valore predefinito. Contorno.

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

Il widget Columns mostra fino a due colonne in una scheda o in una finestra di dialogo. Puoi aggiungere widget a ogni colonna; i widget vengono visualizzati nell'ordine in cui sono specificati. Per un esempio nelle app Google Chat, vedi Visualizzare schede e finestre di dialogo in colonne.

L'altezza di ogni colonna è determinata dalla colonna più alta. Ad esempio, se la prima colonna è più alta della seconda, entrambe le colonne hanno l'altezza della prima. Poiché ogni colonna può contenere un numero diverso di widget, non puoi definire righe o allineare i widget tra le colonne.

Le colonne vengono visualizzate una accanto all'altra. Puoi personalizzare la larghezza di ogni colonna utilizzando il campo HorizontalSizeStyle. Se la larghezza dello schermo dell'utente è troppo ridotta, la seconda colonna viene visualizzata 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 viene visualizzata su più righe se la larghezza dello schermo è inferiore o uguale a 300 pt.
  • Sui dispositivi Android, la seconda colonna viene visualizzata 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. Le interfacce utente dei componenti aggiuntivi che supportano le colonne includono:

  • La finestra di dialogo visualizzata quando gli utenti aprono il componente aggiuntivo da una bozza di email.
  • La finestra di dialogo visualizzata quando gli utenti aprono il componente aggiuntivo dal menu Aggiungi allegato in un evento di Google Calendar.
Rappresentazione JSON 
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
Campi
columnItems[]

object (Column)

Un array di colonne. Puoi includere fino a due colonne in una scheda o in una finestra di dialogo.

Colonna

Una colonna.

Componenti aggiuntivi di Google Workspace e app di chat

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

enum (HorizontalSizeStyle)

Specifica in che modo una colonna riempie la larghezza della scheda.

horizontalAlignment

enum (HorizontalAlignment)

Specifica se i widget sono allineati a sinistra, a destra o al centro di una colonna.

verticalAlignment

enum (VerticalAlignment)

Specifica se i widget sono allineati alla parte superiore, inferiore o centrale di una colonna.

widgets[]

object (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 riempie la larghezza della scheda. La larghezza di ogni colonna dipende sia dal HorizontalSizeStyle sia dalla larghezza dei widget all'interno della colonna.

Componenti aggiuntivi di Google Workspace e app di chat

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, ciascuna colonna occupa il 50% dello spazio.
FILL_MINIMUM_SPACE La colonna occupa lo spazio minimo 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 non disponibile 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, l'allineamento è a sinistra. Per i layout da destra a sinistra, l'allineamento è 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, allinea i widget a destra. Per i layout da destra a sinistra, allinea i widget a sinistra.

VerticalAlignment

Specifica se i widget sono allineati alla parte superiore, inferiore o centrale di una colonna.

Componenti aggiuntivi di Google Workspace e app di chat

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.

Componenti aggiuntivi di Google Workspace e app di chat

Rappresentazione 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.
}
Campi

Campo unione data.

data può essere solo uno dei seguenti:

textParagraph

object (TextParagraph)

TextParagraph widget.

image

object (Image)

Image widget.

decoratedText

object (DecoratedText)

DecoratedText widget.

buttonList

object (ButtonList)

ButtonList widget.

textInput

object (TextInput)

TextInput widget.

selectionInput

object (SelectionInput)

SelectionInput widget.

dateTimePicker

object (DateTimePicker)

DateTimePicker widget.

chipList

object (ChipList)

ChipList widget.

ChipList

Un elenco di chip disposti orizzontalmente, che possono scorrere orizzontalmente o andare a capo.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

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

enum (Layout)

Layout dell'elenco di chip specificato.

chips[]

object (Chip)

Un array di chip.

Layout

Il layout dell'elenco di chip.

Enum
LAYOUT_UNSPECIFIED Non utilizzare. Non specificato.
WRAPPED Valore predefinito. L'elenco dei chip va a capo se non c'è spazio orizzontale sufficiente.
HORIZONTAL_SCROLLABLE I chip scorrono orizzontalmente se non rientrano nello 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 i componenti aggiuntivi di Google Workspace.

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

object (Icon)

L'immagine dell'icona. Se sono impostati sia icon che text, l'icona viene visualizzata prima del testo.

label

string

Il testo visualizzato all'interno del chip.

onClick

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

boolean

Indica se la chip è in stato attivo e risponde alle azioni dell'utente. Il valore predefinito è true. Deprecato. Utilizza disabled in alternativa.

disabled

boolean

Indica se il chip è in uno stato non attivo e ignora le azioni dell'utente. Il valore predefinito è false.

altText

string

Il testo alternativo utilizzato per l'accessibilità.

Imposta un testo descrittivo che consenta agli utenti di sapere cosa fa il chip. Ad esempio, se un chip apre un collegamento 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".

Un carosello, noto anche come slider, ruota e mostra un elenco di widget in formato presentazione, con pulsanti che consentono di passare al widget precedente o successivo.

Ad esempio, questa è una rappresentazione JSON di un carosello che contiene tre widget di paragrafi di testo. 

{
  "carouselCards": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "First text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Second text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Third text paragraph in carousel",
          }
        }
      ]
    }
  ]
}

Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "carouselCards": [
    {
      object (CarouselCard)
    }
  ]
}
Campi
carouselCards[]

object (CarouselCard)

Un elenco di schede incluse nel carosello.

CarouselCard

Una scheda che può essere visualizzata come elemento del carosello. Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "widgets": [
    {
      object (NestedWidget)
    }
  ],
  "footerWidgets": [
    {
      object (NestedWidget)
    }
  ]
}
Campi
widgets[]

object (NestedWidget)

Un elenco di widget visualizzati nella scheda del carosello. I widget vengono visualizzati nell'ordine in cui sono specificati.

footerWidgets[]

object (NestedWidget)

Un elenco di widget visualizzati nella parte inferiore della scheda del carosello. I widget vengono visualizzati nell'ordine in cui sono specificati.

NestedWidget

Un elenco di widget che possono essere visualizzati in un layout contenitore, ad esempio un CarouselCard. Disponibile per le app Google Chat e non disponibile per i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "buttonList": {
    object (ButtonList)
  },
  "image": {
    object (Image)
  }
  // End of list of possible types for union field data.
}
Campi

Campo unione data.

data può essere solo uno dei seguenti:

textParagraph

object (TextParagraph)

Un widget paragrafo di testo.

buttonList

object (ButtonList)

Un widget elenco di pulsanti.

image

object (Image)

Un widget immagine.

CollapseControl

Rappresenta un controllo di espansione e compressione.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "horizontalAlignment": enum (HorizontalAlignment),
  "expandButton": {
    object (Button)
  },
  "collapseButton": {
    object (Button)
  }
}
Campi
horizontalAlignment

enum (HorizontalAlignment)

L'allineamento orizzontale del pulsante di espansione e compressione.

expandButton

object (Button)

(Facoltativo) Definisci un pulsante personalizzabile per espandere la sezione. Devono essere impostati sia il campo expandButton che il campo collapseButton. Solo un insieme di campi non avrà effetto. Se questo campo non è impostato, viene utilizzato il pulsante predefinito.

collapseButton

object (Button)

(Facoltativo) Definisci un tasto personalizzabile per comprimere la sezione. Devono essere impostati sia il campo expandButton che il campo collapseButton. Solo un insieme di campi non avrà effetto. Se questo campo non è impostato, viene utilizzato il pulsante predefinito.

DividerStyle

Lo stile del 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. Visualizza un divisore solido.
NO_DIVIDER Se impostato, non viene visualizzato alcun divisore. Questo stile rimuove completamente il divisore dal layout. Il risultato equivale a non aggiungere affatto un divisore.

CardAction

Un'azione della scheda è l'azione associata alla scheda. Ad esempio, una scheda della fattura potrebbe includere azioni come elimina fattura, invia fattura via email o apri la fattura in un browser.

Disponibile per i componenti aggiuntivi Google Workspace e non disponibile per le app Google Chat.

Rappresentazione JSON 
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
Campi
actionLabel

string

L'etichetta visualizzata come voce del menu Azione.

onClick

object (OnClick)

L'azione onClick per questa attività.

CardFixedFooter

Un piè di pagina persistente (sticky) che viene visualizzato in fondo alla scheda.

L'impostazione fixedFooter senza specificare un primaryButton o un secondaryButton causa un errore.

Per le app di chat, puoi utilizzare i piè di pagina fissi nelle finestre di dialogo, ma non nei messaggi con schede. Per un esempio nelle app Google Chat, vedi Aggiungere un piè di pagina persistente.

Disponibile per le app Google Chat e i componenti aggiuntivi di Google Workspace.

Rappresentazione JSON 
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
Campi
primaryButton

object (Button)

Il pulsante principale del piè di pagina fisso. Il pulsante deve essere un pulsante di testo con testo e colore impostati.

secondaryButton

object (Button)

Il pulsante secondario del piè di pagina fisso. Il pulsante deve essere un pulsante di testo con testo e colore impostati. Se secondaryButton è impostato, devi impostare anche primaryButton.

DisplayStyle

Nei componenti aggiuntivi di Google Workspace, determina la modalità di visualizzazione di una scheda.

Disponibile per i componenti aggiuntivi Google Workspace e non disponibile 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, coprendo parzialmente la scheda superiore corrente dello stack. Se fai clic sull'intestazione, la scheda viene visualizzata nello stack di schede. Se la scheda non ha un'intestazione, viene utilizzata un'intestazione generata.
REPLACE Valore predefinito. La scheda viene visualizzata sostituendo la visualizzazione della scheda superiore nella pila di schede.