Étendre l'interface utilisateur de rédaction avec des actions de rédaction

En plus de fournir une interface basée sur une carte lorsqu'un utilisateur lit un message Gmail, les modules complémentaires Google Workspace qui étendent Gmail peuvent fournir une autre interface lorsque l'utilisateur rédige de nouveaux messages ou répond à des messages existants. Cela permet aux modules complémentaires Google Workspace d'automatiser la rédaction des e-mails.

Accéder à l'interface utilisateur du module complémentaire Compose

Il existe deux façons d'afficher l'interface utilisateur de rédaction d'un module complémentaire. La première consiste à rédiger un nouveau brouillon ou une nouvelle réponse alors que le module complémentaire est déjà ouvert. La seconde consiste à démarrer le module complémentaire lors de la rédaction d'un brouillon.

Dans les deux cas, le module complémentaire exécute la fonction de déclenchement de nouveau message correspondante, définie dans le fichier manifeste du module complémentaire. Le déclencheur de rédaction crée l'UI de rédaction de cette action, que Gmail affiche ensuite à l'utilisateur.

Créer un module complémentaire Compose

Pour ajouter une fonctionnalité de rédaction à un module complémentaire, procédez comme suit:

1. Ajoutez le champ gmail.composeTrigger au fichier manifeste du projet de script du module complémentaire, puis mettez à jour les champs d'application du fichier manifeste pour inclure ceux requis pour les actions de rédaction.
2. Implémentez une fonction de déclencheur de rédaction qui crée une interface utilisateur de Compose lorsque le déclencheur est exécuté. Les fonctions de déclenchement de Compose renvoient un seul objet Card ou un tableau d'objets Card comprenant l'UI de Compose pour l'action de composition.
3. Implémentez les fonctions de rappel associées nécessaires pour réagir aux interactions de l'utilisateur dans l'interface utilisateur. Il ne s'agit pas de l'action de rédaction proprement dite (qui entraîne uniquement l'affichage de l'interface utilisateur de rédaction). Au contraire, ce sont les fonctions individuelles qui régissent ce qui se passe lorsque différents éléments de l'interface utilisateur de composition sont sélectionnés. Par exemple, une carte d'interface utilisateur contenant un bouton est généralement associée à une fonction de rappel qui s'exécute lorsqu'un utilisateur clique dessus. La fonction de rappel des widgets qui mettent à jour le contenu du brouillon de message doit renvoyer un objet UpdateDraftActionResponse.

Fonction de déclencheur "Nouveau message"

L'interface utilisateur de rédaction d'un module complémentaire est conçue de la même manière que l'interface des messages de ce module, en utilisant le service Card d'Apps Script pour créer des fiches et les remplir avec des widgets.

Vous devez implémenter le gmail.composeTrigger.selectActions[].runFunction que vous définissez dans votre fichier manifeste. La fonction de déclenchement de la composition doit renvoyer un seul objet Card ou un tableau d'objets Card comprenant l'interface utilisateur de rédaction pour cette action. Ces fonctions sont très semblables aux fonctions de déclenchement contextuel et doivent créer des fiches de la même manière.

Avertissement :Pour des raisons de sécurité, les modules complémentaires ne peuvent pas modifier silencieusement les autorisations d'accès aux fichiers Google Workspace ou tiers. Par exemple, un module complémentaire ne peut pas ajouter silencieusement des destinataires à l'ensemble des comptes pouvant afficher un fichier Dropbox. À la place, le module complémentaire doit informer les utilisateurs de la modification des autorisations. Les modules complémentaires qui ne informent pas les utilisateurs de ces modifications ne peuvent pas être examinés.

Rédiger des objets d'événement de déclencheur

Lorsqu'une action Compose est sélectionnée, elle exécute la fonction de déclenchement correspondante et lui transmet un objet d'événement en tant que paramètre. L'objet événement peut contenir des informations sur le contexte du module complémentaire et le brouillon en cours de rédaction dans la fonction de déclenchement.

Consultez la page Structure des objets d'événement pour savoir comment les informations sont organisées dans l'objet d'événement. Les informations contenues dans l'objet événement sont partiellement contrôlées par la valeur du champ de manifeste gmail.composeTrigger.draftAccess:

• Si le champ de manifeste gmail.composeTrigger.draftAccess est NONE ou n'est pas inclus, l'objet événement ne contient que très peu d'informations.

• Si gmail.composeTrigger.draftAccess est défini sur METADATA, l'objet d'événement transmis à la fonction de déclenchement de la composition est renseigné avec les listes des destinataires de l'e-mail en cours de composition.

Remarque :Pour utiliser l'accès brouillon à METADATA, le fichier manifeste du module complémentaire doit inclure le https://www.googleapis.com/auth/gmail.addons.current.message.metadata champ d'application Gmail.{/10

Insérer du contenu dans des brouillons actifs

En règle générale, l'interface utilisateur de rédaction d'un module complémentaire Google Workspace fournit les options utilisateur et le contrôle qui permettent de rédiger un message. Pour ces cas d'utilisation, une fois que l'utilisateur a effectué des sélections dans l'UI, le module complémentaire interprète les sélections et met à jour le brouillon d'e-mail professionnel actuel.

Pour faciliter la mise à jour du brouillon d'e-mail, le service Card a été étendu aux classes suivantes:

• ContentType : énumération qui définit s'il faut ajouter du code HTML modifiable, du code HTML immuable (que les utilisateurs de Gmail ne peuvent pas modifier) ou du contenu en texte brut.
• UpdateDraftActionResponse : représente une réponse à une action qui met à jour le brouillon d'e-mail actuel.
• UpdateDraftActionResponseBuilder : compilateur pour les objets UpdateDraftActionResponse.
• UpdateDraftBodyAction : représente une action qui met à jour le corps du brouillon d'e-mail en cours.
• UpdateDraftBodyType : énumération qui définit la manière dont le corps est modifié.
• UpdateDraftSubjectAction : représente une action qui met à jour le champ "Objet" du brouillon d'e-mail actuel.
• UpdateDraftToRecipientsAction : représente une action qui met à jour les destinataires de l'e-mail en cours de brouillon.
• UpdateDraftCcRecipientsAction : représente une action qui met à jour les destinataires en copie du brouillon d'e-mail actuel.
• UpdateDraftBccRecipientsAction : représente une action qui met à jour les destinataires en Cci du brouillon actuel de l'e-mail.

En règle générale, l'interface utilisateur de rédaction d'un module complémentaire inclut un widget "Enregistrer" ou "Insérer" sur lequel l'utilisateur peut cliquer pour indiquer qu'il a effectué des sélections dans l'UI et qu'il souhaite ajouter ses choix à l'e-mail qu'il rédige. Pour ajouter cette interactivité, le widget doit être associé à un objet Action qui indique au module complémentaire d'exécuter une fonction de rappel spécifique lorsque l'utilisateur clique sur le widget. Vous devez implémenter ces fonctions de rappel. Chaque fonction de rappel doit renvoyer un objet UpdateDraftActionResponse compilé qui détaille les modifications à apporter au brouillon actuel.

Exemple 1

L'extrait de code suivant montre comment créer une UI de mise à jour qui met à jour l'objet et les destinataires du brouillon de l'e-mail en cours.

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

Exemple 2

L'extrait de code suivant montre comment créer une interface utilisateur de rédaction qui insère des images dans le brouillon d'e-mail actuel.

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