Benutzeroberfläche zum Schreiben mit Eingabeaktionen erweitern

Neben der kartenbasierten Oberfläche, wenn ein Nutzer ein Gmail-Konto liest, Nachricht, Google Workspace-Add-ons, die Gmail erweitern können beim Verfassen neuer Nachrichten oder beim Verfassen neuer Nachrichten auf bestehende Anfragen zu antworten. So können Google Workspace-Add-ons das Schreiben von E‐Mails für den Nutzer automatisieren.

Auf die Benutzeroberfläche zum Schreiben von Add-ons zugreifen

Es gibt zwei Möglichkeiten, die UI zum Schreiben eines Add-ons aufzurufen. Die erste Möglichkeit besteht darin, oder eine neue Antwort schreiben, während das Add-on bereits geöffnet ist. Die zweite können Sie das Add-on starten, während Sie einen Entwurf erstellen.

In beiden Fällen führt das Add-on die entsprechende Auslösefunktion erstellen, die im Add-on definiert ist Manifest. Mit der Triggerfunktion zum Erstellen der Nachricht wird die UI für diese Zusammensetzung erstellt. , die Gmail dem Nutzer dann anzeigt.

Editor-Add-on erstellen

So fügen Sie einem Add-on eine Erstellungsfunktion hinzu:

1. Fügen Sie den gmail.composeTrigger hinzu. dem Add-on-Skriptprojekt hinzu. Manifest und aktualisieren Sie das Manifest Bereiche, die eingeschlossen werden sollen die für das Schreiben von Texten erforderlich sind.
2. Implementieren Sie eine Triggerfunktion zum Erstellen einer Nachricht, die beim Erstellen der auslösen. Triggerfunktionen zum Zusammensetzen geben entweder Card-Objekt oder ein Array von Card-Objekte, die zusammen die Benutzeroberfläche zum Schreiben der Nachricht.
3. Verknüpfte Callback-Funktionen implementieren, die erforderlich sind, um auf die Callback-Funktion des Nutzers zu reagieren UI-Interaktionen zu erstellen. Diese Funktionen sind nicht die Zusammensetzung Dies führt lediglich dazu, dass die Benutzeroberfläche zum Schreiben einer Nachricht angezeigt wird. Vielmehr sind dies die Funktionen, die bestimmen, was passiert, wenn verschiedene Elemente sind ausgewählt. Beispiel: eine UI-Karte mit einer Schaltfläche verfügt normalerweise über eine zugehörige Callback-Funktion, die ausgeführt wird, wenn ein Nutzer auf diese Schaltfläche. Die Callback-Funktion für Widgets, die den Nachrichtenentwurf aktualisieren sollte ein UpdateDraftActionResponse -Objekt enthält.

Triggerfunktion zusammensetzen

Die Benutzeroberfläche zum Schreiben eines Add-ons ist auf die gleiche Weise aufgebaut wie die Nachricht des Add-ons. Benutzeroberfläche – mit dem Apps Script Card Service zum Erstellen Karten und füllen sie mit Widgets:

Sie müssen die gmail.composeTrigger.selectActions[].runFunction die Sie in Ihrem Manifest definieren. Die Triggerfunktion zum Zusammensetzen muss Folgendes zurückgeben: ein einzelnes Card-Objekt oder Ein Array von Card-Objekten die die UI zum Schreiben dieser Aktion bilden. Diese Funktionen sind sehr ähnlich, auf kontextbezogene Triggerfunktionen Genauso sollten Infokarten erstellt werden.

Warnung: Aus Sicherheitsgründen sollten Add-ons können Google Workspace oder Drittanbieter nicht stillschweigend ändern Dateizugriffsberechtigungen. Ein Add-on kann beispielsweise nicht automatisch E-Mail-Empfänger den Konten hinzufügen, die eine Dropbox-Datei ansehen können. Stattdessen muss das Add-on die Nutzer über die Änderung der Berechtigung informieren. Add-ons, bei denen Nutzer nicht über solche Änderungen informiert werden, Überprüfung des Add-ons.

Triggerereignisobjekte erstellen

Wenn eine Aktion zum Schreiben ausgewählt ist, wird der entsprechende Trigger zum Schreiben ausgeführt und übergibt ihr ein Ereignisobjekt als Parameter verwendet werden. Das Ereignisobjekt kann Informationen zum Add-on-Kontext enthalten. und den Entwurf an die Triggerfunktion.

