Crea schede per le app Google Chat

Questa pagina descrive come creare i componenti e la struttura di una scheda. Le schede sono interfacce utente che le app Google Chat possono utilizzare per presentare e raccogliere informazioni dagli utenti di Chat. Le app di chat possono creare e visualizzare schede nelle seguenti interfacce:

  • Messaggi che contengono una o più schede.
  • Home page, ovvero una scheda visualizzata nella scheda Home nei messaggi diretti con l'app Chat.
  • Dialoghi, ovvero schede che si aprono in una nuova finestra da messaggi e home page.

In questa pagina vengono descritti i seguenti componenti di una scheda:

  • Intestazioni, che in genere contengono il titolo di una scheda o di una sezione della scheda.
  • Sezioni, che formano il corpo principale della scheda, inclusi widget e altri elementi interattivi. In una sezione della scheda, puoi aggiungere più struttura alla scheda, incluse colonne e griglie.
  • Piedi di pagina fissi, che vengono visualizzati nella parte inferiore delle finestre di dialogo per mostrare elementi dell'interfaccia utente permanenti, come i pulsanti.

Prerequisiti

Un'app Google Chat per cui sono abilitate le funzionalità interattive. Per creare un'app Chat interattiva, completa una delle seguenti guide introduttive in base all'architettura dell'app che vuoi utilizzare:

Utilizza lo strumento per la creazione di schede per progettare e visualizzare l'anteprima di interfacce utente e messaggistica per le app di chat:

Apri lo strumento per la creazione di schede

Aggiungi un'intestazione

Il widget CardHeader rappresenta l'intestazione di una scheda. Le intestazioni possono includere un titolo, un sottotitolo e un'immagine avatar per la scheda.

Di seguito è riportato un esempio di CardHeader:

Aggiungi una o più sezioni della scheda

Il widget CardSection è un contenitore di alto livello all'interno di una scheda. Utilizzi le sezioni della scheda per raggruppare i widget all'interno di una scheda. Per ogni sezione della scheda, puoi includere un'intestazione e uno o più widget.

Di seguito è riportato un esempio di CardSection contenente due widget textParagraph:

Aggiungere un divisore orizzontale tra i widget

Il widget divider mostra una linea orizzontale che copre la larghezza di una scheda tra i widget impilati verticalmente. La linea è un divisore visivo che aiuta gli utenti a distinguere un widget da un altro, rendendo le schede più facili da esaminare e comprendere.

Di seguito è riportata una scheda composta da un widget divider tra altri tipi di widget:

Aggiungi colonne

Il widget columns consente di visualizzare fino a due colonne in una scheda. Puoi aggiungere widget a ogni colonna. I widget vengono visualizzati nell'ordine in cui sono specificati. Per includere più di due colonne o per utilizzare le righe, utilizza il widget grid.

L'altezza di ogni colonna è determinata dalla colonna più alta. Ad esempio, se la prima colonna è più alta della seconda, 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 i widget tra le colonne.

L'esempio seguente mostra una scheda con un widget columns che presenta due colonne di testo. Per visualizzare solo il layout delle colonne e comprimere il sample di codice, fai clic su Comprimi. Quando lo spazio è limitato, come nell'esempio seguente, la seconda colonna si inserisce sotto la prima.

Definisci la larghezza della colonna

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 stretta, la seconda colonna si inserisce sotto la prima:

  • Sul web, la seconda colonna viene a capo se la larghezza dello schermo è inferiore o uguale a 480 pixel.
  • Sui dispositivi iOS, la seconda colonna viene a capo se la larghezza dello schermo è inferiore o uguale a 300 pt.
  • Sui dispositivi Android, la seconda colonna viene a capo se la larghezza dello schermo è inferiore o uguale a 320 dp.

L'esempio seguente mostra una scheda con un widget columns che presenta due colonne di testo con 4 elementi in ciascuna. A ogni elemento delle colonne è stato applicato horizontalSizeStyle per modificare lo spazio occupato dal testo in ogni colonna:

  • Il primo paragrafo di testo utilizza FILL_MINIMUM_SPACE per non occupare più del 30% della larghezza della scheda.
  • Il secondo paragrafo di testo utilizza FILL_AVAILABLE_SPACE per riempire lo spazio disponibile nella larghezza della scheda. In questo esempio, occupa il 70% della larghezza della scheda.
  • Il terzo paragrafo di testo non definisce horizontalSizeStyle, pertanto per impostazione predefinita viene utilizzato per riempire lo spazio disponibile della scheda.
  • Il quarto paragrafo di testo utilizza FILL_MINIMUM_SPACE per non occupare più del 30% della larghezza della scheda.

