Diese Seite wurde von der Cloud Translation API übersetzt.

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

1. Übersicht

In diesem Codelab schreiben Sie mit Google Apps Script ein Google Workspace-Add-on für Gmail, mit dem Nutzer direkt in Gmail Belegdaten aus einer E-Mail einer Tabelle hinzufügen können. Wenn ein Nutzer einen Beleg per E-Mail erhält, öffnet er das Add-on, das automatisch relevante Informationen zu den Spesen aus der E-Mail erhält. Der Nutzer kann Speseninformationen bearbeiten und dann einreichen, um seine Ausgaben in einer Google-Tabelle zu protokollieren.

Lerninhalte

Mit Google Apps Script ein Google Workspace-Add-on für Gmail erstellen
E-Mails mit Google Apps Script parsen
Über Google Apps Script mit Google Tabellen interagieren
Nutzerwerte mit dem Eigenschaftendienst von Google Apps Script speichern

Voraussetzungen

Zugriff auf das Internet und einen Webbrowser
Ein Google-Konto
Einige Nachrichten, vorzugsweise E-Mail-Bestätigungen, 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 in der Befehlszeile folgenden Befehl 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, bei dem neben einer E-Mail ein Spesenformular angezeigt wird.

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

Rufen Sie script.google.com auf. Hier können Sie Ihre Apps Script-Projekte erstellen, verwalten und überwachen.
Klicken Sie links oben auf Neues Projekt, um ein neues Projekt zu erstellen. Das neue Projekt wird mit der Standarddatei Code.gs geöffnet. Lassen Sie Code.gs vorerst in Ruhe, Sie werden später damit arbeiten.
Klicken Sie auf Unbenanntes Projekt, nennen Sie Ihr Projekt Expense It! und klicken Sie auf Umbenennen.
Klicken Sie links auf Projekteinstellungen .
Aktivieren Sie das Kontrollkästchen "appscript.json" anzeigen Manifestdatei im Editor an.
Klicken Sie auf Bearbeiter .
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 Teil des Manifests namens contextualTriggers. Dieser Teil des Manifests gibt die benutzerdefinierte Funktion an, die aufgerufen werden soll, wenn das Add-on zum ersten Mal aktiviert wird. In diesem Fall wird getContextualAddOn aufgerufen, wodurch Details zur geöffneten E-Mail abgerufen und verschiedene Karten zurückgegeben werden, die dem Nutzer angezeigt werden.

So erstellen Sie die Funktion getContextualAddOn:

Halten Sie links den Mauszeiger über Code.gs und klicken Sie dann auf das Dreistrich-Menü . Umbenennen.
Geben Sie GetContextualAddOn ein und drücken Sie die Enter-Taste. Apps Script hängt automatisch .gs an den Dateinamen an, Sie müssen also keine Dateiendung eingeben. Wenn Sie GetContextualAddOn.gs eingeben, gibt Apps Script der Datei den Namen GetContextualAddOn.gs.gs.
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 der Add-ons von Google Workspace-Add-ons besteht aus Karten, die in einen oder mehrere Abschnitte unterteilt sind. Jede von ihnen enthält Widgets, mit denen Informationen des Nutzers angezeigt und abgerufen werden können. Mit der Funktion getContextualAddOn wird eine einzelne Karte erstellt, die Details zu einer in einer E-Mail gefundenen Ausgabe enthält. Die Karte enthält einen Abschnitt mit Texteingabefeldern für relevante Daten. Die Funktion gibt ein Array der Karten des Add-ons zurück. In diesem Fall enthält das zurückgegebene Array nur eine Karte.

Vor der Bereitstellung von Expense It! benötigen Sie ein Google Cloud Platform-Projekt (GCP), mit dem Apps Script-Projekte Autorisierungen, erweiterte Dienste und andere Details verwalten. Weitere Informationen finden Sie unter Google Cloud Platform-Projekte.

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

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

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

Öffnen Sie Gmail auf Ihrem Computer.
Auf der rechten Seite sehen Sie im Bereich „Expense It! Das Add-on „“ wird angezeigt. Möglicherweise müssen Sie auf „Weitere Add-ons“ klicken, um sie zu finden.
Öffnen Sie eine E-Mail, am besten einen Beleg mit Ausgaben.
Klicken Sie in der rechten Seitenleiste auf „Expense It“, um das Add-on zu öffnen. .
Kosten sparen! auf Ihr Google-Konto zugreifen können. Klicken Sie dazu auf Zugriff autorisieren und folgen Sie den Aufforderungen.

Das Add-on zeigt neben einer geöffneten Gmail-Nachricht ein einfaches Formular an. Sie können noch nichts weiter tun, aber die Funktionalität wird im nächsten Abschnitt erläutert.

Wenn Sie im weiteren Verlauf dieses Labs Änderungen 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-Mails zugreifen

