Google Workspace-UI erweitern

Auf dieser Seite werden die Optionen zum Erweitern der Google Workspace-Benutzeroberfläche beschrieben. Es gibt viele Gründe, die Google Workspace-Benutzeroberfläche zu erweitern, darunter:

  • Integrieren Sie Ihre App oder Ihren Dienst in Google Workspace, damit Nutzer die App direkt über eine oder mehrere Google Workspace-Apps verwenden können. Sie können beispielsweise ein Google Workspace-Add-on erstellen, das Smartchips und Linkvorschauen für Ihren Dienst in Google Docs erstellt.
  • Google Workspace-Nutzer können produktiver arbeiten oder ihren Workflow optimieren. Sie können beispielsweise eine Google Chat-App erstellen, mit der Nutzer wöchentliche Arbeitszeittabellen direkt in Google Chat melden können.
  • Funktionen hinzufügen, die in Google Workspace nicht nativ verfügbar sind. Sie können beispielsweise ein benutzerdefiniertes Menü in Google Docs, Google Sheets oder Google Präsentationen hinzufügen.

Die meisten Optionen zum Erweitern der Google Workspace-Benutzeroberfläche können Sie im Google Workspace Marketplace veröffentlichen. Das ist ein Onlineshop, in dem Nutzer Drittanbieter-Apps finden und installieren können, die in Google Workspace integriert werden.

Übersicht über die Optionen zum Erweitern der Google Workspace-Benutzeroberfläche

In der folgenden Tabelle sind die Optionen zum Erweitern der Google Workspace-Benutzeroberfläche aufgeführt und nach den folgenden Merkmalen verglichen:

  • Erweiterte Apps: Hier werden die Google Workspace-Apps aufgeführt, die Sie mit der jeweiligen Option erweitern können.
  • Programmieroptionen: Hier werden die verschiedenen Möglichkeiten zum Erstellen aufgeführt, darunter:
    • AppSheet: Eine No-Code-Entwicklungsplattform.
    • Apps Script: Eine cloudbasierte Low-Code-Entwicklungsplattform, die auf JavaScript basiert.
    • Full Dev: Ihr eigener Technologie-Stack, der Ihre bevorzugte Programmiersprache unterstützt.
  • UI-Frameworks: Gibt die Arten von UI-Frameworks an, die Sie zum Erstellen der einzelnen Optionen verwenden können, darunter:
    • Kartenbasiert: Kartenoberflächen sind vordefinierte Widgets und Karten, die entweder mit dem Card Service mit Apps Script oder durch Zurückgeben von korrekt formatiertem JSON gerendert werden. Für das Rendern von Karten mit Ihrem bevorzugten Technologie-Stack ist eine vollständige Entwicklung erforderlich. Für kartenbasierte Benutzeroberflächen sind keine HTML- oder CSS-Kenntnisse erforderlich. Sie funktionieren sowohl auf Desktop- als auch auf Mobilgeräteclients.
    • HTML: Apps Script bietet einen HTML-Dienst zum Entwickeln von Webseiten, die mit serverseitigen Apps Script-Funktionen interagieren können. Mit dem HTML-Dienst entwickelte Oberflächen lassen sich sehr gut anpassen, erfordern aber mehr manuelle Arbeit, um eine gute Nutzerfreundlichkeit zu erzielen.
    • iframe: Mit iFrames werden externe Inhalte in Google Workspace eingebettet. Sie bieten die größte Anpassungsfähigkeit für Benutzeroberflächen.

Unter der Tabelle finden Sie Beschreibungen der einzelnen Optionen.

