Mit Google Workspace-Add-ons lassen sich E-Mails effektiver bearbeiten

1. Übersicht

In diesem Codelab verwenden Sie Google Apps Script, um ein Google Workspace-Add-on für Gmail zu schreiben, mit dem Nutzer direkt in Gmail Belegdaten aus einer E‑Mail in eine Tabelle einfügen können. Wenn ein Nutzer einen Beleg per E‑Mail erhält, öffnet er das Add‑on, das automatisch die relevanten Speseninformationen aus der E‑Mail abruft. Der Nutzer kann Ausgabeninformationen bearbeiten und dann einreichen, um die Ausgabe in einer Google-Tabelle zu erfassen.

Lerninhalte

• Google Workspace-Add‑on für Gmail mit Google Apps Script erstellen
• E‑Mails mit Google Apps Script parsen
• Mit Google Sheets über Google Apps Script interagieren
• Nutzerwerte mit dem Properties-Dienst von Google Apps Script speichern

Voraussetzungen

• Zugriff auf das Internet und einen Webbrowser
• Ein Google-Konto
• Einige Nachrichten, vorzugsweise E‑Mail-Belege, in Gmail

2. Beispielcode abrufen

Während Sie dieses Codelab durcharbeiten, kann es hilfreich sein, auf eine funktionierende Version des Codes zu verweisen, den Sie schreiben werden. Das GitHub-Repository enthält Beispielcode, den Sie als Referenz verwenden können.

Führen Sie den folgenden Befehl über die Befehlszeile aus, um den Beispielcode abzurufen:

git clone https://github.com/googleworkspace/gmail-add-on-codelab.git

3. Einfaches Add‑on erstellen

Schreiben Sie zuerst den Code für eine einfache Version des Add-ons, in der neben einer E-Mail ein Ausgabenformular angezeigt wird.

Erstellen Sie zuerst ein neues Apps Script-Projekt und öffnen Sie die Manifestdatei.

1. Rufen Sie script.google.com auf. Hier können Sie Ihre Apps Script-Projekte erstellen, verwalten und überwachen.
2. Wenn Sie ein neues Projekt erstellen möchten, klicken Sie links oben auf Neues Projekt. Das neue Projekt wird mit einer Standarddatei namens Code.gs geöffnet. Lassen Sie Code.gs vorerst in Ruhe. Sie werden später damit arbeiten.
3. Klicken Sie auf Unbenanntes Projekt, benennen Sie Ihr Projekt in Expense It! um und klicken Sie auf Umbenennen.
4. Klicken Sie links auf Projekteinstellungen .
5. Aktivieren Sie das Kästchen Manifestdatei „appscript.json“ im Editor anzeigen.
6. Klicken Sie auf Mitbearbeiter .
7. Klicken Sie links auf appscript.json, um die Manifestdatei zu öffnen.

Geben Sie in appscript.json die mit dem Add-on verknüpften Metadaten an, z. B. den Namen und die erforderlichen Berechtigungen. Ersetzen Sie den Inhalt von appsscript.json durch diese Konfigurationseinstellungen:

{
  "timeZone": "GMT",
  "oauthScopes": [
    "https://www.googleapis.com/auth/gmail.addons.execute"
  ],
  "gmail": {
    "name": "Expense It!",
    "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/receipt_black_24dp.png",
    "contextualTriggers": [{
      "unconditional": {
      },
      "onTriggerFunction": "getContextualAddOn"
    }],
    "primaryColor": "#41f470",
    "secondaryColor": "#94f441"
  }
}

Achten Sie besonders auf den Abschnitt des Manifests mit dem Namen contextualTriggers. In diesem Teil des Manifests wird die benutzerdefinierte Funktion angegeben, die aufgerufen werden soll, wenn das Add-on zum ersten Mal aktiviert wird. In diesem Fall wird getContextualAddOn aufgerufen, um Details zur geöffneten E‑Mail abzurufen und eine Reihe von Karten zurückzugeben, die dem Nutzer angezeigt werden sollen.

So erstellen Sie die Funktion getContextualAddOn:

