Rozszerzenie interfejsu tworzenia wiadomości za pomocą działań tworzenia wiadomości.

Oprócz udostępniania interfejsu opartego na kartach, gdy użytkownik czyta Gmaila wiadomość, dodatki do Google Workspace, które rozszerzają Gmaila może zapewnić inny interfejs, gdy użytkownik tworzy nowe wiadomości lub w odpowiedzi na istniejące. Dzięki temu dodatki do Google Workspace automatyzują proces tworzenia e-maili dla użytkownika.

Otwieranie interfejsu tworzenia dodatku

Interfejs tworzenia dodatku można wyświetlić na 2 sposoby. Pierwszy sposób to rozpoczęcie podczas tworzenia nowej wersji roboczej lub odpowiedzi, gdy dodatek jest już otwarty. Druga jest uruchomienie dodatku podczas tworzenia wersji roboczej.

W obu przypadkach dodatek uruchomi odpowiedni funkcję aktywatora tworzenia wiadomości zdefiniowaną w dodatku, manifestować. Funkcja aktywatora tworzenia tworzy interfejs tej wiadomości działanie, które Gmail wyświetli użytkownikowi.

Tworzenie dodatku do tworzenia wiadomości

Aby dodać funkcję tworzenia wiadomości do dodatku, wykonaj te ogólne czynności:

  1. Dodaj gmail.composeTrigger do projektu skryptu dodatku manifestuj i zaktualizuj plik manifestu. zakresy do uwzględnienia tych wymaganych podczas tworzenia wiadomości.
  2. Zaimplementuj funkcję aktywatora tworzenia, która tworzy interfejs tworzenia, gdy pożary wyzwalacza. Funkcje aktywatora tworzenia zwracają Card obiekt lub tablica Card obiekty, które składają się na interfejsu tworzenia wiadomości.
  3. Zaimplementować powiązane funkcje wywołania zwrotnego niezbędne do reagowania na żądania użytkownika do tworzenia interakcji w interfejsie. Te funkcje nie są samymi działaniami tworzenia wiadomości. (co powoduje tylko wyświetlenie interfejsu tworzenia wiadomości); są to raczej poszczególnych funkcji, które określają, co się dzieje, gdy różne elementy argumentu interfejsu tworzenia wiadomości. Przykładem może być karta interfejsu zawierająca przycisk zwykle ma powiązaną funkcję wywołania zwrotnego, która jest wykonywana po kliknięciu przez użytkownika tego przycisku. Funkcja wywołania zwrotnego dla widżetów, które aktualizują wersję roboczą wiadomości powinno zwracać błąd UpdateDraftActionResponse obiektu.

Funkcja aktywatora tworzenia

Interfejs tworzenia wiadomości jest utworzony w taki sam sposób, jak wiadomość dodatku. interfejsu użytkownika – przy użyciu usługi kart Apps Script, kartami i wypełniaj je widżety.

Musisz zaimplementować gmail.composeTrigger.selectActions[].runFunction zdefiniowanych w pliku manifestu. Funkcja aktywatora tworzenia musi zwracać pojedynczy obiekt Card lub tablica obiektów Card które składają się na interfejs tworzenia wiadomości. Te funkcje są bardzo podobne do funkcji wyzwalania kontekstowego i powinny tworzyć karty w ten sam sposób.

Obiekty zdarzeń aktywatora tworzenia

Po wybraniu działania tworzenia wiadomości uruchamia ono odpowiedni aktywator tworzenia wiadomości. i przekazuje do niej obiekt zdarzenia . Obiekt zdarzenia może zawierać informacje o kontekście dodatku i wersję roboczą tworzonej dla funkcji aktywującej.

Zobacz Struktura obiektu zdarzenia. by dowiedzieć się więcej o rozmieszczeniu informacji w obiekcie zdarzenia. Informacja zawarte w obiekcie zdarzenia jest częściowo kontrolowana przez wartość parametru gmail.composeTrigger.draftAccess pole pliku manifestu:

  • Jeśli gmail.composeTrigger.draftAccess pole manifestu ma wartość NONE lub nie zostało uwzględnione, obiekt zdarzenia zawiera tylko do minimum informacji.

  • Jeśli gmail.composeTrigger.draftAccess jest ustawiona na METADATA, obiekt zdarzenia jest przekazywany do funkcji wyzwalacza tworzenia wiadomości jest zapełniana listą odbiorców tworzonego e-maila.

.

Wstawianie treści do aktywnych wersji roboczych

Interfejs tworzenia wiadomości zwykle zapewnia dodatek do Google Workspace opcje użytkownika i kontrolę, które pomagają w tworzeniu wiadomości. W tych przypadkach użycia Gdy użytkownik dokona wyboru w interfejsie, dodatek zinterpretuje wybrane opcje. i odpowiednio zaktualizuje obecną wersję roboczą e-maila.

Aby ułatwić Ci zaktualizowanie obecnej wersji roboczej e-maila, skorzystaj z usługi kart została rozszerzona o następujące klasy:

Zwykle interfejs tworzenia dodatków zawiera przycisk „Zapisz” lub „Wstaw” widżet, mogą kliknąć, aby wskazać, że dokonali wyboru w interfejsie użytkownika i chcą, opcje dodawane do tworzonego e-maila. Aby to dodać interactivity – widżet powinien mieć powiązany obiekt Action, który instruuje dodatek, aby uruchamiał określoną funkcję wywołania zwrotnego, gdy widżet jest kliknięto. Musisz zaimplementować te funkcje wywołania zwrotnego. Każda funkcja wywołania zwrotnego powinna zwracanie UpdateDraftActionResponse ze szczegółami zmian, które należy wprowadzić w bieżącej wersji roboczej e-maila.

Przykład 1

Ten fragment kodu pokazuje, jak utworzyć interfejs tworzenia wiadomości, który aktualizuje temat, oraz odbiorców bieżącej wersji roboczej e-maila, a także odbiorców Do, DW i UDW.

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

Przykład 2

Ten fragment kodu pokazuje, jak utworzyć interfejs tworzenia wiadomości, który wstawia obrazy w bieżącej wersji roboczej e-maila.

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