Formatta la struttura di una scheda o di una finestra di dialogo

In questa pagina viene spiegato come formattare e strutturare i widget in una scheda o in un messaggio di dialogo.

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

Apri Card Builder

Prerequisiti

  • Un account Google Workspace con accesso a Google Chat.
  • Un'app di Chat pubblicata. Per creare un'app di Chat, segui questa quickstart.

    • Visualizza schede e finestre di dialogo in colonne

    Il widget columns mostra fino a due colonne in una scheda o una finestra di dialogo. 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 widget tra le colonne.

    L'esempio seguente mostra una scheda con un widget columns che include 2 colonne di testo. Per visualizzare solo il layout a colonne e per 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 colonna.

    Definire la larghezza di una colonna

    Le colonne vengono visualizzate affiancate. Puoi personalizzare la larghezza di ogni colonna utilizzando il campo horizontalSizeStyle. Se la larghezza dello schermo dell'utente è troppo ridotta, la seconda colonna va a capo sotto la prima:

    • Sul Web, la seconda colonna va a capo se la larghezza dello schermo è inferiore o uguale a 480 pixel.
    • Sui dispositivi iOS, la seconda colonna va a capo se la larghezza dello schermo è inferiore o uguale a 300 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 presenta 2 colonne di testo con 4 elementi nelle colonne. A ogni elemento nelle colonne è stato applicato horizontalSizeStyle per manipolare lo spazio in cui il testo riempie ogni colonna:

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

    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 sono allineati a sinistra nella colonna.

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

    Nell'esempio seguente il testo viene allineato orizzontalmente in una colonna al centro:

    Nell'esempio seguente il testo di una colonna a destra viene allineato orizzontalmente:

    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.

    Nell'esempio seguente, il testo di una colonna viene allineato verticalmente nella parte superiore:

    Nell'esempio seguente il testo all'interno di una colonna al centro viene allineato verticalmente:

    L'esempio seguente allinea verticalmente il testo all'interno di una colonna nella parte inferiore:

    Aggiungi 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 tra un widget e un altro, rendendo le schede più facili da scansionare e comprendere.

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

    Visualizza una griglia con una raccolta di elementi

    Il widget grid mostra una griglia con una raccolta di elementi. Una griglia supporta un numero illimitato di colonne ed elementi. Il numero di righe è determinato dal numero di elementi diviso 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 suggerimenti, che consentono agli utenti di inserire dati uniformi, e azioni in caso di modifica, ovvero Actions che vengono eseguite quando si verifica una modifica nel campo di immissione testo, ad esempio quando un utente aggiunge o elimina testo.

    L'esempio seguente è una griglia a 2 colonne con un singolo elemento:

    Definisci la posizione in cui viene visualizzato il testo con un'immagine in una griglia

    Il campo gridItemLayout consente di definire all'interno di ogni gridItem, se il testo viene visualizzato sopra o sotto l'elemento nella griglia. Se gridItemLayout non è definito, il testo viene visualizzato sotto l'elemento nella griglia per impostazione predefinita

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

    Aggiungere un bordo agli elementi dell'interfaccia utente

    Per gli elementi che compaiono 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 visualizzato alcun bordo. Puoi definire un 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.

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

    Risolvi il problema

    Quando un'app o una scheda Google Chat restituisce un errore, nell'interfaccia di Chat viene visualizzato il messaggio "Si è verificato un problema" o "Impossibile elaborare la richiesta". A volte nell'interfaccia utente di Chat non vengono visualizzati messaggi di errore, ma l'app o la scheda Chat produce un risultato imprevisto; ad esempio, è possibile che non venga visualizzato un messaggio di scheda.

    Anche se 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 di Chat è attivata. Per informazioni su visualizzazione, debug e correzione degli errori, consulta l'articolo Risolvere gli errori di Google Chat.