1. Bewegen Sie den Mauszeiger links auf Code.gs und klicken Sie dann auf das Dreistrich-Menü  > Umbenennen.
2. Geben Sie GetContextualAddOn ein und drücken Sie die Taste Enter. Apps Script fügt Ihrem Dateinamen automatisch .gs hinzu. Sie müssen also keine Dateiendung eingeben. Wenn Sie GetContextualAddOn.gs eingeben, wird die Datei in Apps Script GetContextualAddOn.gs.gs genannt.
3. Ersetzen Sie in GetContextualAddOn.gs den Standardcode durch die Funktion getContextualAddOn:

/**
 * Returns the contextual add-on data that should be rendered for
 * the current e-mail thread. This function satisfies the requirements of
 * an 'onTriggerFunction' and is specified in the add-on's manifest.
 *
 * @param {Object} event Event containing the message ID and other context.
 * @returns {Card[]}
 */
function getContextualAddOn(event) {
  var card = CardService.newCardBuilder();
  card.setHeader(CardService.newCardHeader().setTitle('Log Your Expense'));

  var section = CardService.newCardSection();
  section.addWidget(CardService.newTextInput()
    .setFieldName('Date')
    .setTitle('Date'));
  section.addWidget(CardService.newTextInput()
    .setFieldName('Amount')
    .setTitle('Amount'));
  section.addWidget(CardService.newTextInput()
    .setFieldName('Description')
    .setTitle('Description'));
  section.addWidget(CardService.newTextInput()
    .setFieldName('Spreadsheet URL')
    .setTitle('Spreadsheet URL'));

  card.addSection(section);

  return [card.build()];
}

Die Benutzeroberfläche jedes Google Workspace-Add‑ons besteht aus Karten, die in einen oder mehrere Abschnitte unterteilt sind. Jeder Abschnitt enthält Widgets, mit denen Informationen angezeigt und vom Nutzer abgerufen werden können. Die Funktion getContextualAddOn erstellt eine einzelne Karte mit Details zu einer Ausgabe, die in einer E‑Mail gefunden wurde. Die Karte hat einen Bereich mit Texteingabefeldern für relevante Daten. Die Funktion gibt ein Array mit den Karten des Add-ons zurück. In diesem Fall enthält das zurückgegebene Array nur eine Karte.

Bevor Sie das Add-on „Expense It!“ bereitstellen, benötigen Sie ein Google Cloud-Projekt, das von Apps Script-Projekten zur Verwaltung von Autorisierungen, erweiterten Diensten und anderen Details verwendet wird. Weitere Informationen zu Google Cloud-Projekten

So stellen Sie Ihr Add-on bereit und führen es aus:

1. Öffnen Sie Ihr GCP-Projekt und kopieren Sie die Projektnummer.
2. Klicken Sie in Ihrem Apps Script-Projekt links auf Projekteinstellungen .
3. Klicken Sie unter „Google Cloud Platform-Projekt (GCP)“ auf Projekt ändern.
4. Geben Sie die Projektnummer Ihres GCP-Projekts ein und klicken Sie auf Projekt festlegen.
5. Klicken Sie auf Bereitstellen> Bereitstellungen testen.
6. Achten Sie darauf, dass der Bereitstellungstyp Google Workspace-Add-on ist. Klicken Sie bei Bedarf oben im Dialogfeld auf „Bereitstellungstypen aktivieren“  und wählen Sie Google Workspace-Add-on als Bereitstellungstyp aus.
7. Klicken Sie neben Anwendungen: Gmail auf Installieren.
8. Klicken Sie auf Fertig.

Das Add-on wird jetzt in Ihrem Gmail-Posteingang angezeigt.

1. Öffnen Sie Gmail auf Ihrem Computer.
2. In der Seitenleiste auf der rechten Seite wird „Expense It!“ Das -Add-on wird angezeigt. Möglicherweise müssen Sie auf „Weitere Add-ons“  klicken, um es zu finden.
3. Öffnen Sie eine E‑Mail, vorzugsweise eine Quittung mit Ausgaben.
4. Klicken Sie in der rechten Seitenleiste auf „Expense It!“, um das Add-on zu öffnen. .
5. Gewähren Sie Expense It! Zugriff auf Ihr Google-Konto, indem Sie auf Zugriff autorisieren klicken und der Anleitung folgen.