Was Sie erstellen können Vorschau Apps erweitert Codierungsoptionen Kartenbasierte UI HTML-Benutzeroberfläche iFrame-Benutzeroberfläche
Google Workspace-Add-ons Beispiel für ein Google Workspace-Add-on mit Seitenleistenintegration
Das Gmail-Logo zeigt die Verfügbarkeit der E‑Mail-Integration. Gmail
Google Drive-Logo für die Unterstützung von Dateispeicher. Drive
Google Kalender-Logo für die Erweiterung für Terminplanungs-Apps Kalender
Google Chat-Logo für die Integration von Messaging-Apps Chat
Google Docs-Logo für die Integration der Dokumentbearbeitung. Dokumentation
Google Meet-Logo für die Integration von Videokonferenzen Meet
Google Sheets-Logo für die Erweiterung der Tabellenkalkulations-App. Tabellen
Google Präsentationen-Logo für die Erweiterung der Präsentations-App. Präsentationen
Google Apps Script-Logo für Programmieroptionen. Apps Script
Google Developers-Logo für Full-Stack-Optionen. Full dev
Link-Vorschau und Smartchips | Google Workspace-Add-ons Beispiel für Google Workspace-Add‑on-Linkvorschauen mit Smartchips.
Google Docs-Symbol für die Smartchip-Vorschau. Dokumentation
Google Sheets-Symbol für die Smartchip-Vorschau. Tabellen
Symbol für Google Präsentationen für die Vorschau von Smartchips. Präsentationen
AppSheet-Logo für No-Code-Entwicklungsoptionen. AppSheet
Google Apps Script-Logo für Low-Code-Programmierung. Apps Script
Google Developers-Logo für professionelle Programmierung. Full dev
E‑Mail-Entwürfe | Google Workspace-Add‑ons Beispiel für ein Google Workspace-Add-on für E‑Mail-Entwürfe in Gmail.
Gmail-Logo für Erweiterungen für E‑Mail-Entwürfe Gmail
Google Apps Script-Symbol für E‑Mail-Erweiterungen. Apps Script
Google Developers-Symbol für die vollständige Entwicklung Full dev
Hauptbühne und Seitenleiste in Besprechungen | Google Workspace-Add-ons Google Meet-Add‑ons interagieren mit dem Hauptbereich und der Seitenleiste.
Google Meet-Logo für die Besprechungsintegration. Meet
Google Developers-Logo für Programmierbesprechungen. Full dev
Google Chat-Apps | Google Workspace-Add‑ons Beispiel für eine Chat-App mit interaktiven Nachrichten in Google Chat
Google Chat-Logo für Chat-Erweiterungen. Chat
AppSheet-Logo für Chat-App-Optionen. AppSheet
Google Apps Script-Logo für Chat-Erweiterungen. Apps Script
Google Developers-Logo für Full-Stack-Chat. Full dev
Videokonferenzen in Google Kalender | Google Workspace-Add-ons Beispiel für die Google Workspace-Add‑on-Oberfläche für Videokonferenzen in Google Kalender.
Google Kalender-Logo für Videokonferenzfunktionen. Kalender
Google Apps Script-Logo für Kalendererweiterungen Apps Script

Vorhandene Benutzeroberfläche wird verwendet

Editor-Add-ons Beispiel für ein Editor-Add‑on mit einer Google Docs-Erweiterung.
Google Docs-Logo für Dokumenteditoren. Dokumentation
Google Sheets-Logo für Tabellenbearbeitungsprogramme. Tabellen
Google Präsentationen-Logo für Präsentationseditoren. Präsentationen
Google Formulare-Logo für Formular-Editoren. Formulare
Google Apps Script-Logo für die Tabellenbearbeitung. Apps Script
Benutzerdefinierte Funktionen | Editor-Add-ons Beispiel für eine benutzerdefinierte Funktion, in der eine Tabellenformel verwendet wird.
Google Sheets-Logo für benutzerdefinierte Funktionen. Tabellen
Google Apps Script-Logo für das Schreiben von Skripts. Apps Script

Vorhandene Benutzeroberfläche wird verwendet

Makros | Editor-Add-ons Makrobeispiel mit aufgezeichneten Schritten für die Tabellenkalkulationsautomatisierung.
Google Sheets-Logo zum Erstellen von Makros. Tabellen
Google Apps Script-Logo zum Automatisieren von Aufgaben. Apps Script

Vorhandene Benutzeroberfläche wird verwendet

Benutzerdefinierte Menüs, Dialogfelder und Seitenleisten | Editor-Add-ons Beispiel für Menü und Seitenleiste mit Anpassung der Benutzeroberfläche des Editors
Google Docs-Logo für Dokumentseitenleisten. Dokumentation
Google Sheets-Logo für Tabellendialogfelder. Tabellen
Google Präsentationen-Logo für Präsentationsseitenleisten. Präsentationen
Google Formulare-Logo für Formulardialogfelder. Formulare
Google Apps Script-Logo für Seitenleisten. Apps Script
Google Drive-Apps Beispiel für eine Drive-App mit Integration des Dateimenüs.
Google Drive-Logo für den Dateizugriff Drive
Google Developers-Logo für Full-Stack-Support. Full dev

