Étendre l'interface utilisateur de Google Workspace

Cette page décrit les options permettant d'étendre l'interface utilisateur (UI) Google Workspace. Vous pouvez étendre l'interface utilisateur Google Workspace pour de nombreuses raisons, y compris :

  • Intégrez votre application ou votre service à Google Workspace pour que les utilisateurs puissent utiliser l'application directement depuis une ou plusieurs applications Google Workspace. Par exemple, créez un module complémentaire Google Workspace qui crée des chips intelligents et des aperçus de liens pour votre service dans Google Docs.
  • Aidez les utilisateurs de Google Workspace à être plus productifs ou à améliorer leur workflow. Par exemple, créez une application Google Chat qui permet aux utilisateurs de signaler leurs feuilles de temps hebdomadaires directement depuis Google Chat.
  • Ajoutez des fonctionnalités qui ne sont pas disponibles nativement dans Google Workspace. Par exemple, ajoutez un menu personnalisé dans Docs, Google Sheets ou Google Slides.

Vous pouvez publier la plupart des options permettant d'étendre l'UI Google Workspace sur le Google Workspace Marketplace, une boutique en ligne où les utilisateurs peuvent trouver et installer des applications tierces qui s'intègrent à Google Workspace.

Présentation des options permettant d'étendre l'UI Google Workspace

Le tableau suivant liste les options permettant d'étendre l'UI Google Workspace et les compare selon les caractéristiques suivantes :

  • Applications étendues : liste les applications Google Workspace que vous pouvez étendre avec l'option donnée.
  • Options de codage : liste les différentes façons de créer, y compris :
    • AppSheet : plate-forme de développement sans code.
    • Apps Script : plate-forme de développement cloud nécessitant peu de code, basée sur JavaScript.
    • Développement complet : votre propre pile technologique compatible avec le langage de programmation de votre choix.
  • Frameworks d'UI : indique les types de frameworks d'UI que vous pouvez utiliser pour créer chaque option, y compris :
    • Basée sur des cartes : les interfaces de carte sont des widgets et des cartes prédéfinis créés avec le service de cartes à l'aide d'Apps Script ou en renvoyant du code JSON correctement formaté pour afficher les cartes avec la pile technologique de votre choix (développement complet). Les interfaces basées sur des cartes ne nécessitent pas de connaissances en HTML ni en CSS, et fonctionnent aussi bien sur les clients pour ordinateur que sur les clients mobiles.
    • HTML : Apps Script propose un service HTML pour développer des pages Web pouvant interagir avec des fonctions Apps Script côté serveur. Les interfaces développées avec le service HTML sont hautement personnalisables, mais nécessitent plus de travail manuel pour créer une expérience utilisateur de qualité.
    • iframe : les iframes permettent d'intégrer du contenu externe dans Google Workspace et offrent la plus grande personnalisation pour les interfaces utilisateur.

Les descriptions de chaque option suivent le tableau.

Ce que vous pouvez créer Aperçu Applications étendues Options de codage Interface utilisateur basée sur des fiches UI HTML Interface utilisateur iFrame
Modules complémentaires Google Workspace Exemple de module complémentaire Google Workspace montrant une intégration de barre latérale.
Logo Gmail indiquant la disponibilité de l'intégration des e-mails. Gmail
Logo Google Drive pour l'assistance concernant le stockage de fichiers. Drive
Logo Google Agenda pour l'extension de l'application de planification. Agenda
Logo Google Chat pour l'intégration de l'application de chat. Chat
Logo Google Docs pour l'intégration de l'édition de documents. Docs
Logo Google Meet pour l'intégration de visioconférences. Meet
Logo Google Sheets pour l'extension d'application de feuille de calcul. Sheets
Logo Google Slides pour l'extension de l'application de présentation. Slides
Logo Google Apps Script pour les options de codage. Apps Script
Logo Google Developers pour les options full stack. Full dev
Aperçus de liens et chips intelligents | Modules complémentaires Google Workspace Exemple de prévisualisation de liens de modules complémentaires Google Workspace avec des chips intelligents.
Icône Google Docs pour l'aperçu des chips intelligents. Docs
Icône Google Sheets pour l'aperçu des chips intelligents. Sheets
Icône Google Slides pour l'aperçu des chips intelligents. Slides
Logo AppSheet pour les options de développement sans code. AppSheet
Logo Google Apps Script pour le codage low-code. Apps Script
Logo Google Developers pour le codage professionnel. Full dev
Brouillons d'e-mails | Modules complémentaires Google Workspace Exemple de module complémentaire Google Workspace pour les brouillons d'e-mails dans Gmail.
Logo Gmail représentant les extensions de brouillons d'e-mails. Gmail
Icône Google Apps Script pour les extensions d'e-mail. Apps Script
Icône Google Developers pour les développeurs complets. Full dev
Zone principale et panneau latéral des réunions | Modules complémentaires Google Workspace Les modules complémentaires Google Meet interagissent avec la fenêtre principale et le panneau latéral.
Logo Google Meet pour l'intégration des réunions. Meet
Logo Google Developers pour les réunions de programmation. Full dev
Applications Google Chat | Modules complémentaires Google Workspace Exemple d'application Chat montrant la messagerie interactive dans Chat.
Logo Google Chat pour les extensions de chat. Chat
Logo AppSheet pour les options d'application de chat. AppSheet
Logo Google Apps Script pour les extensions de chat. Apps Script
Logo Google Developers pour le chat full stack. Full dev
Visioconférence dans Agenda | Modules complémentaires Google Workspace Exemple d'interface de visioconférence du module complémentaire Google Workspace pour Agenda.
Logo Google Agenda pour les fonctionnalités de visioconférence. Agenda
Logo Google Apps Script pour les extensions d'agenda. Apps Script