Das Add‑on zeigt neben einer geöffneten Gmail-Nachricht ein einfaches Formular an. Bisher macht sie noch nichts, aber im nächsten Abschnitt werden Sie ihre Funktionalität ausbauen.

Wenn Sie im weiteren Verlauf dieses Labs Aktualisierungen an Ihrem Add-on sehen möchten, müssen Sie nur Ihren Code speichern und Gmail aktualisieren. Es sind keine zusätzlichen Bereitstellungen erforderlich.

4. Auf E‑Mail-Nachrichten zugreifen

Fügen Sie Code hinzu, mit dem E‑Mail-Inhalte abgerufen werden, und modularisieren Sie den Code, um ihn besser zu organisieren.

Klicken Sie neben „Dateien“ auf „Hinzufügen“  > Skript und erstellen Sie eine Datei mit dem Namen Cards. Erstellen Sie eine zweite Skriptdatei mit dem Namen Helpers. Cards.gs erstellt die Karte und verwendet Funktionen aus Helpers.gs, um Felder im Formular basierend auf dem Inhalt der E-Mail auszufüllen.

Ersetzen Sie den Standardcode in Cards.gs durch diesen Code:

var FIELDNAMES = ['Date', 'Amount', 'Description', 'Spreadsheet URL'];

/**
 * Creates the main card users see with form inputs to log expenses.
 * Form can be prefilled with values.
 *
 * @param {String[]} opt_prefills Default values for each input field.
 * @param {String} opt_status Optional status displayed at top of card.
 * @returns {Card}
 */
function createExpensesCard(opt_prefills, opt_status) {
  var card = CardService.newCardBuilder();
  card.setHeader(CardService.newCardHeader().setTitle('Log Your Expense'));
  
  if (opt_status) {
    if (opt_status.indexOf('Error: ') == 0) {
      opt_status = '<font color=\'#FF0000\'>' + opt_status + '</font>';
    } else {
      opt_status = '<font color=\'#228B22\'>' + opt_status + '</font>';
    }
    var statusSection = CardService.newCardSection();
    statusSection.addWidget(CardService.newTextParagraph()
      .setText('<b>' + opt_status + '</b>'));
    card.addSection(statusSection);
  }
  
  var formSection = createFormSection(CardService.newCardSection(),
                                      FIELDNAMES, opt_prefills);
  card.addSection(formSection);
  
  return card;
}

/**
 * Creates form section to be displayed on card.
 *
 * @param {CardSection} section The card section to which form items are added.
 * @param {String[]} inputNames Names of titles for each input field.
 * @param {String[]} opt_prefills Default values for each input field.
 * @returns {CardSection}
 */
function createFormSection(section, inputNames, opt_prefills) {
  for (var i = 0; i < inputNames.length; i++) {
    var widget = CardService.newTextInput()
      .setFieldName(inputNames[i])
      .setTitle(inputNames[i]);
    if (opt_prefills && opt_prefills[i]) {
      widget.setValue(opt_prefills[i]);
    }
    section.addWidget(widget);
  }
  return section;
}

Die Funktion createExpensesCard verwendet ein Array von Werten zum Vorausfüllen des Formulars als optionales Argument. Die Funktion kann eine optionale Statusmeldung anzeigen, die rot gefärbt ist, wenn der Status mit „Error:“ beginnt, und ansonsten grün ist. Anstatt jedes Feld manuell zum Formular hinzuzufügen, durchläuft eine Hilfsfunktion namens createFormSection den Prozess der Erstellung von Text-Eingabe-Widgets, legt jeden Standardwert mit setValue fest und fügt die Widgets dann den entsprechenden Abschnitten auf der Karte hinzu.

Ersetzen Sie nun den Standardcode in Helpers.gs durch diesen Code:

/**
 * Finds largest dollar amount from email body.
 * Returns null if no dollar amount is found.
 *
 * @param {Message} message An email message.
 * @returns {String}
 */