Vorhandene Benutzeroberfläche wird verwendet

Google Classroom-Add-ons Beispiel für Google Classroom-Add-ons mit der Benutzeroberfläche für Aufgabenanhänge
Google Classroom-Logo für Tools für Lehrkräfte Classroom
Google Developers-Logo für die Classroom-Integration Full dev

Arten von App-Integrationen

Im folgenden Abschnitt werden die Arten von App-Integrationen beschrieben, die Sie erstellen können, um die Google Workspace-Benutzeroberfläche zu erweitern.

Wenn Sie Ihre Funktion für andere Google Workspace-Nutzer freigeben möchten, können Sie einen Eintrag im Google Workspace Marketplace veröffentlichen. Informationen dazu, welche Arten von App-Integrationen gemeinsam aufgeführt werden können, finden Sie in der Marketplace-Dokumentation unter App-Integrationen gemeinsam auflisten.

Add-ons für Google Workspace

Beispiel für ein Google Workspace-Add-on mit Integration einer Seitenleisten-App.

Beispiel für ein Google Workspace-Add-on mit Integration einer Seitenleisten-App.

Google Workspace-Add-ons sind Anwendungen, die in Google Workspace-Apps eingebunden werden. Ein Add-on kann mehrere Google Workspace-Apps erweitern. In den meisten Fällen wird die App in einer Seitenleiste in der Google Workspace-App geöffnet, die sie erweitert.

Neben der Erstellung von Seitenleisten können Sie die folgenden Funktionen für ein Add-on erstellen:

Dokumentation zu Google Workspace-Add‑ons ansehen

Google Workspace Marketplace-Logo für die Veröffentlichung. Veröffentlichbar



Programmieroptionen:

Google Apps Script-Logo für automatisiertes Programmieren. Apps Script
Google Developers-Logo für die Softwareentwicklung. Full dev

Erweitert die folgenden Apps:

Gmail-Logo für die Integration von E‑Mail-Apps. Gmail
Google Drive-Symbol für Dateiintegrationen. Drive
Google Kalender-Symbol für die Terminplanungs-App Kalender
Google Chat-Logo für Konversationstools. Chat

Google Docs-Symbol für die Dokumentbearbeitung. Dokumentation
Google Meet-Logo für Videotools. Meet
Google Sheets-Logo, das Tabellenkalkulationsanwendungen darstellt. Tabellen
Symbol für Google Präsentationen für Präsentations-Apps Präsentationen

Verfügbare UI-Frameworks:

Symbol für das Card Framework für das UI-Design. Karten-Framework



Beispiel für eine Linkvorschau mit einem beschreibenden Smartchip.

Beispiel für eine Linkvorschau mit einem beschreibenden Smartchip.

Mit Google Workspace-Add-ons für Google Docs können benutzerdefinierte Linkvorschauen aus einem Drittanbieterdienst erstellt werden. Ähnlich wie bei Smartchips, die in Google Docs für Erwähnungen einer Person, Datei, eines Kalenderereignisses oder einer anderen Einheit in einer Google Workspace-Anwendung generiert werden, kann ein Add‑on einen Smartchip für einen Drittanbieterlink generieren und eine Vorschaukarte anzeigen, wenn jemand den Mauszeiger auf den Chip bewegt.

Sie können Linkvorschauen zu bestehenden Google Workspace-Add‑ons hinzufügen oder ein separates Add‑on speziell für Linkvorschauen erstellen.

Dokumentation zu Link-Vorschauen und Smart Chips ansehen

Google Workspace Marketplace-Logo für die Veröffentlichung. Veröffentlichbar



Programmieroptionen:

AppSheet-Logo für die No-Code-Entwicklung. AppSheet
Google Apps Script-Symbol für Automatisierungsskripts. Apps Script
Google Developers-Symbol für Full-Stack-Entwicklung Full dev

Erweitert die folgenden Apps:

