Oluşturma işlemleriyle oluşturma kullanıcı arayüzünü genişletme

Buna ek olarak, kullanıcı Gmail okurken kart tabanlı bir arayüz sağlar iletisi, Gmail'i genişleten Google Workspace Eklentileri kullanıcı yeni ileti oluştururken başka bir arayüz sağlayabilir veya mevcut olanlarla yanıt verin. Bu sayede Google Workspace Eklentileri, kullanıcı için e-posta oluşturma işlemini otomatikleştirebilir.

Eklenti oluşturma kullanıcı arayüzüne erişme

Eklentinin oluşturma kullanıcı arayüzünü görüntülemenin iki yolu vardır. İlk yöntem, işe koyulurken eklenti açıkken yeni bir taslak veya yanıt oluşturabilirsiniz. İkinci bir taslak oluştururken eklentiye başlamaktır.

Her iki durum da eklentinin ilgili Eklentide tanımlanan tetikleyici işlevini oluşturun manifest dosyası. Oluşturma tetikleyicisi işlevi, söz konusu oluşturma işlemi için yazma kullanıcı arayüzünü oluşturur Gmail'in kullanıcıya görüntülediği işlemi gösterir.

Oluşturma eklentisi oluşturma

Aşağıdaki genel adımları uygulayarak eklentiye oluşturma işlevi ekleyebilirsiniz:

1. gmail.composeTrigger ekleyin alanı eklenti komut dosyası projesine ekleyin. manifest ve manifest dosyasını güncelleyin dahil edilecek kapsamlar izin verilenler listesine eklenir.
2. Şu durumlarda oluşturma kullanıcı arayüzü oluşturan bir oluşturma tetikleyicisi işlevi uygulayın: olduğunu varsayalım. Oluşturma tetikleyici işlevleri, tek bir Card nesnesi veya bir dizisi Şunları oluşturan Card nesne oluşturma kullanıcı arayüzünü oluşturur.
3. Kullanıcının kullanıcı arayüzü etkileşimleri oluşturabilirsiniz. Bu işlevler, oluşturma işleminin kendisi değildir (bu yalnızca oluşturma kullanıcı arayüzünün görünmesine neden olur); daha çok öğesinin farklı öğeleri bir araya getirildiğinde ne olduğunu yöneten bağımsız fonksiyonlar oluşturma arayüzünün seçildiğinden emin olun. Örneğin, bir düğmenin yer aldığı bir kullanıcı arayüzü kartı genellikle kullanıcı bir öğeyi tıkladığında yürütülen ilişkili bir geri çağırma işlevine sahiptir. o düğmeyi tıklayın. Taslak mesajı güncelleyen widget'lar için geri çağırma işlevi içerik, UpdateDraftActionResponse nesnesini tanımlayın.

Tetikleyici işlevi oluştur

Eklentinin yazma kullanıcı arayüzü, eklentinin mesajıyla aynı şekilde oluşturulur kullanıcı arayüzü: Oluşturmak için Apps Komut Dosyası Kart hizmetini kartlara yerleştirip widget'ları kullanın.

Şunu uygulamanız gerekir: gmail.composeTrigger.selectActions[].runFunction API'yi kullanabilirsiniz. Oluşturma tetikleyicisi işlevi, tek bir Card nesnesi veya Card nesne dizisi bu işlem için oluşturabilirsiniz. Bu işlevler birbirine çok benzer bağlamsal tetikleme işlevleri ve kartları aynı şekilde oluşturmalıdır.

Uyarı: Eklentiler güvenlik nedeniyle Google Workspace veya üçüncü taraf sessizce değiştirilemez dosya erişim izinleri. Örneğin, bir eklenti sessizce Dropbox dosyasını görüntüleyebilen hesap grubuna e-posta alıcıları ekleme. Bunun yerine, eklentinin kullanıcılara izin değişikliğinin gerçekleştiğini bildirmesi gerekir. kullanıcıları bu tür değişiklikler konusunda bilgilendirmeyen eklentiler geçemez eklenti incelemesi bölümüne bakın.

Tetikleyici etkinlik nesnelerini oluşturma