Siehe Struktur von Ereignisobjekten . Die Informationen das Ereignisobjekt teilweise durch den Wert des Ereignisses gmail.composeTrigger.draftAccess Manifest-Feld:

• Wenn die gmail.composeTrigger.draftAccess Manifest-Feld NONE oder nicht enthalten ist, enthält das Ereignisobjekt nur Informationen enthalten.

• Wenn gmail.composeTrigger.draftAccess auf METADATA gesetzt ist, wird das Ereignisobjekt an die Triggerfunktion zur Zusammensetzung übergeben. wird mit Listen der Empfänger der erstellten E-Mail gefüllt.

Hinweis: Wenn Sie METADATA-Zugriff auf Entwurfszugriffe haben, muss das Add-on-Manifest Folgendes enthalten: https://www.googleapis.com/auth/gmail.addons.current.message.metadata Gmail-Bereich.

Inhalte in aktive Entwürfe einfügen

In der Regel bietet die UI für das Schreiben eines Google Workspace-Add-ons die Nutzeroptionen und das Steuerelement zum Verfassen einer Nachricht. Für diese Anwendungsfälle Sobald der Nutzer in der Benutzeroberfläche eine Auswahl getroffen hat, interpretiert das Add-on die Auswahl. und aktualisiert den aktuellen Entwurf der E-Mail entsprechend.

Um den aktuellen E-Mail-Entwurf einfacher zu aktualisieren, bietet Ihnen der Kartendienst wurde um folgende Klassen erweitert:

• ContentType: Ein Enum, die definiert, ob änderbarer oder unveränderlicher HTML-Code (welches Gmail- die Nutzer nicht bearbeiten können) oder Nur-Text-Inhalte.
• UpdateDraftActionResponse: steht für Eine Antwort auf eine Aktion, mit der der aktuelle E-Mail-Entwurf aktualisiert wird.
• UpdateDraftActionResponseBuilder: A Builder für UpdateDraftActionResponse Objekte.
• UpdateDraftBodyAction: steht für eine Aktion, mit der der Text des aktuellen E-Mail-Entwurfs aktualisiert wird.
• UpdateDraftBodyType: Ein enum, das definiert, wie der Text geändert wird.
• UpdateDraftSubjectAction: steht für Eine Aktion, mit der das Betrefffeld des aktuellen E-Mail-Entwurfs aktualisiert wird.
• UpdateDraftToRecipientsAction: steht für Eine Aktion, mit der die Empfänger des aktuellen E-Mail-Entwurfs aktualisiert werden.
• UpdateDraftCcRecipientsAction: steht für eine Aktion, mit der die Cc-Empfänger des aktuellen E-Mail-Entwurfs aktualisiert werden.
• UpdateDraftBccRecipientsAction: steht für eine Aktion, mit der die Bcc-Empfänger des aktuellen E-Mail-Entwurfs aktualisiert werden.

Normalerweise enthält eine Add-on-Benutzeroberfläche zum Schreiben einer Nachricht die Schaltfläche „Speichern“. oder „Einfügen“ Widget, das Nutzende klicken, um anzugeben, dass sie die Auswahl in der Benutzeroberfläche abgeschlossen haben und ihre Auswahloptionen, die der erstellten E-Mail hinzugefügt werden sollen. So fügen Sie dies hinzu: interactivity enthält, sollte das Widget ein verknüpftes Action-Objekt, das weist das Add-on an, eine bestimmte Callback-Funktion auszuführen, wenn das Widget angeklickt wurde. Sie müssen diese Callback-Funktionen implementieren. Jede Callback-Funktion sollte eine erstellte UpdateDraftActionResponse , in dem die Änderungen beschrieben werden, die am aktuellen E-Mail-Entwurf vorgenommen werden sollen.

Beispiel 1

Das folgende Code-Snippet zeigt, wie Sie eine Benutzeroberfläche zum Schreiben einer E-Mail erstellen, mit der der Betreff sowie die Empfänger des aktuellen E-Mail-Entwurfs aktualisiert werden: An, Cc und Bcc.

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

Beispiel 2

Im folgenden Code-Snippet sehen Sie, wie Sie eine UI zum Schreiben von Bildern erstellen. in den aktuellen E-Mail-Entwurf einfügen.

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