Google Docs-Symbol für Tools zur Dokumenterweiterung. Dokumentation
Google Sheets-Symbol für die Erweiterung des Tabellentools. Tabellen
Symbol für Google-Präsentationen für die Erweiterung für Präsentationstools. Präsentationen

Verfügbare UI-Frameworks:

Symbol für das Karten-Framework für UI-Komponenten. Karten-Framework



E‑Mail-Entwürfe

Beispiel für einen E‑Mail-Entwurf mit einer benutzerdefinierten Benutzeroberfläche zum Verfassen von E‑Mails

Beispiel für einen E‑Mail-Entwurf mit einer benutzerdefinierten Benutzeroberfläche zum Verfassen von E‑Mails

Google Workspace-Add-ons, die Gmail erweitern, können eine benutzerdefinierte Benutzeroberfläche bereitstellen, wenn der Nutzer neue Nachrichten verfasst oder auf vorhandene Nachrichten antwortet. Um diese Benutzeroberfläche zu verwenden, öffnen Nutzer das Add-on im E-Mail-Entwurf, entweder unten im Entwurf oder im Menü  Weitere Optionen.

Dokumentation zu E-Mail-Entwürfen ansehen

Google Workspace Marketplace-Logo für die Veröffentlichung. Veröffentlichbar



Programmieroptionen:

Google Apps Script-Symbol für Codierungstools Apps Script
Google Developers-Logo für die berufliche Weiterbildung. Full dev

Erweitert die folgenden Apps:

Gmail-Logo, das die E‑Mail-Integration darstellt. Gmail

Verfügbare UI-Frameworks:

Logo des Karten-Frameworks für das Designsystem. Karten-Framework



Hauptbildschirm und Seitenleiste in Google Meet

Beispiel für Meet-Add-ons, das die Zusammenarbeit im Hauptbereich zeigt.

Beispiel für Meet-Add-ons, das die Zusammenarbeit im Hauptbereich zeigt.

Mit Google Workspace-Add‑ons, die Meet erweitern, können Sie Ihre App in die Hauptbühne oder die Seitenleiste einer Videokonferenz einbetten. So können Nutzerinnen und Nutzer die App durchsuchen, Inhalte teilen und zusammenarbeiten, ohne Meet verlassen zu müssen.

Im Gegensatz zu anderen Google Workspace-Add-ons verwenden Meet-Add-ons nicht die Karten-Framework-Benutzeroberfläche. Stattdessen betten Sie Ihre App mit einem iFrame ein.

Dokumentation zum Meet-Add-ons SDK ansehen

Google Workspace Marketplace-Logo für die Veröffentlichung Veröffentlichbar



Programmieroptionen:

Google Developers-Logo für Full-Stack-Tools. Full dev

Erweitert die folgenden Apps:

Das Google Meet-Logo für Videokonferenzen. Meet

Verfügbare UI-Frameworks:

iFrame-Symbol für eingebettete Webanwendung iframe



Google Chat-Apps

Beispiel für eine Chat-App, in der eine Nachricht angezeigt wird.

Beispiel für eine Chat-App, in der eine Nachricht angezeigt wird.

Mit Chat-Apps können Ressourcen und Dienste in Chat eingebunden werden. Sie können Chat-Apps so gestalten, dass sie auf viele Arten mit Nutzern interagieren, z. B.:

Dokumentation zu Chat-Apps ansehen

Google Workspace Marketplace-Symbol für die Veröffentlichung von Apps. Veröffentlichbar



Programmieroptionen:

AppSheet-Logo für die Entwicklung von No-Code-Apps. AppSheet
Google Apps Script-Symbol für die Programmierung automatisierter Aufgaben. Apps Script
Google Developers-Logo für professionelle Softwareentwicklung. Full dev

Erweitert die folgenden Apps:

Google Chat-Logo für Konversationserweiterungen. Chat

Verfügbare UI-Frameworks:

Symbol für das Karten-Framework zum Entwerfen von Benutzeroberflächen. Karten-Framework



Videokonferenzen in Google Kalender

Beispiel für Videokonferenzen in Google Kalender mit Integration in Besprechungstermine

Beispiel für Videokonferenzen in Google Kalender mit Integration in Besprechungstermine

