Testo decorato

Il widget DecoratedText mostra il testo con funzionalità facoltative di layout e funzionalità. Ad esempio:

• Visualizza un icon davanti al testo con startIcon.
• Mostra un titolo prima del testo con topLabel.
• Aggiungi un pulsante cliccabile con button o un pulsante di attivazione/disattivazione commutabile con switchControl.

Utilizza il widget DecoratedText quando devi presentare informazioni in modo che siano facili da utilizzare e interattive. Il widget è perfetto per le schede dei contatti, gli aggiornamenti sullo stato dell'ordine e le notifiche relative ai biglietti di lavoro.

Esempio: scheda contatto

La seguente immagine mostra una scheda composta da un widget DecoratedText utilizzato per visualizzare i dettagli di contatto, come indirizzo email, stato online, numero di telefono e sito web.

Figura 1: un messaggio relativo alle schede in Google Chat che mostra un widget "DecoratedText".

Ecco il codice JSON della scheda:

JSON

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "widgets": [
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "EMAIL",
                  },
                  "text": "[e-mail]",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON",
                  },
                  "text": "<font color=\"#80e27e\">Online</font>",
                },
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE",
                  },
                  "text": "[phone]",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "STAR",
                  },
                  "text": "<a href=\"https://developers.google.com/chat\">
                    Google Chat Developer Documentation</a>",
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

Formatta il testo in un widget DecoratedText

Il widget DecoratedText supporta una semplice formattazione HTML di testo. Quando imposti i contenuti testuali di questi widget, includi solo i tag HTML corrispondenti. Sono supportati i seguenti formati:

Formato	Esempio	Risultato visualizzato
Grassetto	<b>test</b>	test
Corsivo	<i>test</i>	test
Sottolineato	<u>test</u>	test
Barrato	<s>test</s>	test
Colore carattere	<font color="#ea9999">test</font>	test
Link ipertestuale	<a href="https://www.google.com">google</a>	Google
Ora	<time>2020-02-16 15:00</time>	16-02-2020 15:00
Nuova riga	test <br> test	prova prova

DecoratedText Rappresentazione e campi JSON