Utilise l'UI existante

Modules complémentaires de l'éditeur Exemple de module complémentaire d'éditeur montrant l'extension Google Docs.
Logo Google Docs pour les éditeurs de documents. Docs
Logo Google Sheets pour les éditeurs de feuilles de calcul. Sheets
Logo Google Slides pour les éditeurs de présentations. Slides
Logo Google Forms pour les éditeurs de formulaires. Formulaires
Logo Google Apps Script pour la modification de feuilles de calcul. Apps Script
Fonctions personnalisées | Modules complémentaires de l'éditeur Exemple de fonction personnalisée montrant l'utilisation d'une formule de feuille de calcul.
Logo Google Sheets pour les fonctions personnalisées. Sheets
Logo Google Apps Script pour l'écriture de scripts. Apps Script

Utilise l'UI existante

Macros | Modules complémentaires de l'éditeur Exemple de macro montrant les étapes d'automatisation d'une feuille de calcul enregistrée.
Logo Google Sheets pour la création de macros. Sheets
Logo Google Apps Script pour l'automatisation des tâches. Apps Script

Utilise l'UI existante

Menus, boîtes de dialogue et barres latérales personnalisés | Modules complémentaires d'éditeurs Exemple de menu et de barre latérale montrant la personnalisation de l'interface utilisateur de l'éditeur.
Logo Google Docs pour les barres latérales des documents. Docs
Logo Google Sheets pour les boîtes de dialogue des feuilles de calcul. Sheets
Logo Google Slides pour les barres latérales des présentations. Slides
Logo Google Forms pour les boîtes de dialogue de formulaire. Formulaires
Logo Google Apps Script pour les barres latérales. Apps Script
Applications Google Drive Exemple d'intégration du menu "Fichier" dans l'application Drive.
Logo Google Drive pour l'accès aux fichiers. Drive
Logo Google Developers pour la prise en charge full stack. Full dev

Utilise l'UI existante

Modules complémentaires Google Classroom Exemple de modules complémentaires Google Classroom montrant l'interface des pièces jointes aux devoirs.
Logo Google Classroom pour les outils pédagogiques. Classroom
Logo Google Developers pour l'intégration à Classroom. Full dev

Types d'intégrations d'applications

La section suivante explique les types d'intégrations d'applications que vous pouvez créer pour étendre l'interface utilisateur Google Workspace.

Pour partager votre fonctionnalité avec d'autres utilisateurs Google Workspace, vous pouvez publier une fiche sur Google Workspace Marketplace. Pour savoir quels types d'intégrations d'applications peuvent être listés ensemble, consultez Lister les intégrations d'applications dans la documentation Marketplace.

Modules complémentaires Google Workspace

Exemple de module complémentaire Google Workspace montrant l'intégration d'une application dans la barre latérale.

Exemple de module complémentaire Google Workspace montrant l'intégration d'une application dans la barre latérale.

Les modules complémentaires Google Workspace sont des applications qui s'intègrent aux applications Google Workspace. Un module complémentaire peut étendre plusieurs applications Google Workspace. Le plus souvent, l'application s'ouvre dans une barre latérale de l'application Google Workspace qu'elle étend.

En plus de créer des barres latérales, vous pouvez créer les fonctionnalités suivantes pour un module complémentaire :

Consulter la documentation sur les modules complémentaires Google Workspace