Fügen Sie Code hinzu, der E-Mail-Inhalte abruft und den Code modularisiert, um ihn etwas besser zu strukturieren.

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 von 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, um das Formular als optionales Argument vorauszufüllen. Die Funktion kann eine optionale Statusmeldung anzeigen, die rot ist, wenn der Status mit „Fehler:“ beginnt, und ansonsten grün. Anstatt dem Formular jedes Feld manuell hinzuzufügen, wird die Hilfsfunktion „createFormSection“ durch die Erstellung von Texteingabe-Widgets geführt, 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 für das Formular zu ermitteln. Vorerst geben diese Funktionen nur die Zeichenfolge "TODO" zurück. da Sie die Logik für das Vorausfüllen in einem späteren Schritt implementieren.

Aktualisieren Sie als Nächstes den Code in GetContextualAddon.gs, sodass der Code in Cards.gs und Helpers.gs verwendet wird. 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, die das von Gmail bereitgestellte Ereignis verwendet, um die aktuell geöffnete Nachricht des Nutzers zu lesen. Damit diese Funktion funktioniert, fügen Sie dem Skriptmanifest einen zusätzlichen Bereich hinzu, der Lesezugriff auf Gmail-Nachrichten ermöglicht.

Aktualisieren Sie oauthScopes in appscript.json 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 in Gmail das Add-on aus und autorisieren Sie den Zugriff für Expense It! um E-Mails anzuzeigen. Die Formularfelder sind jetzt mit "TODO" vorausgefüllt.

5. Mit Google Tabellen interagieren

The Expense It! gibt es ein Formular, in das der Nutzer Details zu Ausgaben eingeben kann. Diese Details sind jedoch nirgendwo zu finden. Lassen Sie uns eine Schaltfläche hinzufügen, mit der die Formulardaten an eine Google-Tabelle gesendet werden.

Zum Hinzufügen einer Schaltfläche verwenden wir die Klasse ButtonSet. Für die Benutzeroberfläche von Google Tabellen verwenden wir Google Tabellen.

Ändern Sie createFormSection so, dass eine Schaltfläche mit der Bezeichnung „Senden“ zurückgegeben wird. als Teil des Formularabschnitts der Karte. Und so gehts:

Erstelle mit CardService.newTextButton() eine Textschaltfläche und beschriftet die Schaltfläche „Senden“ mit CardService.TextButton.setText().
Gestalte die Schaltfläche so, dass beim Anklicken 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];
  });
}

Erstelle mit CardService.newButtonSet() ein Widget für die Schaltflächengruppe und füge deine Textschaltfläche zu dem mit CardService.ButtonSet.addButton() festgelegten Schaltflächensatz hinzu.
Fügen Sie das Widget für die Schaltflächenauswahl mithilfe von CardService.CardSection.addWidget() dem Formularabschnitt der Karte hinzu.

Mit nur wenigen Codezeilen können wir eine Tabelle über ihre URL öffnen und dann eine Datenzeile an dieses Tabellenblatt anhängen. Die Formulareingaben werden als Teil des Ereignisses e an die Funktion übergeben. Wir prüfen dann, ob der Nutzer alle Felder angegeben hat. Sofern keine Fehler auftreten, erstellen wir eine leere Ausgabenkarte mit einem günstigen Status. Falls ein Fehler auftritt, wird die ursprünglich ausgefüllte Karte zusammen mit der Fehlermeldung zurückgegeben. Mit der Hilfsfunktion objToArray lassen sich Formularantworten leichter in ein Array konvertieren, das dann an die Tabelle angehängt werden kann.

Aktualisieren Sie zuletzt den Abschnitt oauthScopes in appsscript.json. Fordern Sie noch einmal den Bereich https://www.googleapis.com/auth/spreadsheets an. Wenn dieser Bereich autorisiert ist, 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"
],

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

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

6. Werte mit dem Properties-Dienst speichern

Häufig erfassen Nutzende viele Ausgaben in derselben Tabelle. Daher wäre es praktisch, die neueste Tabellen-URL als Standardwert in der Karte anzugeben. Um die aktuelle URL der Tabelle zu ermitteln, müssen wir diese Informationen bei jeder Verwendung des Add-ons speichern.

Im Properties-Dienst können Schlüssel/Wert-Paare gespeichert werden. In unserem Fall wäre "SPREADSHEET_URL" ein sinnvoller Schlüssel. während der Wert die URL selbst wäre. Um einen solchen Wert zu speichern, müssen Sie submitForm in Cards.gs ändern, sodass die URL der Tabelle als Eigenschaft gespeichert wird, sobald eine neue Zeile an das Tabellenblatt angehängt wird.

Attribute können einen von drei Bereichen haben: „Script“, „Nutzer“ oder „Dokument“. Der Geltungsbereich Dokument gilt nicht für Gmail-Add-ons. Er ist jedoch für einen separaten Add-on-Typ relevant, wenn Sie spezifische Informationen für ein bestimmtes Google-Dokument oder eine bestimmte Google-Tabelle speichern. Bei unserem Add-on ist es gewünscht, dass eine Person die aktuelle Tabelle als Standardoption im Formular sieht und nicht die Tabelle einer anderen Person. Daher wählen wir den Bereich user und nicht den Bereich 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, um das gespeicherte Attribut so zurückzugeben, dass der Nutzer bei jeder Verwendung des Add-ons die neueste URL sieht. Verwenden Sie PropertiesService.getUserProperties().getProperty(), um den Wert des Attributs abzurufen.

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