Rappresentazione JSON
{ "icon": { object (Icon) }, "startIcon": { object (Icon) }, "topLabel": string, "text": string, "wrapText": boolean, "bottomLabel": string, "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 ) Questo elemento è deprecato. Obsoleto a favore di startIcon .
startIcon	object ( Icon ) L'icona visualizzata davanti al testo.
topLabel	string Il testo visualizzato sopra text . Tronca sempre. Supporta una formattazione semplice. Per i dettagli sulla formattazione, consulta la pagina Formattazione del testo.
text	string Obbligatorio. Il testo principale. Supporta una formattazione semplice. Per i dettagli sulla formattazione, consulta la pagina Formattazione del testo.
wrapText	boolean L'impostazione del testo a capo. Se true , il testo si aggrega 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 . Tronca sempre. Supporta una formattazione semplice. Per i dettagli sulla formattazione, consulta la pagina Formattazione del testo.
onClick	object ( OnClick ) Quando gli utenti fanno clic su topLabel o bottomLabel , viene attivata questa azione.
Campo Union control . Un pulsante, un'opzione, una casella di controllo o un'immagine che appare sul lato destro del testo nel widget decoratedText . control può essere solo uno dei seguenti:
button	object ( Button ) Un pulsante su cui è possibile fare clic per attivare un'azione.
switchControl	object ( SwitchControl ) È possibile fare clic su un widget del sensore per modificarne lo stato e attivare un'azione. Al momento funzione supportata nelle finestre di dialogo . Il supporto per i messaggi delle schede sarà disponibile a breve.
endIcon	object ( Icon ) Icona visualizzata dopo il testo. Supporta le icone standard e personalizzate .

Button Rappresentazione e campi JSON

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

Campi
text	string Il testo mostrato all'interno del pulsante.
icon	object ( Icon ) L'immagine dell'icona. Se icon e text sono impostati, l'icona viene visualizzata prima del testo.
color	object ( Color ) Se impostato, il pulsante ha un colore di sfondo a tinta unita e il colore del carattere viene modificato per mantenere il contrasto con il colore di sfondo. Ad esempio, se imposti uno sfondo blu, è probabile che venga visualizzato del testo bianco. Se non viene configurato, lo sfondo dell'immagine è bianco e il colore del carattere è blu. Per il rosso, il verde e il blu, il valore di ogni campo è un numero float che può essere espresso in due modi: come un numero compreso tra 0 e 255 diviso per 255 (153/255) o come valore compreso tra 0 e 1 (0,6). 0 rappresenta l'assenza di un colore e 1 o 255/255 rappresentano la presenza completa di quel colore sulla scala RGB. Facoltativamente, imposta una modalità alpha, che imposta un livello di trasparenza utilizzando questa equazione: pixel color = alpha * (this color) + (1.0 - alpha) * (background color) Per la versione alpha, il valore 1 corrisponde a un colore a tinta unita, mentre il valore 0 corrisponde a un colore completamente trasparente. Ad esempio, il colore seguente rappresenta la metà di un rosso trasparente: "color": { "red": 1, "green": 0, "blue": 0, "alpha": 0.5 }
onClick	object ( OnClick ) Obbligatorio. L'azione da eseguire quando viene fatto clic sul pulsante, ad esempio aprire un link ipertestuale o eseguire una funzione personalizzata.
disabled	boolean Se true , il pulsante viene visualizzato in uno stato non attivo e non risponde alle azioni degli utenti.
altText	string Il testo alternativo utilizzato per l'accessibilità. Imposta un testo descrittivo che spieghi agli utenti il funzionamento del pulsante. Ad esempio, se un pulsante apre un link 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/chat" .

Icon

Icona visualizzata in un widget su una scheda.

Supporta le icone standard e personalizzate .

Rappresentazione JSON
{ "altText": string, "imageType": enum (ImageType), // Union field icons can be only one of the following: "knownIcon": string, "iconUrl": string // End of list of possible types for union field icons. }

Campi
altText	string (Facoltativo) Una descrizione dell'icona utilizzata per l'accessibilità. Se non viene specificato, viene fornito il valore predefinito "Button". Come best practice, devi impostare una descrizione utile di ciò che mostra l'icona e, se applicabile, di cosa 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/chat . Se l'icona è impostata in un Button , altText viene visualizzato come testo di supporto quando l'utente passa il mouse sopra il pulsante. Tuttavia, se il pulsante imposta anche text , l'icona altText dell'icona viene ignorata.
imageType	enum ( ImageType ) Lo stile di ritaglio applicato all'immagine. In alcuni casi, se applichi un ritaglio a CIRCLE , l'immagine viene disegnata più grande di un'icona standard.
Campo Union icons . L'icona visualizzata nel widget della scheda. icons può essere solo uno dei seguenti:
knownIcon	string Mostra una delle icone standard 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 le icone standard .
iconUrl	string Mostra un'icona personalizzata ospitata su un URL HTTPS. Ad esempio: "iconUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png" I tipi di file supportati includono .png e .jpg .

ImageType

La forma utilizzata per ritagliare l'immagine.

Enum
SQUARE	Valore predefinito. Applica una maschera quadrata all'immagine. Ad esempio, un'immagine 4 x 3 diventa 3 x 3.
CIRCLE	Applica una maschera circolare all'immagine. Ad esempio, un'immagine 4 x 3 diventa un cerchio con un diametro di 3.

Onclick

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

Rappresentazione JSON
{ // Union field data can be only one of the following: "action": { object (Action) }, "openLink": { object (OpenLink) }, "openDynamicLinkAction": { object (Action) }, "card": { object (Card) } // End of list of possible types for union field data. }

Campi
Campo Union data . data può essere solo uno dei seguenti:
action	object ( Action ) Se specificato, un'azione viene attivata da onClick .
openLink	object ( OpenLink ) Se specificato, onClick attiva un'azione di link aperta.
openDynamicLinkAction	object ( Action ) Un componente aggiuntivo attiva questa azione quando deve aprire un link. È diverso da openLink riportato sopra per il fatto che deve comunicare con il server per ottenere il link. Quindi è necessario che il client web esegua alcune operazioni di preparazione prima che la risposta all'azione del link aperto ritorni.
card	object ( Card ) Se selezionata, viene eseguito il push di una nuova scheda nell'elenco di schede dopo aver fatto clic. Supportato dai componenti aggiuntivi di Google Workspace, ma non dalle app di chat.

Action

Azione che descrive il comportamento al momento dell'invio del modulo. Ad esempio, uno script di Apps Script può essere richiamato per gestire il modulo.

Rappresentazione JSON
{ "function": string, "parameters": [ { object (ActionParameter) } ], "loadIndicator": enum (LoadIndicator), "persistValues": boolean, "interaction": enum (Interaction) }

Campi
function	string Una funzione personalizzata da richiamare quando viene fatto clic sull'elemento contenitore o attivato in modo orizzontale. Ad esempio, consulta Creare schede interattive .
parameters[]	object ( ActionParameter ) Elenco dei parametri delle azioni.
loadIndicator	enum ( LoadIndicator ) Specifica l'indicatore di caricamento visualizzato dall'azione durante l'invito all'azione.
persistValues	boolean Indica se i valori del modulo persistono dopo l'azione. Il valore predefinito è false . Se true , i valori del modulo rimangono dopo l'attivazione dell'azione. Quando utilizzi LoadIndicator.NONE per le azioni, è consigliabile persistValues = true e assicurare che eventuali modifiche apportate dall'utente dopo l'invio del modulo o le azioni di modifica al server non vengano sovrascritte dalla risposta. Se false , i valori del modulo vengono cancellati quando viene attivata l'azione. Se persistValues è impostato su false , è vivamente consigliato utilizzare la scheda LoadIndicator.SPINNER per tutte le azioni, poiché questa operazione blocca la UI per garantire che l'utente non apporti modifiche durante l'elaborazione. Funzionalità non supportata dalle app di chat.
interaction	enum ( Interaction ) (Facoltativo) Obbligatorio quando apri una finestra di dialogo . Che cosa fare in risposta a un'interazione con un utente, ad esempio se un utente fa clic sul pulsante nel messaggio di una scheda. Se non specificati, l'app risponde eseguendo un action (come l'apertura di un link o eseguendo una funzione) come di consueto. Se specifichi un interaction , l'app può rispondere in modi speciali e interattivi. Ad esempio, impostando interaction su OPEN_DIALOG , l'app può aprire una finestra di dialogo . Se specificato, non viene mostrato un indicatore di caricamento. Supportato dalle app di chat, ma non dai componenti aggiuntivi di Google Workspace. Se si specifica un componente aggiuntivo, si rimuove l'intera scheda e non viene mostrato nulla nel client.

ActionParameter

Elenco di parametri stringa da fornire quando viene richiamato il metodo dell'azione. Ad esempio, considera tre pulsanti di posticipazione: posticipa ora, posticipa di 1 giorno, posticipa la settimana successiva Puoi utilizzare il metodo di azione = posticipa(), passando il tipo di posticipazione e il tempo di posticipazione nell'elenco dei parametri della stringa.

Per scoprire di più, consulta CommonEventObject .

Rappresentazione JSON
{ "key": string, "value": string }

Campi
key	string Il nome del parametro per lo script di azione.
value	string Il valore del parametro.

LoadIndicator

Specifica l'indicatore di caricamento visualizzato dall'azione durante l'invito all'azione.

Enum
SPINNER	Viene visualizzata una rotellina che indica che i contenuti sono in fase di caricamento.
NONE	Nessun messaggio visualizzato.

Interaction

(Facoltativo) Obbligatorio quando apri una finestra di dialogo .

Che cosa fare in risposta a un'interazione con un utente, ad esempio se un utente fa clic sul pulsante nel messaggio di una scheda.

Se non specificati, l'app risponde eseguendo un action (come l'apertura di un link o eseguendo una funzione) come di consueto.

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

Se specificato, non viene mostrato un indicatore di caricamento.

Supportato dalle app di chat, ma non dai componenti aggiuntivi di Google Workspace. Se si specifica un componente aggiuntivo, si rimuove l'intera scheda e non viene mostrato nulla nel client.

Enum
INTERACTION_UNSPECIFIED	Valore predefinito. action viene eseguito normalmente.
OPEN_DIALOG	Consente di aprire una finestra di dialogo , un'interfaccia con finestra basata su schede che le app di chat utilizzano per interagire con gli utenti. Supportato solo dalle app di Chat in risposta ai clic sui pulsanti nei messaggi delle schede. Non supportati dai componenti aggiuntivi di Google Workspace. Se si specifica un componente aggiuntivo, si rimuove l'intera scheda e non viene mostrato nulla nel client.

OpenLink

Rappresenta un evento onClick che apre un link ipertestuale.

Rappresentazione JSON
{ "url": string, "openAs": enum (OpenAs), "onClose": enum (OnClose) }

Campi
url	string L'URL da aprire.
openAs	enum ( OpenAs ) Come aprire un link: Funzionalità non supportata dalle app di chat.
onClose	enum ( OnClose ) Indica se il client dimentica un link dopo averlo aperto o se lo osserva fino alla chiusura della finestra. Funzionalità non supportata dalle app di chat.