Logo Google Workspace Marketplace pour la publication. Publiable



Options de codage :

Logo Google Apps Script pour le codage automatisé. Apps Script
Logo Google Developers pour le développement de logiciels. Full dev

Étend les applications suivantes :

Logo Gmail pour les intégrations d'applications de messagerie. Gmail
Icône Google Drive pour les intégrations de fichiers. Drive
Icône Google Agenda pour l'application de planification. Agenda
Logo Google Chat pour les outils de conversation. Chat

Icône Google Docs pour l'édition de documents. Docs
Logo Google Meet pour les outils vidéo. Meet
Logo Google Sheets représentant les applications de tableur. Sheets
Icône Google Slides pour les applications de présentation. Slides

Frameworks d'UI disponibles :

Icône du framework de cartes pour la conception de l'UI. Framework de carte



Exemple de prévisualisation de lien montrant un chip intelligent descriptif.

Exemple de prévisualisation de lien montrant un chip intelligent descriptif.

Les modules complémentaires Google Workspace qui étendent Docs peuvent créer des aperçus de liens personnalisés à partir d'un service tiers. À l'instar des chips intelligents que Docs génère pour les mentions de personnes, de fichiers, d'événements d'agenda ou d'autres entités dans une application Google Workspace, un module complémentaire peut générer un chip intelligent pour un lien tiers et afficher une carte d'aperçu lorsqu'un utilisateur pointe sur le chip.

Vous pouvez ajouter des aperçus de liens à des modules complémentaires Google Workspace existants ou créer un module complémentaire distinct spécifiquement pour les aperçus de liens.

Consulter la documentation sur les aperçus de liens et les chips intelligents

Logo Google Workspace Marketplace pour la publication. Publiable



Options de codage :

Logo AppSheet pour le développement sans code. AppSheet
Icône Google Apps Script pour les scripts d'automatisation. Apps Script
Icône Google Developers pour les développeurs full stack. Full dev

Étend les applications suivantes :

Icône Google Docs pour les outils d'extension de document. Docs
Icône Google Sheets pour l'extension d'outil de feuille de calcul. Sheets
Icône Google Slides pour l'extension de l'outil de présentation. Slides

Frameworks d'UI disponibles :

Icône du framework de cartes pour les composants d'UI. Framework de carte



Brouillons d'e-mails

Exemple de brouillon d'e-mail montrant une interface de rédaction personnalisée.

Exemple de brouillon d'e-mail montrant une interface de rédaction personnalisée.

Les modules complémentaires Google Workspace qui étendent Gmail peuvent fournir une interface personnalisée lorsque l'utilisateur rédige de nouveaux messages ou répond à des messages existants. Pour utiliser cette interface, les utilisateurs ouvrent le module complémentaire à partir du brouillon d'e-mail, en bas de celui-ci ou dans le menu Plus d'options.

Consulter la documentation sur les brouillons d'e-mails

Logo Google Workspace Marketplace pour la publication. Publiable



Options de codage :

Icône Google Apps Script pour les outils de programmation. Apps Script
Logo Google Developers pour le développement professionnel. Full dev

Étend les applications suivantes :

Logo Gmail représentant l'intégration des e-mails. Gmail

Frameworks d'UI disponibles :

Logo du framework de carte pour le système de conception. Framework de carte



Fenêtre principale et panneau latéral d'une réunion

Exemple de modules complémentaires Meet montrant la collaboration dans la fenêtre principale.

Exemple de modules complémentaires Meet montrant la collaboration dans la fenêtre principale.

Les modules complémentaires Google Workspace qui étendent Meet vous permettent d'intégrer votre application dans l'interface principale ou le panneau latéral d'une réunion. Les utilisateurs peuvent ainsi explorer, partager et collaborer dans votre application sans quitter Meet.

Contrairement aux autres modules complémentaires Google Workspace, les modules complémentaires Meet n'utilisent pas l'interface utilisateur du framework de cartes. À la place, vous devez intégrer votre application à l'aide d'un iFrame.

Consulter la documentation du SDK des modules complémentaires Meet

Logo Google Workspace Marketplace pour publication. Publiable



Options de codage :

Logo Google Developers pour les outils full stack. Full dev

Étend les applications suivantes :

Logo Google Meet pour les visioconférences. Meet

Frameworks d'UI disponibles :

Icône d'iframe pour une application Web intégrée. iframe



Applications Google Chat

Exemple d'application de chat montrant une interaction avec un message.

Exemple d'application de chat montrant une interaction avec un message.