Definire l'allineamento orizzontale di una colonna

Puoi allineare i widget orizzontalmente a sinistra, a destra o al centro di una colonna definendo il campo horizontalAligment. Se il campo horizontalAlignment non è definito, i widget vengono allineati a sinistra in una colonna.

Nell'esempio seguente, il testo all'interno di una colonna viene allineato orizzontalmente a sinistra:

L'esempio seguente allinea orizzontalmente il testo all'interno di una colonna al centro:

L'esempio seguente allinea orizzontalmente il testo all'interno di una colonna a destra:

Definire l'allineamento verticale di una colonna

Puoi allineare i widget verticalmente in alto, in basso o al centro di una colonna definendo il campo verticalAlignment. Se il campo verticalAlignment non è definito, i widget in una colonna sono allineati in alto.

L'esempio seguente allinea verticalmente il testo all'interno di una colonna in alto:

L'esempio seguente allinea verticalmente il testo all'interno di una colonna al centro:

L'esempio seguente allinea verticalmente il testo all'interno di una colonna in basso:

Aggiungere una griglia per visualizzare una raccolta di elementi

Il widget grid mostra 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.

Il widget supporta i suggerimenti, che aiutano gli utenti a inserire dati uniformi, e le azioni al cambio, che vengono eseguite quando si verifica una modifica nel campo di immissione di testo, ad esempio quando un utente aggiunge o elimina del testo.Actions

L'esempio seguente mostra una griglia a due colonne con un singolo elemento:

Per definire dove viene visualizzato il testo con un'immagine in una griglia, puoi specificare il campo gridItemLayout. Questo campo ti consente di definire se il testo deve essere visualizzato sopra o sotto l'elemento nella griglia. Se gridItemLayout non è definito, il testo viene visualizzato per impostazione predefinita sotto l'elemento nella griglia.

Il seguente esempio è una griglia a tre colonne con testo e un'immagine in ogni griglia. La prima griglia definisce il testo da visualizzare sopra l'immagine, la seconda la posizione del testo sotto l'immagine e la terza non definisce la posizione del testo.

Aggiungere un bordo a una griglia o una colonna

Per gli elementi visualizzati in un widget column o grid, puoi aggiungere un bordo a questi elementi dell'interfaccia utente definendo un campo borderType e un campo borderStyle. Se non è definito alcun campo borderStyle, per impostazione predefinita non viene mostrato alcun bordo. Puoi definire un borderType da applicare a tutti gli elementi di un widget o applicare lo stile a ogni singolo elemento di un widget.

L'esempio seguente è una griglia a due colonne con un'immagine in ogni griglia in cui sono stati definiti il tipo di bordo, lo stile e il colore da applicare a tutti gli elementi all'interno della griglia.

L'esempio seguente è una griglia a tre colonne con un'immagine in ogni griglia e lo stile e il tipo di bordo definiti singolarmente. La prima immagine ha un bordo definito come STROKE. La seconda immagine ha un bordo definito come NO_BORDER. La terza immagine non ha un bordo definito.

Il widget CardFixedFooter rappresenta il piè di pagina di un messaggio della finestra di dialogo inviato da un'app di chat. I piè di pagina possono includere un pulsante principale e un pulsante secondario.

Il widget CardFixedFooter è disponibile solo per le finestre di dialogo.

Di seguito è riportato un esempio di widget CardFixedFooter con due pulsanti:

Risoluzione dei problemi

Quando un'app o una scheda di Google Chat restituisce un errore, l'interfaccia di Chat mostra il messaggio "Si è verificato un problema". o "Impossibile elaborare la tua richiesta". A volte l'interfaccia utente di Chat non mostra alcun messaggio di errore, ma l'app Chat o la scheda produce un risultato imprevisto; ad esempio, un messaggio della scheda potrebbe non essere visualizzato.

Sebbene un messaggio di errore potrebbe non essere visualizzato nell'interfaccia utente di Chat, sono disponibili messaggi di errore descrittivi e dati di log per aiutarti a correggere gli errori quando la registrazione degli errori per le app Chat è attivata. Per assistenza su come visualizzare, eseguire il debug e correggere gli errori, consulta la sezione Risolvere gli errori di Google Chat.