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, una scheda che viene visualizzata nella scheda Home dei messaggi diretti con l'app Chat.
  • Finestre di dialogo, ovvero schede che si aprono in una nuova finestra da messaggi e home page.

In questa pagina, scoprirai 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 i widget e altri elementi interattivi. In una sezione della scheda, puoi aggiungere più struttura alla scheda, incluse colonne e griglie.
  • Piè di pagina fissi, che vengono visualizzati nella parte inferiore delle finestre di dialogo per mostrare elementi UI persistenti, come i pulsanti.

Prerequisiti

Un'app Google Chat configurata per ricevere e rispondere agli eventi di interazione. Per creare un'app di chat interattiva, completa una delle seguenti guide rapide in base all'architettura dell'app che vuoi utilizzare:

Utilizza Card Builder per progettare e visualizzare in anteprima le interfacce utente e di messaggistica per le app di chat:

Apri il generatore 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 tua scheda.

Di seguito è riportato un esempio di CardHeader:

Aggiungi una o più sezioni della scheda

Il widget CardSection è un contenitore di primo livello all'interno di una scheda. Utilizzi le sezioni delle schede 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 che contiene due widget textParagraph:

Aggiungere un divisore orizzontale tra i widget

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

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

Aggiungi colonne

Il widget columns mostra 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 hanno 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 include due colonne di testo. Per visualizzare solo il layout delle colonne e comprimere il codice di esempio, fai clic su Comprimi. Quando lo spazio è limitato, come nell'esempio seguente, la seconda colonna viene visualizzata 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 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 va a capo 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.

L'esempio seguente mostra una scheda con un widget columns che include due colonne di testo con quattro elementi ciascuna. Ogni elemento nelle colonne ha horizontalSizeStyle applicato in ordine per manipolare la quantità di spazio che il testo riempie ogni colonna:

  • Il primo paragrafo di testo utilizza FILL_MINIMUM_SPACE per riempire non 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, quindi per impostazione predefinita riempie lo spazio disponibile della scheda.
  • Il quarto paragrafo di testo utilizza FILL_MINIMUM_SPACE per riempire non più del 30% della larghezza della scheda.

Definisci 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.

Il seguente esempio allinea orizzontalmente il testo all'interno di una colonna a sinistra:

Il seguente esempio allinea orizzontalmente il testo al centro di una colonna:

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

Definisci l'allineamento verticale di una colonna

Puoi allineare i widget verticalmente alla parte superiore, inferiore o centrale di una colonna definendo il campo verticalAlignment. Se il campo verticalAlignment non è definito, i widget di una colonna sono allineati alla parte superiore.

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

Il seguente esempio allinea verticalmente il testo al centro di una colonna:

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 ed elementi. Il numero di righe è determinato dagli elementi divisi per le colonne. Una griglia con 10 elementi e 2 colonne ha 5 righe. Una griglia con 11 elementi e 2 colonne ha 6 righe.

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

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

Per definire la posizione del testo rispetto a un'immagine in una griglia, puoi specificare il campo gridItemLayout. Questo campo ti consente di definire se il testo viene 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 mostra 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 griglia definisce il testo da visualizzare sotto l'immagine e la terza griglia non definisce la posizione del testo.

Aggiungere un bordo a una griglia o a 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 visualizzato alcun bordo. Puoi definire uno borderType da applicare a tutti gli elementi all'interno di un widget o applicare lo stile a ogni singolo elemento all'interno di un widget.

Il seguente esempio è una griglia a due colonne con un'immagine in ogni griglia in cui sono stati definiti il tipo, lo stile e il colore del bordo 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 bordi definiti.

Aggiungere un carosello

Il widget Carousel mostra una raccolta di oggetti CarouselCard che possono essere visualizzati sullo schermo e spostati fuori dallo schermo. Puoi aggiungere più widget a ogni CarouselCard.

Il widget CardFixedFooter rappresenta il piè di pagina di un messaggio 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 i dialoghi.

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

Risoluzione dei problemi

Quando un'app Google Chat o una scheda 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 o la scheda Chat produce un risultato imprevisto; ad esempio, un messaggio della scheda potrebbe non essere visualizzato.

Anche se nell'interfaccia utente di Chat potrebbe non essere visualizzato un messaggio di errore, sono disponibili messaggi di errore descrittivi e dati di log per aiutarti a correggere gli errori quando la registrazione degli errori per le app di chat è attivata. Per assistenza nella visualizzazione, nel debug e nella correzione degli errori, consulta Risolvere i problemi e correggere gli errori di Google Chat.