Les applications Chat fournissent des ressources et des services dans Chat. Vous pouvez concevoir des applications Chat pour interagir avec les utilisateurs de différentes manières, par exemple :

  • Répondez aux commandes par un message texte ou une carte.
  • Ouvrez une boîte de dialogue pour aider les utilisateurs à effectuer des processus en plusieurs étapes, comme remplir des données de formulaire.
  • Prévisualisez les liens en ajoutant des fiches contenant des informations utiles qui permettent aux utilisateurs d'effectuer des actions directement depuis la conversation.

Consulter la documentation sur les applications Chat

Icône Google Workspace Marketplace pour la publication d'applications. Publiable



Options de codage :

Logo AppSheet pour la création d'applications sans code. AppSheet
Icône Google Apps Script pour le codage de tâches automatisées. Apps Script
Logo Google Developers pour l'ingénierie logicielle professionnelle. Full dev

Étend les applications suivantes :

Logo Google Chat pour les extensions de conversation. Chat

Frameworks d'UI disponibles :

Icône de framework de carte pour la conception d'interfaces utilisateur. Framework de carte



Visioconférence Agenda

Exemple de visioconférence dans Agenda montrant l'intégration avec les événements de réunion.

Exemple de visioconférence dans Agenda montrant l'intégration avec les événements de réunion.

Si vous êtes un fournisseur de solutions de visioconférence, vous pouvez créer un module complémentaire Google Workspace qui étend Google Agenda avec votre solution de visioconférence. Ce module complémentaire ajoute une option de visioconférence aux événements Agenda, ce qui permet aux utilisateurs de créer des visioconférences et de les rejoindre directement depuis Agenda.

Consulter la documentation sur les visioconférences dans Google Agenda

Logo Google Workspace Marketplace pour les applications publiées. Publiable



Options de codage :

Icône Google Apps Script pour les raccourcis d'intégration de la fonctionnalité de visioconférence. Apps Script

Étend les applications suivantes :

Icône Google Agenda pour les paramètres de synchronisation des événements. Agenda

Frameworks d'UI disponibles :

Utilise l'UI existante


Modules complémentaires de l'éditeur

Exemple de module complémentaire d'éditeur montrant les fonctionnalités d'extension Google Docs.

Exemple de module complémentaire d'éditeur montrant les fonctionnalités d'extension Google Docs.

Les modules complémentaires de l'éditeur sont des applications qui étendent Docs, Sheets, Slides ou Forms. Les modules complémentaires de l'éditeur ne peuvent étendre qu'une seule application par module complémentaire, mais vous pouvez publier plusieurs modules complémentaires de l'éditeur dans la même fiche Marketplace. Les utilisateurs ouvrent les modules complémentaires de l'éditeur à partir du menu Extensions de l'application qu'ils étendent.

Vous pouvez créer les fonctionnalités suivantes pour un module complémentaire Editor :

Consulter la documentation sur les modules complémentaires de l'éditeur

Icône Google Workspace Marketplace pour la publication de logiciels. Publiable



Options de codage :

Icône Google Apps Script pour le développement d'extensions d'éditeur. Apps Script

Étend les applications suivantes :

Icône Google Docs pour les extensions d'édition de documents. Docs
Icône Google Sheets pour les fonctionnalités d'automatisation des feuilles de calcul. Sheets
Icône Google Slides pour les outils de création de présentations. Slides
Icône Google Forms pour les outils d'enquête et de formulaire. Formulaires

Frameworks d'UI disponibles :

Icône HTML représentant le développement d'une interface utilisateur Web. HTML
Icône iFrame pour intégrer du contenu Web externe. iframe



Fonctions personnalisées

Exemple de fonction personnalisée montrant l'utilisation d'une formule Google Sheets.

Exemple de fonction personnalisée montrant l'utilisation d'une formule Google Sheets.

Les fonctions personnalisées vous permettent d'ajouter des fonctions dans Sheets. Les utilisateurs peuvent les trouver et les utiliser comme n'importe quelle fonction intégrée parmi les centaines disponibles dans Sheets. Vous pouvez publier une fonction personnalisée en tant que module complémentaire de l'éditeur.

Consulter la documentation sur les fonctions personnalisées

Logo Google Workspace Marketplace pour les options de publication. Publiable



Options de codage :

Apps Script

Étend les applications suivantes :

Icône Google Sheets pour automatiser les tâches liées aux feuilles de calcul. Sheets

Frameworks d'UI disponibles :

Utilise l'UI existante


Macros

Exemple de macro montrant les étapes d'automatisation d'une feuille de calcul enregistrée.