Wenn Sie ein Anbieter von Webkonferenzen sind, können Sie ein Google Workspace-Add-on entwickeln, mit dem Sie Google Kalender um Ihre Konferenzlösung erweitern. Das Add-on fügt Kalenderterminen eine Videokonferenzoption hinzu, sodass Nutzer Videokonferenzen direkt in Google Kalender erstellen und daran teilnehmen können.

Dokumentation zu Videokonferenzen in Google Kalender ansehen

Google Workspace Marketplace-Logo für veröffentlichte Apps. Veröffentlichbar



Programmieroptionen:

Google Apps Script-Symbol für Verknüpfungen zur Videokonferenzintegration. Apps Script

Erweitert die folgenden Apps:

Google Kalender-Symbol für die Einstellungen zur Terminsynchronisierung Kalender

Verfügbare UI-Frameworks:

Verwendet vorhandene UI


Editor-Add-ons

Beispiel für ein Editor-Add-on, das Erweiterungsfunktionen für Google Docs zeigt.

Beispiel für ein Editor-Add-on, das Erweiterungsfunktionen für Google Docs zeigt.

Editor-Add-ons sind Apps, die Google Docs, Google Sheets, Google Präsentationen oder Google Formulare erweitern. Editor-Add-ons können nur eine App pro Add-on erweitern. Sie können aber mehrere Editor-Add-ons im selben Marketplace-Eintrag veröffentlichen. Nutzer öffnen Editor-Add-ons über das Menü Erweiterungen in der App, die sie erweitern.

Sie können die folgenden Funktionen für ein Editor-Add-on erstellen:

Dokumentation zu Editor-Add-ons ansehen

Google Workspace Marketplace-Symbol für die Softwareveröffentlichung. Veröffentlichbar



Programmieroptionen:

Google Apps Script-Symbol für die Entwicklung von Editorerweiterungen. Apps Script

Erweitert die folgenden Apps:

Google Docs-Symbol für Erweiterungen zur Dokumentbearbeitung Dokumentation
Google Sheets-Symbol für Funktionen zur Tabellenautomatisierung Tabellen
Google Präsentationen-Symbol für Tools zum Erstellen von Präsentationen. Präsentationen
Google Formulare-Symbol für Umfrage- und Formulartools. Formulare

Verfügbare UI-Frameworks:

HTML-Symbol für die Entwicklung webbasierter Benutzeroberflächen. HTML
iFrame-Symbol zum Einbetten externer Webinhalte. iframe



Benutzerdefinierte Funktionen

Beispiel für eine benutzerdefinierte Funktion, in der eine Google Sheets-Formel verwendet wird.

Beispiel für eine benutzerdefinierte Funktion, in der eine Google Sheets-Formel verwendet wird.

Mit benutzerdefinierten Funktionen können Sie Google Sheets weitere Funktionen hinzufügen. Nutzer können sie wie jede der Hunderten von integrierten Funktionen in Google Sheets finden und verwenden. Sie können eine benutzerdefinierte Funktion als Editor-Add-on veröffentlichen.

Dokumentation zu benutzerdefinierten Funktionen ansehen

Google Workspace Marketplace-Logo für Veröffentlichungsoptionen Veröffentlichbar



Programmieroptionen:

Apps Script

Erweitert die folgenden Apps:

Google Sheets-Symbol zum Automatisieren von Tabellenaufgaben. Tabellen

Verfügbare UI-Frameworks:

Verwendet vorhandene UI


Makros

Makrobeispiel mit aufgezeichneten Schritten für die Tabellenautomatisierung.

Makrobeispiel mit aufgezeichneten Schritten für die Tabellenautomatisierung.

Makros sind Aufzeichnungen in Google Sheets, mit denen eine bestimmte Reihe von UI-Interaktionen, die Sie definieren, dupliziert wird. Sie können ein Makro mit einer Tastenkombination verknüpfen oder es über das Menü Erweiterungen > Makros ausführen.

Wenn Sie ein Makro aufzeichnen, erstellt Google Sheets automatisch eine Apps Script-Funktion, die die UI-Interaktionen nachbildet. Sie können Makros direkt im Apps Script-Editor bearbeiten. Sie können Makros in Apps Script von Grund auf neu schreiben oder bereits geschriebene Funktionen in Makros umwandeln. Eine Makrodefinition kann in ein Editor-Add-on aufgenommen, aber nicht veröffentlicht werden.

