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 di Chat di 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 che viene visualizzata dalla scheda Home nei messaggi diretti con l'app di 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 ulteriore 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 alle interazioni degli utenti. Per creare un'app di Chat interattiva, completa una delle seguenti guide rapide in base all'architettura dell'app che vuoi utilizzare:

Utilizza lo Strumento per la creazione di schede per progettare e visualizzare in anteprima i messaggi e le interfacce utente per le app di Chat:

Apri Card Builder

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. Utilizza 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 che contiene due widget textParagraph:

Aggiungi 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 da un widget divider tra altri tipi di widget:

Aggiungi colonne

Il widget columns visualizza 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 include due colonne di testo. Per visualizzare solo il layout delle colonne e comprimere l'esempio di codice, fai clic su Comprimi. Quando lo spazio è limitato, come nell'esempio seguente, la seconda colonna va a capo 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 spostata 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 va a capo se la larghezza dello schermo è inferiore o uguale a 320 dp.

L'esempio seguente mostra una scheda con un widget columns che contiene due colonne di testo con quattro elementi. A ogni elemento delle colonne viene applicato horizontalSizeStyle per manipolare lo spazio occupato dal testo in 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 in orizzontale a sinistra, a destra o al centro di una colonna definendo il campo horizontalAlignment. Se il campo horizontalAlignment non è definito, i widget vengono allineati a sinistra in una colonna.

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

L'esempio seguente allinea il testo al centro in senso orizzontale all'interno 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 in alto, in basso o al centro di una colonna definendo il campo verticalAlignment. Se il campo verticalAlignment non è definito, i widget di una colonna vengono allineati in alto.

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

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

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

Aggiungi 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, ovvero Actions che vengono eseguite quando si verifica una modifica nel campo di immissione di testo, ad esempio quando un utente aggiunge o elimina del testo.

L'esempio seguente è una griglia a 2 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 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.

L'esempio seguente è 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.

Aggiungi 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 UI definendo un campo borderType e un campo borderStyle. Se non viene definito alcun campo borderStyle, per impostazione predefinita non viene mostrato alcun bordo. Puoi definire una 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 il tipo, lo stile e il colore del bordo sono stati definiti per essere applicati a tutti gli elementi della griglia.

L'esempio seguente è una griglia a 3 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.

Aggiungi un carosello

Il widget Carousel mostra una raccolta di oggetti CarouselCard che possono essere fatti scorrere sullo schermo. Puoi aggiungere più widget a ogni CarouselCard.

Il widget CardFixedFooter rappresenta il piè di pagina di un messaggio di 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 Google Chat o una scheda restituisce un errore, l'interfaccia di Chat mostra il messaggio "Si è verificato un problema". o "Impossibile elaborare la richiesta." A volte la UI di Chat non mostra alcun messaggio di errore, ma l'app di Chat o la scheda 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 il logging degli errori per le app di Chat è attivo. Per assistenza sulla visualizzazione, il debug e la correzione degli errori, consulta Risolvi i problemi e correggi gli errori di Google Chat.