function getLargestAmount(message) {
  return 'TODO';
}

/**
 * Determines date the email was received.
 *
 * @param {Message} message An email message.
 * @returns {String}
 */
function getReceivedDate(message) {
  return 'TODO';
}

/**
 * Determines expense description by joining sender name and message subject.
 *
 * @param {Message} message An email message.
 * @returns {String}
 */
function getExpenseDescription(message) {
  return 'TODO';
}

/**
 * Determines most recent spreadsheet URL.
 * Returns null if no URL was previously submitted.
 *
 * @returns {String}
 */
function getSheetUrl() {
  return 'TODO';
}

Die Funktionen in Helpers.gs werden von getContextualAddon aufgerufen, um die vorausgefüllten Werte im Formular zu ermitteln. Derzeit geben diese Funktionen nur den String „TODO“ zurück, da Sie die Logik für das Vervollständigen in einem späteren Schritt implementieren.

Aktualisieren Sie als Nächstes den Code in GetContextualAddon.gs, damit er den Code in Cards.gs und Helpers.gs nutzt. Ersetzen Sie den Code in GetContextualAddon.gs durch diesen Code:

/**
 * Copyright 2017 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Returns the contextual add-on data that should be rendered for
 * the current e-mail thread. This function satisfies the requirements of
 * an 'onTriggerFunction' and is specified in the add-on's manifest.
 *
 * @param {Object} event Event containing the message ID and other context.
 * @returns {Card[]}
 */
function getContextualAddOn(event) {
  var message = getCurrentMessage(event);
  var prefills = [getReceivedDate(message),
                  getLargestAmount(message),
                  getExpenseDescription(message),
                  getSheetUrl()];
  var card = createExpensesCard(prefills);

  return [card.build()];
}

/**
 * Retrieves the current message given an action event object.
 * @param {Event} event Action event object
 * @return {Message}
 */
function getCurrentMessage(event) {
  var accessToken = event.messageMetadata.accessToken;
  var messageId = event.messageMetadata.messageId;
  GmailApp.setCurrentMessageAccessToken(accessToken);
  return GmailApp.getMessageById(messageId);
}

Beachten Sie die neue getCurrentMessage-Funktion, mit der die vom Nutzer aktuell geöffnete Nachricht anhand des von Gmail bereitgestellten Ereignisses gelesen wird. Damit diese Funktion funktioniert, müssen Sie dem Skriptmanifest einen zusätzlichen Bereich hinzufügen, der schreibgeschützten Zugriff auf Gmail-Nachrichten ermöglicht.

Aktualisieren Sie in appscript.json den oauthScopes so, dass auch der Bereich https://www.googleapis.com/auth/gmail.addons.current.message.readonly angefordert wird.

"oauthScopes": [
  "https://www.googleapis.com/auth/gmail.addons.execute",
   "https://www.googleapis.com/auth/gmail.addons.current.message.readonly"
],

Führen Sie Ihr Add-on in Gmail aus und autorisieren Sie den Zugriff für Expense It!, damit E-Mails angezeigt werden können. Die Formularfelder sind jetzt mit „TODO“ vorausgefüllt.

5. Mit Google Sheets interagieren

Das Add-on „Expense It!“ enthält ein Formular, in das der Nutzer Details zu einer Ausgabe eingeben kann. Diese Details werden jedoch nirgends gespeichert. Wir fügen eine Schaltfläche hinzu, mit der die Formulardaten an eine Google-Tabelle gesendet werden.

Zum Hinzufügen einer Schaltfläche verwenden wir die Klasse ButtonSet. Für die Interaktion mit Google Sheets verwenden wir den Google Sheets-Dienst.

Ändern Sie createFormSection so, dass im Formularbereich der Karte eine Schaltfläche mit der Beschriftung „Senden“ zurückgegeben wird. Und so gehts:

1. Erstelle mit CardService.newTextButton() eine Textschaltfläche und beschrifte sie mit CardService.TextButton.setText() als „Senden“.
2. Gestalte die Schaltfläche so, dass beim Klicken darauf die folgende submitForm-Aktion über CardService.TextButton.setOnClickAction() aufgerufen wird:

