Estensione dell'interfaccia utente di scrittura con azioni di scrittura

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:

  1. 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.
  2. 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 di Card oggetti che compongono per l'azione di scrittura.
  3. 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 su METADATA, l'oggetto evento passato alla funzione trigger di scrittura vengono inseriti gli elenchi dei destinatari dell'email che stai scrivendo.

di Gemini Advanced.

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:

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;
    }