Exemple de macro montrant les étapes d'automatisation d'une feuille de calcul enregistrée.

Les macros sont des enregistrements dans Sheets qui dupliquent une série spécifique d'interactions avec l'UI que vous définissez. Vous pouvez associer une macro à un raccourci clavier ou l'exécuter depuis le menu Extensions > Macros.

Lorsque vous enregistrez une macro, Sheets crée automatiquement une fonction Apps Script qui reproduit les interactions avec l'interface utilisateur. Vous pouvez modifier les macros directement dans l'éditeur Apps Script. Vous pouvez écrire des macros à partir de zéro dans Apps Script ou prendre des fonctions que vous avez déjà écrites et les transformer en macros. Une définition de macro peut être incluse dans un module complémentaire de l'éditeur, mais ne peut pas être publiée.

Consulter la documentation sur les macros

Options de codage :

Logo Google Apps Script pour la fonctionnalité d'enregistrement de macros. Apps Script

Étend les applications suivantes :

Sheets

Frameworks d'UI disponibles :

Utilise l'UI existante


Menus, boîtes de dialogue et barres latérales personnalisés

Exemple de menu personnalisé montrant les options de personnalisation de la barre d'outils de l'éditeur.

Exemple de menu personnalisé montrant les options de personnalisation de la barre d'outils de l'éditeur.

Vous pouvez ajouter des menus, des invites, des alertes, des boîtes de dialogue et des barres latérales HTML personnalisés aux fichiers Docs, Sheets, Slides et Forms dans le cadre d'un module complémentaire de l'éditeur. Les menus personnalisés s'affichent à côté des menus par défaut de l'application qu'ils étendent. Les boîtes de dialogue, les barres latérales, les invites et les alertes sont généralement activées par des actions de l'utilisateur, comme des clics sur des éléments de menu, ou par des déclencheurs, comme des déclencheurs événementiels.

Consulter la documentation sur les menus, les boîtes de dialogue et les barres latérales personnalisés

Options de codage :

Icône Google Apps Script pour le développement de menus personnalisés. Apps Script

Étend les applications suivantes :

Logo Google Docs pour l'intégration des extensions de document. Docs
Icône Google Sheets pour les extensions de la barre latérale des feuilles de calcul. Sheets
Logo Google Slides pour les extensions de la barre latérale de présentation. Slides
Logo Google Forms pour les extensions de boîte de dialogue de formulaire. Formulaires

Frameworks d'UI disponibles :

Icône HTML pour créer des interfaces utilisateur personnalisées. HTML
Icône iFrame permettant d'intégrer des outils Web tiers. iframe



Applications Google Drive

Exemple d'options d'ouverture de fichier dans l'application Drive.

Exemple d'application Drive montrant les options d'ouverture de fichier.

Si votre application est compatible avec les fichiers Drive, vous pouvez l'intégrer à l'interface utilisateur de Drive pour proposer votre application comme option de création ou d'ouverture de fichiers. Votre application peut s'afficher dans le menu Nouveau > Plus et dans le menu Ouvrir avec lorsqu'un utilisateur effectue un clic droit sur un fichier dans Drive. Lorsqu'un utilisateur sélectionne votre application dans l'un des menus, elle s'ouvre dans une nouvelle fenêtre.

Consulter la documentation sur les applications Drive

Icône Google Workspace Marketplace pour la découverte d'applications. Publiable



Options de codage :

Logo Google Developers pour la création d'applications professionnelles. Full dev

Étend les applications suivantes :

Icône Google Drive pour l'intégration du stockage de fichiers. Drive

Frameworks d'UI disponibles :

Utilise l'UI existante


Modules complémentaires Google Classroom

Exemple de modules complémentaires Classroom affichant des pièces jointes de devoirs.

Exemple de modules complémentaires Classroom affichant des pièces jointes de devoirs.

Les modules complémentaires Google Classroom permettent aux enseignants de créer des pièces jointes pour les documents de travail, les annonces ou les supports de cours. Ces pièces jointes ouvrent du contenu tiers dans des iFrames dans Classroom. Les iFrames ouvrent des URL distinctes en fonction du type d'utilisateur et du contexte Classroom.

Consulter la documentation sur les modules complémentaires Classroom

Logo Google Workspace Marketplace pour la publication d'intégrations. Publiable



Options de codage :

Icône Google Developers pour l'intégration d'outils pour la classe. Full dev

Étend les applications suivantes :

Logo Google Classroom pour les outils de workflow des enseignants. Classroom

Frameworks d'UI disponibles :

Icône Iframe pour le contenu Web éducatif intégré. iframe