/**
 * Logs form inputs into a spreadsheet given by URL from form.
 * Then displays edit card.
 *
 * @param {Event} e An event object containing form inputs and parameters.
 * @returns {Card}
 */
function submitForm(e) {
  var res = e['formInput'];
  try {
    FIELDNAMES.forEach(function(fieldName) {
      if (! res[fieldName]) {
        throw 'incomplete form';
      }
    });
    var sheet = SpreadsheetApp
      .openByUrl((res['Spreadsheet URL']))
      .getActiveSheet();
    sheet.appendRow(objToArray(res, FIELDNAMES.slice(0, FIELDNAMES.length - 1)));
    return createExpensesCard(null, 'Logged expense successfully!').build();
  }
  catch (err) {
    if (err == 'Exception: Invalid argument: url') {
      err = 'Invalid URL';
      res['Spreadsheet URL'] = null;
    }
    return createExpensesCard(objToArray(res, FIELDNAMES), 'Error: ' + err).build();
  }
}

/**
 * Returns an array corresponding to the given object and desired ordering of keys.
 *
 * @param {Object} obj Object whose values will be returned as an array.
 * @param {String[]} keys An array of key names in the desired order.
 * @returns {Object[]}
 */
function objToArray(obj, keys) {
  return keys.map(function(key) {
    return obj[key];
  });
}

3. Erstellen Sie mit CardService.newButtonSet() ein Widget für eine Schaltflächengruppe und fügen Sie mit CardService.ButtonSet.addButton() Ihre Textschaltfläche der Schaltflächengruppe hinzu.
4. Fügen Sie das Button-Set-Widget mit CardService.CardSection.addWidget() dem Formularbereich der Karte hinzu.

Mit nur wenigen Zeilen Code können wir eine Tabelle über ihre URL öffnen und dann eine Datenzeile an diese Tabelle anhängen. Die Formulareingaben werden als Teil des Ereignisses e an die Funktion übergeben. Wir prüfen, ob der Nutzer alle Felder ausgefüllt hat. Wenn keine Fehler auftreten, erstellen wir eine leere Ausgabenkarte mit einem günstigen Status. Wenn wir einen Fehler feststellen, senden wir die ursprüngliche ausgefüllte Karte zusammen mit der Fehlermeldung zurück. Mit der Hilfsfunktion objToArray lassen sich die Formularantworten einfacher in ein Array umwandeln, das dann an die Tabelle angehängt werden kann.

Aktualisieren Sie schließlich den Abschnitt oauthScopes in appsscript.json noch einmal, um den Bereich https://www.googleapis.com/auth/spreadsheets anzufordern. Wenn dieses Autorisierungsscope erteilt wird, kann das Add-on die Google-Tabellen eines Nutzers lesen und ändern.

"oauthScopes": [
  "https://www.googleapis.com/auth/gmail.addons.execute",
  "https://www.googleapis.com/auth/gmail.addons.current.message.readonly",
  "https://www.googleapis.com/auth/spreadsheets"
],

Wenn Sie noch keine neue Tabelle erstellt haben, tun Sie dies unter https://docs.google.com/spreadsheets/.

Führen Sie das Add-on noch einmal aus und versuchen Sie, das Formular zu senden. Achten Sie darauf, dass Sie die vollständige URL Ihrer Ziel-URL in das Formularfeld Tabellen-URL eingeben.

6. Werte mit dem Properties-Dienst speichern

Nutzer erfassen häufig viele Ausgaben in derselben Tabelle. Daher wäre es praktisch, die URL der letzten Tabelle als Standardwert auf der Karte anzubieten. Damit wir die URL der aktuellen Tabelle kennen, müssen wir diese Informationen jedes Mal speichern, wenn das Add-on verwendet wird.

Mit dem Properties-Dienst können wir Schlüssel/Wert-Paare speichern. In unserem Fall wäre ein sinnvoller Schlüssel „SPREADSHEET_URL“ und der Wert die URL selbst. Um einen solchen Wert zu speichern, müssen Sie submitForm in Cards.gs so ändern, dass die URL der Tabelle als Attribut gespeichert wird, wenn eine neue Zeile an das Tabellenblatt angehängt wird.