Oluşturma işlemi seçildiğinde, ilgili oluşturma tetikleyicisini yürütür fonksiyonuna bir etkinlik nesnesi iletir kullanabilirsiniz. Etkinlik nesnesi, eklenti bağlamı hakkında bilgi içerebilir oluşturulan taslak, tetikleyici işlevine yansıtılacak.

Etkinlik nesne yapısı bölümünü inceleyin. başlıklı makalemize göz atın. Bilgiler tarafından kontrol edilen bir etkinlik nesnesidir. Etkinlik nesnesinde bulunan gmail.composeTrigger.draftAccess manifest alanı:

• gmail.composeTrigger.draftAccess manifest alanı NONE ise veya eklenmemişse etkinlik nesnesi yalnızca minimum bilgi sağlar.

• gmail.composeTrigger.draftAccess ise oluşturma tetikleyicisi işlevine iletilen etkinlik nesnesi METADATA olarak ayarlandığında oluşturulan e-postanın alıcılarının listeleriyle doldurulur.

ziyaret edin.

Not: METADATA taslak erişiminin kullanılması için eklenti manifest'inde https://www.googleapis.com/auth/gmail.addons.current.message.metadata Gmail kapsamı.

Etkin taslaklara içerik ekleme

Google Workspace eklentisi oluşturma arayüzü genellikle mesajın oluşturulmasına yardımcı olan kullanıcı seçeneklerini ve denetimini kullanabilirsiniz. Bu kullanım alanlarında Kullanıcı arayüzde seçimler yaptıktan sonra, eklenti, yapılan seçimleri ve mevcut çalışma e-posta taslağını buna göre günceller.

Mevcut taslak e-postayı güncellemeyi kolaylaştırmak için Kart hizmeti aşağıdaki sınıflarla genişletildi:

• ContentType: Bir Değişebilir HTML, değiştirilemez HTML (Gmail tarafından belirli bir yerde düzenleyemeyeceği şekilde) veya düz metin içeriğini ifade eder.
• UpdateDraftActionResponse: Temsil ettiği değer Mevcut taslak e-postayı güncelleyen bir işleme yanıt.
• UpdateDraftActionResponseBuilder: A derleyici: UpdateDraftActionResponse nesneler'i tıklayın.
• UpdateDraftBodyAction: Temsil ettiği değer Mevcut taslak e-postanın gövdesini güncelleyen bir işlem.
• UpdateDraftBodyType: Bir gövdenin nasıl değiştirildiğini tanımlayan enum.
• UpdateDraftSubjectAction: Temsil ettiği değer Mevcut taslak e-postanın konu alanını güncelleyen bir işlem.
• UpdateDraftToRecipientsAction: Temsil ettiği değer Mevcut taslak e-postanın alıcılarına güncelleyen bir işlem.
• UpdateDraftCcRecipientsAction: Temsil ettiği değer Mevcut taslak e-postanın Cc alıcılarını güncelleyen bir işlem.
• UpdateDraftBccRecipientsAction: Temsil ettiği değer Mevcut taslak e-postanın Bcc alıcılarını güncelleyen bir işlem.

Eklenti oluşturma kullanıcı arayüzünde genellikle "Kaydet" veya "Insert" kullanıcının kullanıcı arayüzünde seçimlerini yaptıklarını belirtmek için tıklayabilir ve seçimlerini de değiştirebilirsiniz. Bunu eklemek için interactivity ise widget'ın aşağıdaki gibi görünen ilişkilendirilmiş Action: parametre etkinleştirildiğinde eklentiye belirli bir geri çağırma işlevini çalıştırma talimatı verir. tıklandı. Bu geri çağırma işlevlerini uygulamanız gerekir. Her geri çağırma işlevi, inşa edilmiş bir sonuçları döndür UpdateDraftActionResponse değişikliklerinin ayrıntılarını içeren bir nesnedir.

1. Örnek

Aşağıdaki kod snippet'inde, konuyu güncelleyen bir yazma kullanıcı arayüzünün nasıl oluşturulacağı ve mevcut e-posta taslağının Alıcı, Cc, Bcc alıcılarının nasıl oluşturulacağı gösterilmektedir.

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

2. Örnek

Aşağıdaki kod snippet'i, resim ekleyen oluşturma kullanıcı arayüzünün nasıl oluşturulacağını göstermektedir otomatik olarak eklenir.

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