Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Les modules complémentaires Google Workspace présentent des informations et des commandes utilisateur dans la barre latérale de l'interface utilisateur de l'application hôte. Un module complémentaire se compose d'une barre d'outils d'identification principale et d'une ou plusieurs cartes.
Chaque fiche représente une "page" particulière de l'interface utilisateur de votre module complémentaire. Pour accéder à une nouvelle fiche, il suffit généralement de créer cette fiche et de la placer dans une pile de fiches interne.
Vous pouvez définir des flux de navigation entre les cartes pour une expérience d'interaction enrichie.
Les cartes peuvent être non contextuelles ou contextuelles. Les cartes contextuelles sont présentées à l'utilisateur lorsque l'application hôte se trouve dans un contexte spécifique. Par exemple, lorsque vous ouvrez un message Gmail ou un événement Agenda. Les fiches non contextuelles (comme les pages d'accueil) sont présentées à l'utilisateur en dehors d'un contexte spécifique de l'hôte. Par exemple, lorsque l'utilisateur consulte sa boîte de réception Gmail, son dossier Drive principal ou son agenda.
Les modules complémentaires Google Workspace créés dans Apps Script utilisent le service Card pour créer des interfaces utilisateur à partir de cartes. Les modules complémentaires créés dans d'autres langues doivent renvoyer un fichier JSON correctement mis en forme pour que l'interface s'affiche sous forme de fiches.
Chaque fiche se compose d'un en-tête et d'une ou plusieurs sections. Chaque section est composée d'un ensemble de widgets. Les widgets affichent des informations à l'utilisateur ou fournissent des commandes d'interaction telles que des boutons.
Les interfaces basées sur des cartes présentent les avantages suivants :
Aucune connaissance en HTML ou CSS n'est requise pour créer des interfaces basées sur des cartes.
Les cartes et les widgets sont automatiquement stylisés pour fonctionner correctement avec les applications Google Workspace qu'ils étendent.
Les interfaces basées sur des fiches fonctionnent à la fois sur les ordinateurs et les appareils mobiles, mais vous n'avez besoin de définir l'interface qu'une seule fois.
Créer des interfaces basées sur des cartes
Lorsque vous créez des modules complémentaires basés sur des fiches, il est important de comprendre certains concepts et modèles de conception. Les guides suivants vous fournissent les informations dont vous avez besoin pour créer des modules complémentaires efficaces basés sur des fiches :
Consultez ces pages lorsque vous créez des fiches et implémentez le comportement de l'UI. Les exemples supplémentaires suivants peuvent également vous être utiles pour l'implémentation de votre module complémentaire :
Cet exemple de module complémentaire montre une interface utilisateur simple de module complémentaire Google Workspace avec plusieurs pages et pages d'accueil.
Cet exemple de module complémentaire montre un module complémentaire Google Workspace qui permet aux utilisateurs de traduire du texte dans Docs, Sheets et Slides.
Cet exemple de module complémentaire montre un exemple de module complémentaire Google Workspace plus complexe, qui affiche des informations sur les destinataires des messages Gmail, les éditeurs de fichiers Drive ou les participants aux événements Agenda. Vous ne pouvez utiliser ce module complémentaire que dans un domaine, car il utilise l'API Directory pour récupérer les informations utilisateur.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/04 (UTC).
[null,null,["Dernière mise à jour le 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."]]