Makrodokumentation ansehen

Programmieroptionen:

Google Apps Script-Logo für die Makroaufzeichnungsfunktion. Apps Script

Erweitert die folgenden Apps:

Tabellen

Verfügbare UI-Frameworks:

Verwendet vorhandene UI


Benutzerdefinierte Menüs, Dialogfelder und Seitenleisten

Beispiel für ein benutzerdefiniertes Menü mit Optionen zum Anpassen der Editor-Symbolleiste.

Beispiel für ein benutzerdefiniertes Menü mit Optionen zum Anpassen der Editor-Symbolleiste.

Sie können Dateien in Google Docs, Google Sheets, Google Präsentationen und Google Formulare benutzerdefinierte Menüs, Prompts, Benachrichtigungen sowie HTML-basierte Dialogfelder und Seitenleisten als Teil eines Editor-Add-ons hinzufügen. Benutzerdefinierte Menüs werden neben den Standardmenüs der App angezeigt, die sie erweitern. Dialogfelder, Seitenleisten, Aufforderungen und Benachrichtigungen werden in der Regel durch Nutzeraktionen wie das Klicken auf ein Menüelement oder durch Trigger wie ereignisgesteuerte Trigger aktiviert.

Dokumentation zu benutzerdefinierten Menüs, Dialogfeldern und Seitenleisten ansehen

Programmieroptionen:

Google Apps Script-Symbol für die Entwicklung benutzerdefinierter Menüs. Apps Script

Erweitert die folgenden Apps:

Google Docs-Logo für die Einbindung von Dokumenterweiterungen. Dokumentation
Google Sheets-Symbol für Erweiterungen in der Seitenleiste von Tabellen Tabellen
Google-Präsentationen-Logo für Erweiterungen in der Präsentationsseitenleiste. Präsentationen
Google Formulare-Logo für Erweiterungen für Formular-Dialogfelder. Formulare

Verfügbare UI-Frameworks:

HTML-Symbol zum Erstellen benutzerdefinierter Benutzeroberflächen. HTML
iFrame-Symbol zum Einbetten von Webtools von Drittanbietern. iframe



Google Drive-Apps

Beispiel für die Google Drive App mit Optionen zum Öffnen von Dateien

Beispiel für die Google Drive App mit Optionen zum Öffnen von Dateien

Wenn Ihre App Drive-Dateien unterstützt, können Sie sie in die Drive-Benutzeroberfläche einbinden, damit sie als Option zum Erstellen oder Öffnen von Dateien angezeigt wird. Ihre App kann im Menü Neu > Mehr und im Menü Öffnen mit angezeigt werden, wenn ein Nutzer mit der rechten Maustaste auf eine Datei in Drive klickt. Wenn ein Nutzer Ihre App über eines der beiden Menüs auswählt, wird sie in einem neuen Fenster geöffnet.

Dokumentation zu Google Drive-Apps ansehen

Google Workspace Marketplace-Symbol für die App-Suche. Veröffentlichbar



Programmieroptionen:

Google Developers-Logo für die professionelle App-Entwicklung. Full dev

Erweitert die folgenden Apps:

Google Drive-Symbol für die Integration des Dateispeichers. Drive

Verfügbare UI-Frameworks:

Verwendet vorhandene UI


Google Classroom-Add-ons

Beispiel für Classroom-Add-ons mit Aufgabenanhängen

Beispiel für Classroom-Add-ons mit Aufgabenanhängen

Mit Google Classroom-Add-ons können Lehrkräfte Anhänge für Kursaufgaben, Ankündigungen oder Kursmaterialien erstellen. Diese Anhänge öffnen Inhalte von Dritten in iFrames in Classroom. In den iFrames werden je nach Nutzertyp und Classroom-Kontext separate URLs geöffnet.

Dokumentation zu Classroom-Add-ons ansehen

Google Workspace Marketplace-Logo für die Veröffentlichung von Integrationen. Veröffentlichbar



Programmieroptionen:

Google Developers-Symbol für die Einbindung von Unterrichtstools Full dev

Erweitert die folgenden Apps:

Google Classroom-Logo für Workflow-Tools für Lehrkräfte. Classroom

Verfügbare UI-Frameworks:

iFrame-Symbol für eingebettete Web-Bildungsinhalte iframe