Kartenbasierte Oberflächen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Editor-Add-ons basieren auf HTML.

Google Workspace-Add-ons präsentieren Informationen und Nutzersteuerelemente in der Seitenleiste der Hostanwendung. Ein Add-on besteht aus einer Hauptsymbolleiste zur Identifizierung und einer oder mehreren Karten.
Jede Karte repräsentiert eine bestimmte „Seite“ der Benutzeroberfläche Ihres Add-ons. Zu einer neuen Karte wechseln ist in der Regel nur eine Frage des Erstellens dieser Karte und des Hinzufügens zu einem internen Kartenstapel.
Sie können Navigationsabläufe zwischen Karten definieren, um eine umfassende Interaktion zu ermöglichen.
Karten können nicht kontextbezogen oder kontextbezogen sein. Kontextbezogene Karten werden dem Nutzer angezeigt, wenn sich die Hostanwendung in einem bestimmten Kontext befindet. Zum Beispiel beim Öffnen einer Gmail-Nachricht oder eines Kalendertermins. Nicht kontextbezogene Karten (z. B. Startseiten) werden dem Nutzer außerhalb eines bestimmten Kontexts des Hosts präsentiert. Das kann beispielsweise der Fall sein, wenn der Nutzer seinen Gmail-Posteingang, seinen Hauptordner in Drive oder seinen Kalender aufruft.
Google Workspace-Add‑ons, die in Apps Script erstellt wurden, verwenden den Card-Dienst, um Benutzeroberflächen aus Karten zu erstellen. Add-ons, die in anderen Sprachen erstellt wurden, müssen korrekt formatiertes JSON zurückgeben, damit die Benutzeroberfläche als Karten gerendert wird.
Jede Karte besteht aus einem Header und einem oder mehreren Kartenabschnitten. Jeder Bereich besteht aus einer Reihe von Widgets. Widgets zeigen dem Nutzer Informationen an oder bieten Interaktionssteuerelemente wie Schaltflächen.
Kartenbasierte Benutzeroberflächen bieten folgende Vorteile:
Kartenbasierte Benutzeroberflächen erstellen
Beim Erstellen kartenbasierter Add-ons ist es wichtig, bestimmte Konzepte und Designmuster zu verstehen. Die folgenden Anleitungen enthalten die Informationen, die Sie zum Erstellen effektiver kartenbasierter Add-ons benötigen:
Diese Seiten können Ihnen beim Erstellen von Karten und Implementieren des UI-Verhaltens helfen. Die folgenden zusätzlichen Beispiele können bei der Implementierung Ihres Add-ons hilfreich sein:
Google Workspace-Add-on „Cats“ – Kurzanleitung
In diesem Add-on-Beispiel wird eine einfache Google Workspace-Add-on-Benutzeroberfläche mit mehreren Seiten und Startseiten gezeigt.
Google Workspace-Add-on: „Übersetzen“
In diesem Add‑on-Beispiel wird ein Google Workspace-Add‑on gezeigt, mit dem Nutzer Text in Google Docs, Google Sheets und Google Präsentationen übersetzen können.
Google Workspace-Add-on: „Teams List“
Dieses Add-on-Beispiel zeigt ein komplexeres Google Workspace-Add-on-Beispiel, das Nutzerinformationen zu Gmail-Nachrichtenempfängern, Drive-Datei-Editoren oder Kalendertermin-Teilnehmern enthält. Sie können dieses Add-on nur innerhalb einer Domain verwenden, da es die Directory API zum Abrufen von Nutzerinformationen verwendet.
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-08-04 (UTC).
[null,null,["Zuletzt aktualisiert: 2025-08-04 (UTC)."],[[["\u003cp\u003eGoogle Workspace add-ons use cards to build user interfaces within the host application's sidebar, offering navigation and interactive elements.\u003c/p\u003e\n"],["\u003cp\u003eCards can be contextual, appearing in specific situations like opening an email, or non-contextual, like when viewing your inbox.\u003c/p\u003e\n"],["\u003cp\u003eCard-based interfaces are built using cards, widgets, and actions, offering a structured way to present information and controls.\u003c/p\u003e\n"],["\u003cp\u003eAdd-ons built with Apps Script utilize the Card service, while other languages require formatted JSON for card rendering.\u003c/p\u003e\n"],["\u003cp\u003eThese interfaces are automatically styled, responsive across devices, and require no HTML/CSS knowledge for basic creation.\u003c/p\u003e\n"]]],["Google Workspace add-ons utilize card-based UIs within host applications, comprising a toolbar and multiple cards. These cards, representing UI pages, are built using the Card service or JSON. Navigation involves pushing new cards onto a stack. Cards can be contextual, appearing in specific host application states, or non-contextual, like homepages, visible in general views. Each card contains sections composed of widgets, offering information or interaction controls. Key actions include defining card navigation, constructing cards with sections and widgets, and implementing actions.\n"],null,["# Card-based interfaces\n\n| **Note:** Google Workspace add-ons are card-based. Editor add-ons are [HTML-based](/workspace/add-ons/concepts/html-interfaces).\n\nGoogle Workspace add-ons present information and user\ncontrols in the sidebar of the\n[host application](/workspace/add-ons/guides/glossary#host_or_host_application)\nUI. An add-on consists of a main identifying toolbar along with one or more\n[cards](/workspace/add-ons/concepts/cards).\n\nEach card represents a particular 'page' of your add-on's UI, and\n[navigating to a new card](/workspace/gmail/add-ons/how-tos/navigation) is\nusually just a matter of creating that card and\n[pushing it onto an internal card stack](/workspace/gmail/add-ons/how-tos/navigation#navigation_methods).\nYou can define navigation flows between cards for a rich interaction experience.\n\nCards can be *non-contextual* or *contextual* . Contextual cards are presented\nto the user when the host application is in a specific context. For example,\nwhen opening a Gmail message or Calendar event. Non-contextual cards (such as\n[homepages](/workspace/add-ons/concepts/homepages)) are presented to the user\noutside of a specific context of the host. For example, when the user is\nviewing their Gmail inbox, main Drive folder, or Calendar.\n\nGoogle Workspace add-ons built in Apps Script use the\n[Card service](/apps-script/reference/card-service/card-service) to create user interfaces out of\n[cards](/workspace/add-ons/concepts/cards). Add-ons built in other languages\nmust return properly formatted JSON for the interface to render as cards.\n\nEach card consists of a header and one or more card sections. Each section is\ncomposed of a set of [widgets](/workspace/add-ons/concepts/widgets). Widgets\ndisplay information to the user or provide interaction controls like buttons.\n\nCard-based interfaces have the following benefits:\n\n- No knowledge of HTML or CSS is needed to create card-based interfaces.\n- Cards and widgets are automatically styled to work well with the Google Workspace applications they extend.\n- Card-based interfaces work on both desktop and mobile devices, but you only\n need to define the interface once.\n\n | **Note:** Gmail is currently the only host application that can be extended by Google Workspace add-ons on mobile.\n\nCreating card-based interfaces\n------------------------------\n\nWhen building card-based add-ons, it's important to understand certain\nconcepts and design patterns. The following guides provide the information\nyou need to build effective card-based add-ons:\n\n- [Cards](/workspace/add-ons/concepts/cards)\n- [Homepages](/workspace/add-ons/concepts/homepages)\n- [Widgets](/workspace/add-ons/concepts/widgets)\n- [Actions](/workspace/add-ons/concepts/actions)\n- [Event objects](/workspace/add-ons/concepts/event-objects)\n- [Constructing cards](/workspace/add-ons/how-tos/building-workspace-addons#constructing_cards)\n- [Building interactive cards](/workspace/add-ons/how-tos/interactions)\n- [Navigating between cards](/workspace/add-ons/how-tos/navigation)\n- [Using universal actions](/workspace/add-ons/how-tos/universal-actions)\n- [Adding autocomplete to text inputs](/workspace/add-ons/how-tos/suggestions)\n- [Accessing user locales and timezones](/workspace/add-ons/how-tos/access-user-locale)\n- [Connecting to non-Google services](/workspace/add-ons/how-tos/non-google-services)\n- [Style guide](/workspace/add-ons/guides/workspace-style)\n- [Best Practices](/workspace/add-ons/guides/workspace-best-practices)\n\nReference these pages when creating cards and implementing\nUI behavior. You may also find the following additional samples useful to\nreference when implementing your add-on:\n\n- [Google Workspace add-on \"Cats\" quickstart](/workspace/add-ons/cats-quickstart)\n\n This add-on sample shows a simple Google Workspace add-on UI with multiple pages and\n homepages.\n- [Google Workspace add-on: \"Translate\"](/workspace/add-ons/translate-addon-sample)\n\n This add-on sample shows a Google Workspace add-on that lets users translate text from\n within Docs, Sheets, and Slides.\n- [Google Workspace add-on: \"Teams List\"](/workspace/add-ons/teams-addon-sample)\n\n This add-on sample shows a more complex\n Google Workspace add-on sample, that shows\n user information about Gmail message recipients, Drive file editors, or\n Calendar event attendees. You can only use this add-on inside a domain, since\n it uses the [Directory API](/workspace/admin/directory) to retrieve\n user information."]]