Für den Zugriff auf den Property-Dienst muss das Skript ebenfalls autorisiert werden. Fügen Sie dem Manifest wie zuvor den Bereich https://www.googleapis.com/auth/script.storage hinzu, damit das Add-on Attributinformationen lesen und schreiben kann.

7. Gmail-Nachricht parsen

Um die Nutzer wirklich zu ersparen, füllen wir das Formular mit relevanten Informationen zu den Kosten aus der E-Mail vorab aus. Wir haben bereits Funktionen in Helpers.gs erstellt, die diese Rolle spielen, aber bisher haben wir nur "TODO" zurückgegeben. für das Datum, den Betrag und eine Beschreibung der Ausgaben.

Beispielsweise können wir das Datum abrufen, an dem die E-Mail eingegangen ist, und dieses Datum als Standardwert für das Datum der Ausgaben 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:

Bei getExpenseDescription werden möglicherweise sowohl der Name des Absenders als auch der Betreff der Nachricht zusammengeführt. Es gibt jedoch ausgefeiltere Möglichkeiten, den Nachrichtentext zu parsen und eine noch genauere Beschreibung zu liefern.
Für getLargestAmount kannst du nach bestimmten Symbolen für Geld suchen. Auf Belegen sind oft mehrere Werte aufgeführt, z. B. Steuern und sonstige Gebühren. Überlegen Sie, wie Sie den richtigen Betrag ermitteln könnten. Reguläre Ausdrücke können ebenfalls hilfreich sein.

Weitere Anregungen finden Sie in der Referenzdokumentation zu GmailMessage oder im Lösungscode, den Sie am Anfang des Codelabs heruntergeladen haben. Sobald Sie Ihre eigenen Implementierungen für alle Funktionen in Helpers.gs entwickelt haben, testen Sie Ihr Add-on. Öffnen Sie Belege und fangen Sie an, sie in einer Tabelle zu protokollieren.

8. Formular mit Kartenaktionen löschen

Was passiert, wenn es kosteneffizient ist? Wird in einer offenen E-Mail eine Ausgabe falsch identifiziert und das Formular mit falschen Informationen vorausgefüllt? Der Nutzer löscht das Formular. Mit der Klasse CardAction können Sie eine Funktion angeben, die aufgerufen wird, wenn auf die Aktion geklickt wird. Wir möchten damit den Nutzenden eine schnelle Möglichkeit bieten, das Formular zu löschen.

Ändern Sie createExpensesCard so, dass auf der zurückgegebenen Karte eine Kartenaktion namens „Formular löschen“ angezeigt wird. Beim Anklicken wird die folgende clearForm-Funktion aufgerufen, die Sie in Cards.gs einfügen können. Sie müssen opt_status als Parameter namens „Status“ übergeben. der Aktion hinzu, damit die Statusmeldung nach dem Löschen des Formulars angezeigt 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 mit Google Apps Script eine vorhandene Tabelle bearbeiten, sondern auch programmatisch eine völlig neue Tabelle erstellen. Lassen Sie uns für unser Add-on zulassen, dass die Nutzenden eine Tabelle für ihre Ausgaben erstellen. Fügen Sie zuerst der von createExpensesCard zurückgegebenen Karte den folgenden Kartenabschnitt hinzu.

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 auf das neue Tabellenblatt wird vom Add-on eine neue Tabelle mit einer fixierten Kopfzeile erstellt, die immer sichtbar ist. Der Nutzer gibt im Formular einen Titel für die neue Tabelle an, auch wenn ein Standardwert für den Fall, dass das Formular leer ist, eine gute Wahl ist. Bei der Implementierung von createExpensesSheet wird eine nahezu identische Karte mit der vorhandenen Karte zurückgegeben, wobei eine entsprechende Statusmeldung hinzugefügt und das URL-Feld mit der URL der neuen Tabelle vorausgefüllt wird.

10. Glückwunsch!

Sie haben erfolgreich ein Gmail-Add-on entworfen und implementiert, das Ausgaben in einer E-Mail findet und Nutzern hilft, die Ausgaben in Sekundenschnelle in einer Tabelle einzutragen. Sie haben mithilfe von Google Apps Script eine Schnittstelle mit mehreren Google APIs eingerichtet und Daten zwischen mehreren Ausführungen des Add-ons beibehalten.

Mögliche Verbesserungen

Lass dich bei der Optimierung von „Expense It!“ von deiner Fantasie leiten, aber hier sind einige Ideen für die Entwicklung eines noch nützlicheren Produkts:

Link zur Tabelle, nachdem der Nutzer seine Ausgaben protokolliert hat
Möglichkeit zum Bearbeiten/Rückgängigmachen des Protokollierens von Ausgaben hinzufügen
Integration externer APIs, damit Nutzer Zahlungen vornehmen und Geld anfordern können