Oltre a fornire un'interfaccia basata su schede quando un utente sta leggendo un messaggio di Gmail un messaggio, i componenti aggiuntivi di Google Workspace che estendono Gmail può fornire un'altra interfaccia quando l'utente compone nuovi messaggi o rispondendo a quelli esistenti. In questo modo, i componenti aggiuntivi di Google Workspace possono automatizzare l'attività di scrittura delle email per l'utente.
Accesso all'interfaccia utente di scrittura del componente aggiuntivo
Esistono due modi per visualizzare l'interfaccia utente di scrittura di un componente aggiuntivo. Il primo modo è iniziare scrivere una nuova bozza o rispondere mentre il componente aggiuntivo è già aperto. Il secondo avvia il componente aggiuntivo mentre scrivi una bozza.
Entrambi i casi fanno sì che il componente aggiuntivo esegua il codice funzione di composizione trigger, definita nel componente aggiuntivo manifest. La funzione trigger di scrittura crea l'interfaccia di scrittura che Gmail mostrerà all'utente.
Creazione di un componente aggiuntivo per la scrittura
Per aggiungere la funzionalità di scrittura a un componente aggiuntivo, segui questi passaggi generali:
- Aggiungi la
gmail.composeTrigger
campo al progetto di script del componente aggiuntivo manifest e aggiornare il file manifest ambiti da includere a quelle richieste per le azioni di scrittura. - Implementare una funzione di trigger di scrittura che crea un'interfaccia utente di scrittura quando
attivare degli incendi. Le funzioni trigger di composizione restituiscono un singolo
Card
o un array diCard
oggetti che compongono per l'azione di scrittura. - Implementare le funzioni di callback associate necessarie per reagire all'utente
di scrittura delle interazioni con la UI. Queste funzioni non rappresentano l'azione di scrittura in sé
(che consente solo la visualizzazione dell'interfaccia utente di composizione); ma queste sono le
singole funzioni che regolano ciò che accade quando i diversi elementi
di scrittura sono selezionate. Ad esempio, una scheda UI contenente un pulsante
di solito è associato a una funzione di callback che viene eseguita quando un utente fa clic
il pulsante. La funzione di callback per i widget che aggiornano la bozza del messaggio
devono restituire un
UpdateDraftActionResponse
.
Crea funzione trigger
L'interfaccia utente di scrittura di un componente aggiuntivo è creata allo stesso modo del messaggio del componente aggiuntivo dell'interfaccia utente, utilizzando il servizio di schede di Apps Script per creare schede e compilale con widget.
Devi implementare le
gmail.composeTrigger.selectActions[].runFunction
che definisci nel manifest. La funzione trigger di composizione deve restituire
un singolo oggetto Card
un array di oggetti Card
che compongono l'interfaccia di scrittura
dell'azione. Queste funzioni sono molto simili
per attivare le funzioni contestuali
e creare le schede nello stesso modo.
Crea oggetti evento trigger
Quando è selezionata un'azione di scrittura, esegue il trigger di scrittura corrispondente e passa alla funzione un oggetto evento come parametro. L'oggetto evento può trasportare informazioni sul contesto del componente aggiuntivo e la bozza che viene composta alla funzione trigger.
Consulta Struttura degli oggetti evento
per i dettagli su come sono organizzate le informazioni nell'oggetto evento. Le informazioni
contenuto nell'oggetto evento è parzialmente controllato dal valore dell'attributo
gmail.composeTrigger.draftAccess
campo manifest:
Se
gmail.composeTrigger.draftAccess
campo manifest èNONE
o non è incluso, l'oggetto evento ha solo le informazioni necessarie.Se
gmail.composeTrigger.draftAccess
è impostato suMETADATA
, l'oggetto evento passato alla funzione trigger di scrittura vengono inseriti gli elenchi dei destinatari dell'email che stai scrivendo.
Inserimento di contenuti nelle bozze attive
In genere l'interfaccia utente di scrittura di un componente aggiuntivo di Google Workspace le opzioni e i controlli utente che aiutano a comporre un messaggio. Per questi casi d'uso, Una volta che l'utente ha effettuato le selezioni nell'interfaccia utente, il componente aggiuntivo interpreta le selezioni e aggiorna di conseguenza la bozza corrente dell'email di lavoro.
Per semplificare l'aggiornamento della bozza di email corrente, il servizio carta è stato esteso ai seguenti corsi:
ContentType
: un che definisce se aggiungere HTML modificabile, HTML immutabile (che Gmail che gli utenti non possono modificare) o contenuti in testo normale.UpdateDraftActionResponse
: rappresenta una risposta a un'azione che aggiorna la bozza di email corrente.UpdateDraftActionResponseBuilder
- A Builder perUpdateDraftActionResponse
di oggetti strutturati.UpdateDraftBodyAction
: rappresenta un'azione che aggiorna il corpo della bozza di email corrente.UpdateDraftBodyType
: un enum che definisce le modalità di modifica del corpo.UpdateDraftSubjectAction
: rappresenta un'azione che aggiorna il campo dell'oggetto della bozza di email corrente.UpdateDraftToRecipientsAction
: rappresenta un'azione che aggiorna i destinatari della bozza dell'email corrente.UpdateDraftCcRecipientsAction
: rappresenta un'azione che aggiorna i destinatari in Cc della bozza di email corrente.UpdateDraftBccRecipientsAction
: rappresenta un'azione che aggiorna i destinatari in Ccn della bozza corrente dell'email.
In genere l'interfaccia utente di scrittura di un componente aggiuntivo include un pulsante "Salva" o "Inserisci" widget che un utente
possono fare clic per indicare che hanno terminato le selezioni nell'interfaccia utente e che
opzioni da aggiungere all'email che stanno scrivendo. Per aggiungere questo
interattività, il widget deve avere
è un oggetto Action
associato
indica al componente aggiuntivo di eseguire una funzione di callback specifica quando il widget
selezionato. Devi implementare queste funzioni di callback. Ogni funzione di callback deve
restituiscono un modello
UpdateDraftActionResponse
che descrive in dettaglio le modifiche da apportare alla bozza di email corrente.
Esempio 1
Il seguente snippet di codice mostra come creare un'interfaccia utente di scrittura che aggiorni l'oggetto e i destinatari A, Cc e Ccn della bozza dell'email corrente.
/**
* Compose trigger function that fires when the compose UI is
* requested. Builds and returns a compose UI for inserting images.
*
* @param {event} e The compose trigger event object. Not used in
* this example.
* @return {Card[]}
*/
function getComposeUI(e) {
return [buildComposeCard()];
}
/**
* Build a card to display interactive buttons to allow the user to
* update the subject, and To, Cc, Bcc recipients.
*
* @return {Card}
*/
function buildComposeCard() {
var card = CardService.newCardBuilder();
var cardSection = CardService.newCardSection().setHeader('Update email');
cardSection.addWidget(
CardService.newTextButton()
.setText('Update subject')
.setOnClickAction(CardService.newAction()
.setFunctionName('applyUpdateSubjectAction')));
cardSection.addWidget(
CardService.newTextButton()
.setText('Update To recipients')
.setOnClickAction(CardService.newAction()
.setFunctionName('updateToRecipients')));
cardSection.addWidget(
CardService.newTextButton()
.setText('Update Cc recipients')
.setOnClickAction(CardService.newAction()
.setFunctionName('updateCcRecipients')));
cardSection.addWidget(
CardService.newTextButton()
.setText('Update Bcc recipients')
.setOnClickAction(CardService.newAction()
.setFunctionName('updateBccRecipients')));
return card.addSection(cardSection).build();
}
/**
* Updates the subject field of the current email when the user clicks
* on "Update subject" in the compose UI.
*
* Note: This is not the compose action that builds a compose UI, but
* rather an action taken when the user interacts with the compose UI.
*
* @return {UpdateDraftActionResponse}
*/
function applyUpdateSubjectAction() {
// Get the new subject field of the email.
// This function is not shown in this example.
var subject = getSubject();
var response = CardService.newUpdateDraftActionResponseBuilder()
.setUpdateDraftSubjectAction(CardService.newUpdateDraftSubjectAction()
.addUpdateSubject(subject))
.build();
return response;
}
/**
* Updates the To recipients of the current email when the user clicks
* on "Update To recipients" in the compose UI.
*
* Note: This is not the compose action that builds a compose UI, but
* rather an action taken when the user interacts with the compose UI.
*
* @return {UpdateDraftActionResponse}
*/
function applyUpdateToRecipientsAction() {
// Get the new To recipients of the email.
// This function is not shown in this example.
var toRecipients = getToRecipients();
var response = CardService.newUpdateDraftActionResponseBuilder()
.setUpdateDraftToRecipientsAction(CardService.newUpdateDraftToRecipientsAction()
.addUpdateToRecipients(toRecipients))
.build();
return response;
}
/**
* Updates the Cc recipients of the current email when the user clicks
* on "Update Cc recipients" in the compose UI.
*
* Note: This is not the compose action that builds a compose UI, but
* rather an action taken when the user interacts with the compose UI.
*
* @return {UpdateDraftActionResponse}
*/
function applyUpdateCcRecipientsAction() {
// Get the new Cc recipients of the email.
// This function is not shown in this example.
var ccRecipients = getCcRecipients();
var response = CardService.newUpdateDraftActionResponseBuilder()
.setUpdateDraftCcRecipientsAction(CardService.newUpdateDraftCcRecipientsAction()
.addUpdateToRecipients(ccRecipients))
.build();
return response;
}
/**
* Updates the Bcc recipients of the current email when the user clicks
* on "Update Bcc recipients" in the compose UI.
*
* Note: This is not the compose action that builds a compose UI, but
* rather an action taken when the user interacts with the compose UI.
*
* @return {UpdateDraftActionResponse}
*/
function applyUpdateBccRecipientsAction() {
// Get the new Bcc recipients of the email.
// This function is not shown in this example.
var bccRecipients = getBccRecipients();
var response = CardService.newUpdateDraftActionResponseBuilder()
.setUpdateDraftBccRecipientsAction(CardService.newUpdateDraftBccRecipientsAction()
.addUpdateToRecipients(bccRecipients))
.build();
return response;
}
Esempio 2
Il seguente snippet di codice mostra come creare un'interfaccia utente di scrittura che inserisce immagini nella bozza di email corrente.
/**
* Compose trigger function that fires when the compose UI is
* requested. Builds and returns a compose UI for inserting images.
*
* @param {event} e The compose trigger event object. Not used in
* this example.
* @return {Card[]}
*/
function getInsertImageComposeUI(e) {
return [buildImageComposeCard()];
}
/**
* Build a card to display images from a third-party source.
*
* @return {Card}
*/
function buildImageComposeCard() {
// Get a short list of image URLs to display in the UI.
// This function is not shown in this example.
var imageUrls = getImageUrls();
var card = CardService.newCardBuilder();
var cardSection = CardService.newCardSection().setHeader('My Images');
for (var i = 0; i < imageUrls.length; i++) {
var imageUrl = imageUrls[i];
cardSection.addWidget(
CardService.newImage()
.setImageUrl(imageUrl)
.setOnClickAction(CardService.newAction()
.setFunctionName('applyInsertImageAction')
.setParameters({'url' : imageUrl})));
}
return card.addSection(cardSection).build();
}
/**
* Adds an image to the current draft email when the image is clicked
* in the compose UI. The image is inserted at the current cursor
* location. If any content of the email draft is currently selected,
* it is deleted and replaced with the image.
*
* Note: This is not the compose action that builds a compose UI, but
* rather an action taken when the user interacts with the compose UI.
*
* @param {event} e The incoming event object.
* @return {UpdateDraftActionResponse}
*/
function applyInsertImageAction(e) {
var imageUrl = e.parameters.url;
var imageHtmlContent = '<img style=\"display: block\" src=\"'
+ imageUrl + '\"/>';
var response = CardService.newUpdateDraftActionResponseBuilder()
.setUpdateDraftBodyAction(CardService.newUpdateDraftBodyAction()
.addUpdateContent(
imageHtmlContent,
CardService.ContentType.MUTABLE_HTML)
.setUpdateType(
CardService.UpdateDraftBodyType.IN_PLACE_INSERT))
.build();
return response;
}