Eigenschaften können einen von drei Bereichen haben: Skript, Nutzer oder Dokument. Der Bereich Dokument gilt nicht für Gmail-Add-ons, ist aber für eine andere Art von Add-on relevant, wenn Informationen zu einem bestimmten Google-Dokument oder einer bestimmten Google-Tabelle gespeichert werden. Bei unserem Add-on soll das gewünschte Verhalten so sein, dass ein Nutzer seine eigene (und nicht die eines anderen) letzte Tabelle als Standardoption im Formular sieht. Daher wählen wir den Umfang Nutzer anstelle des Umfangs Script aus.

Verwenden Sie PropertiesService.getUserProperties().setProperty(), um die Tabellen-URL zu speichern. Fügen Sie submitForm in Cards.gs Folgendes hinzu:

PropertiesService.getUserProperties().setProperty('SPREADSHEET_URL', 
    res['Spreadsheet URL']);

Ändern Sie dann die Funktion getSheetUrl in Helpers.gs so, dass die gespeicherte Property zurückgegeben wird. Der Nutzer sieht dann bei jeder Verwendung des Add-ons die aktuelle URL. Verwenden Sie PropertiesService.getUserProperties().getProperty(), um den Wert der Eigenschaft abzurufen.

/**
 * Determines most recent spreadsheet URL.
 * Returns null if no URL was previously submitted.
 *
 * @returns {String}
 */
function getSheetUrl() {
  return PropertiesService.getUserProperties().getProperty('SPREADSHEET_URL');
}

Schließlich muss das Skript auch autorisiert werden, um auf den Property-Dienst zugreifen zu können. Fügen Sie dem Manifest wie bisher den Bereich https://www.googleapis.com/auth/script.storage hinzu, damit Ihr Add-on Property-Informationen lesen und schreiben kann.

7. Gmail-Nachricht parsen

Um Nutzern wirklich Zeit zu sparen, füllen wir das Formular mit relevanten Informationen zu den Ausgaben aus der E‑Mail vorab aus. Wir haben bereits Funktionen in Helpers.gs erstellt, die diese Rolle übernehmen, aber bisher haben wir nur „TODO“ für das Datum, den Betrag und die Beschreibung der Ausgabe zurückgegeben.

Wir können beispielsweise das Datum, an dem die E‑Mail empfangen wurde, als Standardwert für das Datum der Ausgabe verwenden.

/**
 * Determines date the email was received.
 *
 * @param {Message} message - The message currently open.
 * @returns {String}
 */
function getReceivedDate(message) {
  return message.getDate().toLocaleDateString();
}

Implementieren Sie die beiden verbleibenden Funktionen:

1. getExpenseDescription kann sowohl den Namen des Absenders als auch den Betreff der Nachricht umfassen. Es gibt jedoch ausgefeiltere Methoden, um den Nachrichtentext zu analysieren und eine noch genauere Beschreibung zu liefern.
2. Bei getLargestAmount sollten Sie nach bestimmten Symbolen suchen, die mit Geld in Verbindung stehen. Auf Belegen sind oft mehrere Werte aufgeführt, z. B. Steuern und andere Gebühren. Überlegen Sie, wie Sie den richtigen Betrag ermitteln können. Reguläre Ausdrücke können ebenfalls nützlich sein.

Wenn Sie zusätzliche Inspiration benötigen, sehen Sie sich die Referenzdokumentation für GmailMessage an oder den Lösungscode, den Sie zu Beginn des Codelabs heruntergeladen haben. Nachdem Sie Ihre eigenen Implementierungen für alle Funktionen in Helpers.gs entwickelt haben, können Sie Ihr Add-on ausprobieren. Öffnen Sie die Belege und beginnen Sie mit der Erfassung in einer Tabelle.

8. Formular mit Kartenaktionen leeren

Was passiert, wenn „Expense It!“ eine Ausgabe in einer geöffneten E-Mail falsch identifiziert und das Formular mit falschen Informationen vorausfüllt? Der Nutzer löscht das Formular. Mit der Klasse CardAction können wir eine Funktion angeben, die aufgerufen wird, wenn auf die Aktion geklickt wird. Wir verwenden sie, um dem Nutzer eine schnelle Möglichkeit zu geben, das Formular zu leeren.

Ändern Sie createExpensesCard so, dass die zurückgegebene Karte eine Kartenaktion mit dem Label „Formular leeren“ enthält. Wenn darauf geklickt wird, soll die folgende clearForm-Funktion aufgerufen werden, die Sie in Cards.gs einfügen können. Sie müssen opt_status als Parameter mit dem Namen „Status“ an die Aktion übergeben, damit die Statusmeldung erhalten bleibt, wenn das Formular gelöscht wird. Optionale Parameter für Aktionen müssen vom Typ „Object.<string, string>“ sein. Wenn opt_status nicht verfügbar ist, sollten Sie {'Status' : ''} übergeben.

/**
 * Recreates the main card without prefilled data.
 *
 * @param {Event} e An event object containing form inputs and parameters.
 * @returns {Card}
 */
function clearForm(e) {
  return createExpensesCard(null, e['parameters']['Status']).build();
}

9. Tabelle erstellen

Sie können nicht nur vorhandene Tabellen mit Google Apps Script bearbeiten, sondern auch ganz neue Tabellen programmatisch erstellen. In unserem Add-on soll der Nutzer eine Tabelle für Ausgaben erstellen können. Fügen Sie zuerst den folgenden Kartenabschnitt der Karte hinzu, die von createExpensesCard zurückgegeben wird.

var newSheetSection = CardService.newCardSection();
var sheetName = CardService.newTextInput()
  .setFieldName('Sheet Name')
  .setTitle('Sheet Name');
var createExpensesSheet = CardService.newAction()
  .setFunctionName('createExpensesSheet');
var newSheetButton = CardService.newTextButton()
  .setText('New Sheet')
  .setOnClickAction(createExpensesSheet);
newSheetSection.addWidget(sheetName);
newSheetSection.addWidget(CardService.newButtonSet().addButton(newSheetButton));
card.addSection(newSheetSection);

Wenn der Nutzer jetzt auf die Schaltfläche „Neue Tabelle“ klickt, wird vom Add-on eine neue Tabelle mit einer Kopfzeile generiert, die fixiert ist, sodass sie immer sichtbar ist. Der Nutzer gibt einen Titel für die neue Tabelle im Formular an. Es kann jedoch sinnvoll sein, einen Standardwert einzufügen, falls das Formular leer ist. Geben Sie in Ihrer Implementierung von createExpensesSheet eine Karte zurück, die der vorhandenen Karte nahezu identisch ist. Fügen Sie jedoch eine entsprechende Statusmeldung hinzu und füllen Sie das URL-Feld mit der URL der neuen Tabelle vorab aus.

10. Glückwunsch!

Sie haben erfolgreich ein Gmail-Add-on entwickelt und implementiert, das Ausgaben in E‑Mails findet und Nutzern hilft, die Ausgaben in Sekundenschnelle in einer Tabelle zu erfassen. Sie haben Google Apps Script verwendet, um mit mehreren Google-APIs zu interagieren und Daten zwischen mehreren Ausführungen des Add-ons beizubehalten.

Mögliche Verbesserungen

Lassen Sie Ihrer Fantasie freien Lauf, wenn Sie die App „Expense It!“ verbessern. Hier sind einige Ideen für ein noch nützlicheres Produkt:

• Link zur Tabelle, nachdem der Nutzer eine Ausgabe erfasst hat
• Möglichkeit hinzufügen, die Erfassung einer Ausgabe zu bearbeiten/rückgängig zu machen
• Externe APIs einbinden, damit Nutzer Zahlungen vornehmen und Geld anfordern können

Weitere Informationen

• Gmail-Dienst
• Google Sheets
• Properties-Dienst
• Sheets API Codelab
• Slides API Codelab